/* Design tokens — the single place to change branding.
 *
 * @relation(REQ-27, scope=file, role=Impl)
 * @relation(REQ-29, scope=file, role=Impl)
 * @relation(REQ-44, scope=file, role=Impl)
 * @relation(REQ-45, scope=file, role=Impl)
 * @relation(REQ-54, scope=file, role=Impl)
 * @relation(REQ-55, scope=file, role=Impl)
 * @relation(REQ-53, scope=file, role=Impl)
 *
 * Font: Inter (variable, self-hosted — no external font CDN; SIL OFL 1.1,
 * see ../fonts/LICENSE-Inter.txt). No corporate font is specified yet; to
 * swap later, replace the @font-face block and the --st-font value below —
 * nothing else references a font by name.
 * Colors: SEVENSTAX brand sheet (docs/design/assets/SEVENSTAX_Logo_2020.pdf):
 * blue #19418D, orange #EC630C. The orange is the accent and is used
 * sparingly (selection, focus ring, notices); everything else derives from
 * the blue — the neutral greys below are blue-hued tints so the whole UI
 * reads as one palette. app.css and the templates reference branding only
 * through these tokens.
 */

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --st-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    /* system monospace stack (REQ-53) -- no external font/CDN, matches the
       no-external-font rule above. Used for technical values only (DNs,
       serials, hex, OIDs), never for prose. */
    --st-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* brand colors (brand sheet) + derived shades of the blue */
    --st-blue: #19418d;        /* SEVENSTAX blue  (RGB 25/65/141) */
    --st-blue-dark: #123069;   /* hover/active shade of the blue */
    --st-blue-tint: #e8edf6;   /* light blue wash (hover surfaces) */
    --st-orange: #ec630c;      /* SEVENSTAX orange (RGB 236/99/12) — accent */
    --st-orange-tint: #fdeee2; /* light orange wash (selection) */
    --st-orange-deep: #c24f04; /* darker accent: selection/affected outlines (REQ-45),
                                  editor consequence notices (REQ-29, 4.76:1 on surface) */
    --st-affect-tint: #fdf5ee; /* weaker wash than --st-orange-tint (affected, REQ-45) */
    --st-orange-deep-2: #b04604; /* text on --st-orange-tint (REQ-56): --st-orange-deep
                                    only reaches 4.19:1 there, below AA; this one clears
                                    4.97:1 on the tint (5.64:1 on white) */

    /* blue-hued neutrals */
    --st-ink: #1d2433;         /* body text */
    --st-ink-muted: #5b6577;   /* secondary text */
    --st-line: #d8dde8;        /* borders / separators */
    --st-line-soft: #e8ebf2;   /* faint separators */
    --st-surface: #ffffff;     /* cards, dialogs, inputs */
    --st-bg: #f4f6fa;          /* page background */

    /* page wash (REQ-44): the page is no longer one flat tone. Deepest stop is
       bounded by the contrast floor: --st-ink-muted must stay >= 4.5:1 on it. */
    --st-bg-deep: #e3e9f4;
    --st-page-wash: linear-gradient(180deg, var(--st-bg-deep) 0, var(--st-bg) 24rem);

    /* header band (REQ-44): slight vertical shade so the bar itself is not flat */
    --st-header-bg: linear-gradient(180deg, var(--st-blue) 0, var(--st-blue-dark) 100%);

    /* semantic messages */
    --st-ok-bg: #e6f2e8;
    --st-ok-text: #1d5a2c;
    --st-error-bg: #fbe4e4;
    --st-error-text: #8a1f1f;

    /* shape & focus */
    --st-radius: 8px;
    --st-radius-sm: 4px;

    /* elevation scale (REQ-44): blue-tinted (25 65 141) so every shadow reads
       as one palette instead of a generic grey */
    --st-elev-1: 0 1px 2px rgba(25, 65, 141, .06), 0 1px 3px rgba(25, 65, 141, .05);
    --st-elev-2: 0 1px 2px rgba(25, 65, 141, .06), 0 6px 18px rgba(25, 65, 141, .09);
    --st-elev-3: 0 4px 12px rgba(25, 65, 141, .12), 0 24px 48px rgba(18, 26, 43, .22);
    --st-elev-header: 0 2px 8px rgba(18, 26, 43, .16);

    --st-scrim: rgba(18, 26, 43, .45); /* dialog backdrop tint */

    --st-focus: 2px solid var(--st-orange);

    /* spacing scale */
    --st-space-xs: 0.25rem;
    --st-space-s: 0.5rem;
    --st-space-m: 1rem;
    --st-space-l: 1.5rem;

    /* type scale (REQ-54): five hierarchy steps plus the body default, all in
       rem so a size never compounds with an ancestor's own font-size. app.css
       takes every font-size from these tokens (REQ-55) -- no raw values. */
    --st-text-xs: 0.75rem;
    --st-text-s: 0.85rem;
    --st-text-base: 1rem;   /* body default; declare it explicitly wherever a
                                larger ancestor (e.g. h1) would otherwise leak
                                in, so the reset stays a named token too */
    --st-text-m: 1.05rem;
    --st-text-l: 1.35rem;
    --st-text-xl: 1.6rem;

    /* icon glyphs (REQ-55): pixel-fitted to their glyph/shape, not steps in
       the text scale above -- never reuse these for copy. */
    --st-icon-glyph-s: 0.62rem; /* role-icon badge letter */
    --st-icon-glyph-m: 0.7rem;  /* info-icon "i" */
    --st-icon-glyph-l: 1.3rem;  /* overlay close "x" */
}

body {
    font-family: var(--st-font);
}