/* ---------------------------------------------------------------------------
   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 throughout, a muted flag-navy. 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); accent is TEXT and icons (it has to be
       readable on the surface) and is a slightly deeper navy so a link reads as one;
       primary-subtle/-border are the tinted panel. Only the flag tile keeps a red. */
    --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: #1c3a66;          /* navy — accent TEXT (links, eyebrow, active rows) */

    /* 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.
   ---------------------------------------------------------------------------
   Navy is too dark to read on a near-black page, so both brand tokens climb to a lighter
   blue. The accent (TEXT) climbs furthest, to a soft sky a link stays legible in; the fill
   climbs less, to a steel blue that still looks like a button and still carries white text.
   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: #9fc1ec;
    --color-primary: #2b4f80;
    --color-primary-hover: #37619b;
    --color-primary-subtle: #182234;
    --color-primary-border: #2c3e5c;
}

/* The wordmark's logo tile: a muted Norwegian flag. Identical to the Go/WASM section's
   css/app.css — the two front-ends share one mark. See there for the full note; in short
   it is the flag's Scandinavian cross (navy cross, off-white outline, red field, offset
   left) drawn in layered gradients over a red base, constant across themes, with a flat
   dark scrim on top so the plain white sailboat reads on it without an outline. */
.flag-no {
    background-color: #a83f4c;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
        linear-gradient(180deg, transparent 44.5%, #294c76 44.5%, #294c76 55.5%, transparent 55.5%),
        linear-gradient(90deg,  transparent 32.5%, #294c76 32.5%, #294c76 43.5%, transparent 43.5%),
        linear-gradient(180deg, transparent 39%,   #ece6da 39%,   #ece6da 61%,   transparent 61%),
        linear-gradient(90deg,  transparent 27%,   #ece6da 27%,   #ece6da 49%,   transparent 49%);
}