/* ============================================================================
   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;

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

    /* -- 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).
     ========================================================================== */
  :root[data-theme="dark"]{
    /* grounds + neutrals (brand: dark canvas / dark surface / light ink) */
    --paper:#03202F; --surface:#072B3E; --tint:rgba(232,241,246,.08);
    /* --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:rgba(232,241,246,.14); --line-strong:rgba(232,241,246,.30);
    /* 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:rgba(240,138,80,.28);
    /* 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:rgba(230,195,106,.14);
    --bad-fill:rgba(240,131,74,.16); --neutral-fill:rgba(159,182,193,.12);
    --info-fill:rgba(134,187,221,.14);
    /* 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");
  }