/* ---- Design tokens (plan §5 M2 theming layer) ----------------------------
   The whole palette and type/space scale, and nothing else. It was the head of
   `base.css` until dark mode doubled it; splitting on the responsibility line
   ("the theming layer" vs "layout and components") kept both files inside the
   ceilings. Every template that links `base.css` links this FIRST, and so does
   the offline audit pack (`reports/services.STYLESHEETS`).

   Components style through tokens only. Per-tenant branding overrides tokens
   (Organization.config.theme -> the one sanctioned inline style in base.html),
   never components.

   Three rules this block exists to hold:

   1. Every colour is defined in full on bare `:root`. The two dark blocks
      below redefine token VALUES and nothing else, so no colour has its only
      definition inside a media query or a `[data-theme]` block.
   2. Blue is chrome, never a status. `--accent` carries the interface;
      `--warn` (amber) is the one that means "waiting on you". A status is
      never signalled with the accent, not least because a tenant may replace
      it.
   3. Several colours carry two names (`--bg`/`--ground`, `--surface`/
      `--panel`, `--text`/`--ink`, `--muted`/`--slate`, `--border`/`--line`).
      The older name is what the existing components reference; the newer one
      is what the application shell reads. They are the same colour and must
      stay in step; never give one a value the other does not have. */

:root {
  /* --- Ground and surface -------------------------------------------------- */
  --bg: #f3f6fb;
  --ground: #f3f6fb;
  --surface: #ffffff;
  --panel: #ffffff;
  /* A surface that sits *below* the panel: sidebar controls, quiet footers. */
  --panel-sunk: #f7f9fd;
  /* Second paper tone, so bands can alternate without becoming cards. */
  --paper: #eaf0f8;

  /* --- Ink ----------------------------------------------------------------- */
  --text: #13224a;
  --ink: #13224a;
  /* One step down from body ink: nav labels, secondary rows. */
  --ink-2: #38486e;
  --muted: #5e6d8c;
  --slate: #5e6d8c;

  /* --- Lines --------------------------------------------------------------- */
  --border: #d6dfee;
  --line: #d6dfee;
  --line-soft: #e8eef7;
  /* A structural hairline, one step darker than a component border. */
  --rule: #c2cee2;

  /* --- Accent: EU reflex blue, and chrome only ----------------------------- */
  --accent: #003399;
  --accent-deep: #002266;
  --accent-lift: #0047cc;
  --accent-soft: #e6edfa;
  --on-accent: #ffffff;

  /* --- Semantic status colours, separate from the accent ------------------- */
  --ok: #1a7f4b;
  --ok-soft: #e3f4ea;
  /* Text on a *filled* `--ok` ground, for the same reason `--on-crit` exists:
     white in light, near-black in dark, where `--ok` becomes a light tint and
     white on it is unreadable. The Clause 5 map's satisfied square is the
     caller. */
  --on-ok: #ffffff;
  --warn: #a86a00;
  --warn-bright: #ffcc00;
  --on-warn: #3d2c00;
  --warn-soft: #fff4d4;
  --crit: #b3261e;
  --crit-soft: #fbe6e4;
  /* Text on a *filled* `--crit` ground. White in light; near-black in dark,
     where `--crit` becomes a light tint and white on it is unreadable. The
     loud chips (.chip-gap, .chip-expired) are the only callers. */
  --on-crit: #ffffff;
  --waived: #6b4fa0;
  --waived-soft: #ede7f7;
  /* `--neutral` is a quiet FILL (bars, dots, strokes). It does not have text
     contrast against `--neutral-soft`. Components that need words on that
     ground use `--slate`. */
  --neutral: #9aa7bd;
  --neutral-soft: #eef2f8;

  /* --- The dark band on the pre-login surface ------------------------------
     Deliberately dark in BOTH themes: it is a designed band, not a surface
     that follows the reader's preference, so nothing below redefines it.
     (These were `--ink*` until the shell rebuild; `--ink` now means the body
     text colour, which is why they were renamed rather than re-tuned.) */
  --band: #0d1a3d;
  --band-raised: #17285a;
  --band-text: #e7edf8;
  --band-muted: #9fb0d0;
  --band-line: #27376b;
  --accent-on-band: #9cc4ff;

  /* --- Type ---------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-eyebrow: 0.72rem;
  --fs-micro: 0.78rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lede: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-h3: 1.0625rem;
  --fs-h2: clamp(1.35rem, 1.18rem + 0.72vw, 1.9rem);
  --fs-display: clamp(2.05rem, 1.5rem + 2.3vw, 3.4rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.62;
  --tracking-display: -0.021em;
  --tracking-eyebrow: 0.14em;

  /* --- Space, radius, depth ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(19, 34, 74, 0.06);
  --shadow-md: 0 14px 34px -20px rgba(19, 34, 74, 0.5);

  /* --- Measure ------------------------------------------------------------- */
  --page-max: 72rem;
  --measure: 34rem;
  /* Horizontal inset for `.page-width`. Zero inside the workspace, where
     `body` already pads; the two full-bleed shells opt in (`.page-public`
     and `.page-picker` in base.css). */
  --gutter: 0rem;
}

