/* ---------------------------------------------------------------------------
   kjol-web — brand stylesheet for the Kjol JS Web section (/js/*).
   ---------------------------------------------------------------------------
   There is deliberately no `@import "tailwindcss"` here. The bundler PREPENDS
   kjol's shared scaffold (go/jsruntime/styles/theme.css) to this file, and that
   scaffold does the import — an @import has to come first, and this file no
   longer is. See jsbundler/css.go and the header of theme.css.

   What is left is only what is genuinely this app's: the brand.

   The values below match the Go/WASM section's css/app.css on purpose — same
   Lora, same sky accent — so that crossing between /wasm and /js reads as two
   parts of ONE site rather than two demos that happen to share a domain. The
   two sections are built by completely different pipelines; they should not look
   like it.
   --------------------------------------------------------------------------- */

@theme {
    /* The brand: navy and red, the Norwegian flag muted down. These are the SAME values
       the Go/WASM section's css/app.css sets, and under the same names — so the Layers
       menu, the sidebar highlight and the callouts are the same navy on both sides of the
       site rather than two navies that happen to be close.

       primary FILLS (white text sits on it) and is the NAVY; accent is TEXT and icons and
       is the RED (it has to be readable on the surface); primary-subtle/-border are the
       tinted panel. */
    --color-primary: #1e3a63;         /* muted navy — fills; they carry white text */
    --color-primary-hover: #16294a;
    --color-primary-subtle: #eef2f8;  /* a navy wash — tinted panels, callouts */
    --color-primary-border: #c5d1e2;
    --color-accent: #9e1b32;          /* dark red — accent TEXT */

    /* Lora, the same body face the Go/WASM section vendors. The woff2 files are
       served out of wwwroot/fonts by the same server, so this section pays no
       extra request for them — they are already in the browser's cache from the
       front page. */
    --font-sans: "Lora", ui-serif, Georgia, Cambria, "Times New Roman", serif;
    --font-serif: "Lora", ui-serif, Georgia, Cambria, "Times New Roman", serif;
}

/* Lora's @font-face rules are declared HERE as well as in the Go/WASM section's
   app.css, and that duplication is correct: the two sections load different
   stylesheets (this compiles to bundle.min.css, that one to app.css) and a page
   in this section never links the other. Each stylesheet has to stand alone.

   What is NOT duplicated is the download. Both point at the same four /fonts/*.woff2
   URLs served out of the same wwwroot, so a reader arriving here from the front page
   already has them in cache and pays nothing.

   Variable fonts: one file per style covers weights 400-700, hence the range. */
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/lora-latin-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/lora-latin-ext-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/lora-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Only the font. The page's background and text colour come from the shared
   scaffold's `html` rule, which paints them from --color-surface / --color-ink —
   the tokens the .dark block re-points. Setting them here would pin the page to
   white and leave a dark app sitting in a white window. */
html {
    font-family: var(--font-sans);
}

/* The dark values for the brand.
   ---------------------------------------------------------------------------
   Both tokens move, for different reasons. The accent CLIMBS: a dark red on a near-black
   surface is unreadable, so it goes up to a light rose — still the flag's red, just the
   only version of it you can read here. The FILL climbs too, which the sky blue it
   replaced did not have to: navy is dark enough that a navy button on a #101013 page loses
   its edges and reads as a hole. And the tinted panel inverts outright, because a pale
   wash on #101013 is not a tint, it is a white box.

   Same values, same names, as the Go/WASM section's css/app.css. */
.dark {
    --color-accent: #f0a3ad;
    --color-primary: #2b4f80;
    --color-primary-hover: #37619b;
    --color-primary-subtle: #182234;
    --color-primary-border: #2c3e5c;
}