/* ---------------------------------------------------------------------------
   kjol-website — 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
   Open Sans, same navy 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.
   --------------------------------------------------------------------------- */

/* Open Sans — self-hosted (files in wwwroot/fonts). One variable file per subset
   carries weights 400–700 upright and italic. unicode-range keeps the browser to the
   one subset a glyph needs; font-display: swap paints the fallback first. The same four
   blocks live in the /wasm side's css/app.css so both front-ends share one typeface. */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/opensans-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: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/opensans-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: "Open Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/opensans-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;
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/opensans-latin-ext-italic.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;
}

@theme {
    /* The UI typeface — see the @font-face blocks above. This one line points the kit's
       font-sans utilities and the html rule below onto Open Sans. */
    --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;

    /* 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) */

}

/* 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%);
}