/* ---- Dark ----------------------------------------------------------------
   Two blocks, byte-identical bodies, because they answer two different
   questions and CSS cannot share a declaration list between them:

   - the media query answers "the reader's system prefers dark, and this page
     has not been told otherwise";
   - the attribute selector answers "this page was explicitly set to dark",
     and it must win over a system preference of light.

   Both redefine token VALUES only. Nothing here introduces a colour, so a
   token can never exist in dark and be missing in light. Keep the two bodies
   in step: editing one and not the other is the bug this shape invites.

   `--band*` is absent on purpose: the pre-login band is dark in both themes.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1020;
    --ground: #0a1020;
    --surface: #111a2e;
    --panel: #111a2e;
    --panel-sunk: #0d1526;
    --paper: #0d1526;

    --text: #e7edf8;
    --ink: #e7edf8;
    --ink-2: #b7c3da;
    --muted: #8494b2;
    --slate: #8494b2;

    --border: #26334f;
    --line: #26334f;
    --line-soft: #1b2740;
    --rule: #33436b;

    --accent: #6ea8ff;
    --accent-deep: #9cc4ff;
    --accent-lift: #9cc4ff;
    --accent-soft: #16263f;
    --on-accent: #08152e;

    --ok: #4cc98a;
    --ok-soft: #102b1e;
    --on-ok: #08210f;
    --warn: #f0b429;
    --warn-bright: #ffcc00;
    --on-warn: #3d2c00;
    --warn-soft: #33280a;
    --crit: #ff8a80;
    --crit-soft: #38161a;
    --on-crit: #38161a;
    --waived: #b49ce0;
    --waived-soft: #241a38;
    --neutral: #5a6a86;
    --neutral-soft: #182338;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 14px 34px -20px rgba(0, 0, 0, 0.9);
  }
}

:root[data-theme="dark"] {
  --bg: #0a1020;
  --ground: #0a1020;
  --surface: #111a2e;
  --panel: #111a2e;
  --panel-sunk: #0d1526;
  --paper: #0d1526;

  --text: #e7edf8;
  --ink: #e7edf8;
  --ink-2: #b7c3da;
  --muted: #8494b2;
  --slate: #8494b2;

  --border: #26334f;
  --line: #26334f;
  --line-soft: #1b2740;
  --rule: #33436b;

  --accent: #6ea8ff;
  --accent-deep: #9cc4ff;
  --accent-lift: #9cc4ff;
  --accent-soft: #16263f;
  --on-accent: #08152e;

  --ok: #4cc98a;
  --ok-soft: #102b1e;
  --on-ok: #08210f;
  --warn: #f0b429;
  --warn-bright: #ffcc00;
  --on-warn: #3d2c00;
  --warn-soft: #33280a;
  --crit: #ff8a80;
  --crit-soft: #38161a;
  --on-crit: #38161a;
  --waived: #b49ce0;
  --waived-soft: #241a38;
  --neutral: #5a6a86;
  --neutral-soft: #182338;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 34px -20px rgba(0, 0, 0, 0.9);
}

/* Chinese sets tighter than Latin at the same size and takes no negative
   tracking at display sizes; it also wants more leading in running text. */
html[lang^="zh"] {
  --tracking-display: 0.005em;
  /* Letter-spacing that opens up a Latin label pulls CJK glyphs apart, and
     the uppercase treatment those labels rely on does not exist here at all. */
  --tracking-eyebrow: 0.03em;
  --lh-body: 1.78;
  --lh-tight: 1.2;
}