/* ============================================================================
   THE SINGLE STYLE POINT - every brand value the dashboard uses.

   Colour, tint, shadow, radius, font, and gradient are all tokens defined in
   the :root block below. To restyle the product - apply new brand guidelines,
   change the accent, soften the surfaces - edit the tokens here and NOWHERE
   else.

   RULE: never hardcode a brand value (a hex colour, a box-shadow, a
   border-radius, a font stack, a gradient) in a component stylesheet
   (the chrome/pliny/primitives/intake/welcome sheets, findings_review.css) or in a template's inline <style>/style="".
   Always reference a token with var(--name). Need a new brand value? Add a
   token here first, then use it. This is what keeps the whole product
   restyleable from one file.

   Loaded first on every page: base.html links tokens.css before the component sheets, and
   the standalone login.html links tokens.css directly. Component rules live in
   the component sheets and findings_review.css and reference these tokens only.
   ============================================================================ */
  :root{
    /* -- Brand core -------------------------------------------------------- */
    /* --auth is the brand navy (design direction: navy #003453, burnt orange,
       white); 12.99:1 on white, ~11.6:1 on --tint. --auth-deep is its hover. */
    --auth:#003453; --auth-deep:#00263E;
    /* --lava is the accent for FILLS, BORDERS, the progress bar, and spinners
       only; normal-size text in the lava family must use --lava-deep (7:1).
       The one exception: white on the lava primary button (4.9:1, AA / AAA
       large). --lava-hover is that button's hover fill. */
    --lava:#C7431F; --lava-deep:#962E0E; --lava-hover:#A83618;

    /* -- Neutrals + surfaces ---------------------------------------------- */
    /* --paper is the very-light COOL ground the direction calls for: white
       (--surface) cards on a cool wash read as modern SaaS. --line is
       decorative; form-control boundaries use --line-strong (3:1, SC 1.4.11). */
    --ink:#1F242C; --muted:#4C515D;
    /* --placeholder: example text inside an empty field. Dimmer than
       --muted so a worked example ("Acme Logistics") never reads as a
       value the field already holds, but held above 4.5:1 on --surface -
       it carries content, not decoration, and was the one text colour on
       the intake screens left to the browser default (5.45:1 here). */
    --placeholder:#646A73;
    --paper:#F4F7FA; --surface:#fff;
    --line:#D5D8DC; --line-strong:#9CA3AF; --tint:#EDF1F5;

    /* -- Status text (every TEXT colour holds 7:1 on its hardest ground) --- */
    --ok:#2E5A34; --warn:#6E4C05; --bad:#932710;

    /* -- Soft tinted fills (pill/note backgrounds, selection washes) ------- */
    --ok-fill:#EAF3EB; --warn-fill:#FAF3E0; --bad-fill:#FBE9E3;
    --neutral-fill:#F0F1F3; --info-fill:#EAF1F7;
    --lava-fill:#FBF1EC; --lava-fill-line:#F0D9CE; --mark:#F8D8C4;

    /* -- Themed component tokens (see :root[data-theme="dark"]) ------------ */
    /* Light values equal what components used before, so light is unchanged.
       --auth serves interactive text/outlines; a navy FILL with light text on
       it needs its own token so dark can keep the fill dark. */
    --btn-bg:var(--auth); --btn-bg-hover:var(--auth-deep);
    --on-accent:#fff; --tip-bg:var(--auth); --heading:var(--auth);

    /* -- Catalog control-category palette ----------------------------------- */
    /* The control categories on the risk & control catalog (a navigation lens
       over the framework's 25 control domains): the nine ISO/IEC 42001 Annex A
       themes plus two technical additions (see config/control_taxonomy.yaml).
       Used for dots, flow ribbons and nodes ONLY - never for text - so these
       are fills, not text colours. --group-unclassified is the fail-open
       neutral for a control whose domain is not yet named in the taxonomy. */
    --group-policies:#5B6B2F; --group-org:#8A6534; --group-resources:#3E7A6C;
    --group-impact:#9C4257; --group-lifecycle:#B5532A; --group-data:#2E6E8E;
    --group-info:#6B5CA5; --group-use:#2F5D3A; --group-thirdparty:#0B4E77;
    --group-seceng:#444F5C; --group-agentsafety:#7A3B69;
    --group-unclassified:#6B7280;

    /* -- Client workspace: one colour per workflow, and the stage scale ------ */
    /* The four workflows take four catalog colours, as fills, rings and icon
       strokes, never as text. The rollout stage chips run on one scale,
       earliest to live, built from the neutral, two catalog colours and the
       ok pair. The middle two mix a catalog colour into --surface and --ink,
       so every theme gets them from its own grounds: 12% for the fill and 35%
       for the ink holds at least 7.2:1 in light, dark and molten. */
    --wf-intake:var(--group-data); --wf-assess:var(--group-resources);
    --wf-threat:var(--group-lifecycle); --wf-ttx:var(--group-info);
    --stage-1-fill:var(--neutral-fill); --stage-1-ink:var(--muted);
    --stage-2-fill:color-mix(in srgb,var(--group-data) 12%,var(--surface));
    --stage-2-ink:color-mix(in srgb,var(--group-data) 35%,var(--ink));
    --stage-3-fill:color-mix(in srgb,var(--group-resources) 12%,var(--surface));
    --stage-3-ink:color-mix(in srgb,var(--group-resources) 35%,var(--ink));
    --stage-4-fill:var(--ok-fill); --stage-4-ink:var(--ok);

    /* -- Lifecycle figure (the catalog's Stages view, #1926) --------------- */
    /* The figure's own colours, one per phase of an AI system's life, plus its
       white pills and dark pill lettering. It is drawn for a dark ground and
       keeps these in every theme, on the login hero's navy (--lc-ground), so
       no theme block redefines them. Fills only, never page text. */
    --lc-understand:#C8692A; --lc-build:#56876D; --lc-run:#74121D;
    --lc-retire:#9AA4AC; --lc-gap:#083451; --lc-light:#FFFFFF; --lc-dark:#231F20;
    --lc-ground:var(--grad-auth); --lc-cap:#A6BCC7; --lc-glow:rgba(255,255,255,.55);

    /* -- Elevation (navy-tinted, one recipe per role) --------------------- */
    --shadow-header:0 1px 8px rgba(0,52,83,.07);
    --shadow-card:0 1px 6px rgba(0,52,83,.05);
    --shadow-pop:0 8px 24px rgba(31,36,44,.12);
    --shadow-panel:0 4px 14px rgba(0,52,83,.10);
    --shadow-tip:0 2px 10px rgba(0,0,0,.22);
    --shadow-hero:0 18px 50px rgba(0,10,20,.45);   /* the login card on the navy hero */
    --scrim:rgba(0,0,0,.45);   /* behind a modal dialog, in every theme */

    /* -- Radii ------------------------------------------------------------- */
    --r-xs:3px; --r-sm:4px; --r:6px; --r-card:10px; --r-pill:999px;

    /* -- Type -------------------------------------------------------------- */
    /* Heading face: self-hosted Inter (OFL, /static/fonts) on titles only;
       body/UI stay on the native system stack; mono for machine strings. */
    --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --font-head:"Inter",var(--font-ui);
    --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

    /* -- Brand gradients (login hero + the lava/logo flame) --------------- */
    /* --grad-auth is the login field: cooled-basalt navy with a faint warm
       halo rising behind the card, as if heat sits beneath the surface. */
    --grad-auth:
      radial-gradient(58% 44% at 50% 40%, rgba(255,122,0,.13), rgba(255,122,0,0) 66%),
      linear-gradient(135deg,#003453 0%,#012A42 45%,#001526 100%);
    --grad-flame:linear-gradient(90deg,#FFB94A,#FF8700,#EC2600);
    /* Heat bleeding down from the molten card seam into the surface below. */
    --glow-flame:0 4px 18px 0 rgba(255,120,0,.5);
  }
  /* ==========================================================================
     DARK THEME - the brand guide's "control-room" dark world. Attribute-scoped
     ONLY (never @media prefers-color-scheme) so login.html, which links this
     file but never sets data-theme, is untouched. theme-init.js stamps the
     attribute from localStorage or the OS setting before first paint.
     Every text token holds 7:1 on the harder --surface ground (warm-accent
     text is a documented AA >=4.5 exception, like white-on-lava in light).
     A translucent value that is another token's colour is mixed from that
     token, so changing the token carries it.
     ========================================================================== */
  :root[data-theme="dark"]{
    /* grounds + neutrals (brand: dark canvas / dark surface / light ink) */
    --paper:#03202F; --surface:#072B3E; --tint:color-mix(in srgb,var(--ink) 8%,transparent);
    /* --muted nudged a hair lighter than the brand swatch (#9FB6C1) so it
       clears the 7:1 floor with margin instead of landing at 6.98. */
    --ink:#E8F1F6; --muted:#A6BCC7; --placeholder:#8AA0AD;   /* 5.42:1 on --surface */
    --line:color-mix(in srgb,var(--ink) 14%,transparent); --line-strong:color-mix(in srgb,var(--ink) 30%,transparent);
    /* interactive text / links / focus rings / aria-current / th underline */
    --auth:#86BBDD;
    /* accent family: lava as fill brightens; lava-as-text is the brand's
       orange-on-dark (AA exception) */
    --lava:#D2552B; --lava-deep:#F08A50; --lava-hover:#E0621F;
    --lava-fill:rgba(224,106,43,.16); --lava-fill-line:rgba(224,106,43,.32);
    --mark:color-mix(in srgb,var(--lava-deep) 28%,transparent);
    /* status text (lightened to clear 7:1 on dark) */
    --ok:#86D89A; --warn:#E6C36A; --bad:#F4B6A3;
    /* soft fills (translucent over the dark surface) */
    --ok-fill:rgba(127,208,140,.14); --warn-fill:color-mix(in srgb,var(--warn) 14%,transparent);
    --bad-fill:rgba(240,131,74,.16); --neutral-fill:rgba(159,182,193,.12);
    --info-fill:color-mix(in srgb,var(--auth) 14%,transparent);
    /* themed component tokens: fills stay dark, label stays light */
    --btn-bg:#0E5A85; --btn-bg-hover:#12689A; --on-accent:#EAF4FB;
    --tip-bg:#00263D; --heading:var(--ink);
    /* elevation: brand dark shadow recipe */
    --shadow-header:0 1px 2px rgba(0,0,0,.30);
    --shadow-card:0 1px 2px rgba(0,0,0,.30);
    --shadow-pop:0 10px 30px rgba(0,0,0,.40);
    --shadow-panel:0 6px 20px rgba(0,0,0,.40);
    --shadow-tip:0 8px 24px rgba(0,0,0,.45);
  }
  /* ==========================================================================
     MOLTEN THEME - the flame-forward dark variant (opt-in third choice, never
     the OS default). Same brand navy grounds as the control-room dark but
     warmer and deeper, and the amber->red flame carries the active elements:
     the warm-amber interactive accent, the glow on the primary button, and the
     --grad-flame progress bar (the last two are molten-scoped rules in intake.css
     that reference the existing gradient/glow tokens). Warm accents are a
     documented AA (>=4.5) exception, as in the light theme's white-on-lava.
     ========================================================================== */
  :root[data-theme="molten"]{
    /* grounds: warm radial heat over a deep base; warmer surface than dark */
    --paper:radial-gradient(120% 85% at 50% -8%,#0A2F38 0%,#041A25 62%);
    --surface:#0C2634; --tint:rgba(255,183,90,.10);
    --ink:#F1ECE6; --muted:#AEB4BA; --placeholder:#939AA2;   /* 5.5:1 on --surface */
    --line:rgba(255,236,224,.12); --line-strong:rgba(255,236,224,.26);
    /* interactive accent: warm amber (links/focus/aria-current/th underline) */
    --auth:#F2A96A;
    /* accent family: brighter, hotter than the control-room dark */
    --lava:#E8632B; --lava-deep:#F7A877; --lava-hover:#F0723A;
    --lava-fill:rgba(255,135,0,.16); --lava-fill-line:rgba(255,135,0,.34);
    --mark:rgba(255,150,80,.30);
    /* status text */
    --ok:#84D398; --warn:#FFC46A; --bad:#FF9E80;
    /* soft fills */
    --ok-fill:rgba(127,208,140,.14); --warn-fill:rgba(255,183,90,.16);
    --bad-fill:rgba(255,90,40,.18); --neutral-fill:rgba(180,186,192,.12);
    --info-fill:rgba(134,187,221,.14);
    /* themed component tokens: solid hot fill + warm label; navy tip stays */
    --btn-bg:#B84212; --btn-bg-hover:#C85428; --on-accent:#FFF3EC;
    --tip-bg:#00263D; --heading:var(--ink);
    /* elevation: warm-black dark shadows */
    --shadow-header:0 1px 2px rgba(0,0,0,.35);
    --shadow-card:0 1px 2px rgba(0,0,0,.35);
    --shadow-pop:0 10px 30px rgba(0,0,0,.45);
    --shadow-panel:0 6px 20px rgba(0,0,0,.45);
    --shadow-tip:0 8px 24px rgba(0,0,0,.50);
  }
  /* Inter, variable weight, latin subset. font-display:swap so text paints
     immediately in the system stack and reflows to Inter when it arrives. */
  @font-face{
    font-family:"Inter";font-style:normal;font-weight:100 900;
    font-display:swap;
    src:url("/static/fonts/inter-latin-var.woff2") format("woff2");
  }