/*
 * COPIED VERBATIM from mnem-cloud services/web/design/tokens.css at mnem-cloud commit 77c79467
 * (source of record: mnem-cloud docs/brand/visual-language.html, round 3e). Do not edit here: re-copy.
 * The residents portal follows the SYSTEM theme only (prefers-color-scheme): no data-theme toggle and no
 * pre-paint script (CSP is script-src 'self'), so the data-theme selectors below never match.
 */
/*
 * mnem design tokens — web shell (mnem.com control plane).
 * INSTRUMENT REGISTER of the round-3e public face: white ground, ink rules
 * as structure, ELECTRIC BLUE accent, FLAT discipline (no radii, no shadows —
 * hierarchy is drawn with lines and type, never with elevation).
 * Three voices: display (grotesque) / body (system sans, for instrument
 * legibility) / mono (first-class: every identifier — kuri, ss58, channel,
 * block — renders in --mono). A serif voice is available for editorial
 * moments only (notes, empty states, guidance prose).
 * Slate "instrument" set is RESERVED — wallpaper moments, environment chips,
 * deliberate contrast.
 *
 * Source of record: docs/brand/visual-language.html (round 3e).
 * Every component stylesheet draws exclusively from these variables.
 *
 * THEMES. This :root block is the LIGHT palette and the default. The dark
 * palette is a second set of the SAME tokens, applied twice below:
 *   1. under `@media (prefers-color-scheme: dark)` for `:root:not([data-theme="light"])`
 *      — follow the system unless the person chose Light;
 *   2. under `:root[data-theme="dark"]` — the person chose Dark.
 * `data-theme` is set on <html> before first paint by the inline script
 * frontend/src/lib/prepaint.ts generates into index.html, then by the
 * ThemeControl (src/lib/theme.ts); absent / "system" means follow the OS.
 * Keep the two dark blocks identical — edit one, edit both.
 * A SUBTREE can pin light with `data-theme="light"` on any element (the
 * light-only public face does this), because the light set below also
 * matches `[data-theme="light"]`.
 * The PUBLIC SURFACE is light-only: `<html data-surface="public">` (set before
 * first paint on public paths by src/lib/prepaint.ts, then by MarketingLayout)
 * is excluded from both dark blocks, so page chrome — body ground, overscroll,
 * scrollbars, the boot "Loading…" — stays light whatever the OS or choice.
 */
:root,
[data-theme="light"] {
  color-scheme: light dark;

  /* ----------------------------------------------- paper (primary ground) */
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-sunken: #f4f7f5;
  --bg-hover: rgba(16, 26, 28, 0.045);
  --bg-active: rgba(16, 26, 28, 0.08);

  /* ---------------------------------------------------------------- ink */
  --ink: #101a1c;
  --ink-muted: #4d5b56;
  --ink-faint: #8b968f;

  /* ------------------------------------- instrument (RESERVED dark set) */
  --ground: #0e1417;
  --ground-raised: #151e21;
  --ink-inverse: #e8efec;
  --ink-inverse-muted: #93a5a1;
  --ink-inverse-faint: #61736f;
  --line-inverse: rgba(93, 110, 255, 0.16);

  /* ------------------------------------------------------------- accent */
  --accent: #1717f4;
  --accent-deep: #1111e8; /* hover / pressed */
  --accent-bright: #5d6eff; /* ONLY on dark grounds */
  --accent-wash: rgba(23, 23, 244, 0.06);
  --accent-ink: #f0f2ff; /* text on accent fills */

  /* ------------------------------------------- signal (never the accent) */
  --ok: #3f9a51;
  --ok-wash: rgba(63, 154, 81, 0.12);
  --warn: #8a6510;
  --warn-wash: rgba(182, 132, 21, 0.12);
  --critical: #c9564a;
  --critical-wash: rgba(201, 86, 74, 0.12);

  /* -------------------------------------------------------------- lines */
  --line: #dfe6e2;
  --line-strong: #cbd5d0;
  --rule: #101a1c; /* thick structural rules are INK */
  --grid-line: rgba(23, 23, 244, 0.04); /* faint accent graph-paper (commit band) */

  /* --------------------------------------------------------- scrollbars */
  --scrollbar-thumb: rgba(16, 26, 28, 0.16);
  --scrollbar-thumb-hover: rgba(16, 26, 28, 0.3);
  --scrollbar-color: rgba(16, 26, 28, 0.22);

  /* A QR code must stay dark-on-light in EVERY theme to scan. */
  --qr-ground: #ffffff;

  /* --------------------------------- geometry: FLAT — square corners only */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-full: 0;

  /* ------------------------- elevation: none — hierarchy is drawn in line */
  --shadow-card: none;
  --shadow-board: none;
  --shadow-pop: none;

  /* ----------------------------------------------------------- z-index */
  /* A small, ordered scale so overlays layer predictably (WS-H). */
  --z-nav: 10;
  --z-sticky: 100;
  --z-overlay: 1000; /* the guidance chat panel */
  --z-launcher: 1010; /* its always-on-top launcher */

  /* ------------------------------------------------------------- motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 150ms var(--ease);
  --t-slow: 280ms var(--ease);

  /* --------------------------------------------------------------- type */
  --font-display: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-serif: "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    monospace;

  /* -------------------------------------------------------------- focus */
  --focus-ring-color: var(--accent);
  --selection-bg: rgba(23, 23, 244, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-surface="public"]) {
    color-scheme: dark;
    /* -------- dark: near-black with a slight blue bias, under electric blue */
    --paper: #0b0d16;
    --paper-raised: #11141f;
    --paper-sunken: #07080f;
    --bg-hover: rgba(196, 204, 255, 0.06);
    --bg-active: rgba(196, 204, 255, 0.11);

    --ink: #e6e9f4;
    --ink-muted: #a4abc0;
    --ink-faint: #8189a3; /* 4.71:1 even on a hovered raised row */

    /* #1717f4 is 2.3:1 on this ground — the accent is lifted toward the
       brand's own on-dark blue (--accent-bright) until it clears AA, and text
       on an accent fill turns dark (white on a light blue fails AA). */
    --accent: #6c78ff;
    --accent-deep: #929bff; /* hover / pressed — LIGHTER on dark, still legible as text */
    --accent-wash: rgba(108, 120, 255, 0.14);
    --accent-ink: #0b0d16;

    --ok: #5fc675;
    --ok-wash: rgba(95, 198, 117, 0.16);
    --warn: #e2b24c;
    --warn-wash: rgba(226, 178, 76, 0.16);
    --critical: #ff7a6c;
    --critical-wash: rgba(255, 122, 108, 0.16);

    --line: #262b3c;
    --line-strong: #5b6484;
    --rule: #e6e9f4;
    --grid-line: rgba(108, 120, 255, 0.07);

    --scrollbar-thumb: rgba(230, 233, 244, 0.16);
    --scrollbar-thumb-hover: rgba(230, 233, 244, 0.3);
    --scrollbar-color: rgba(230, 233, 244, 0.22);

    --focus-ring-color: var(--accent);
    --selection-bg: rgba(108, 120, 255, 0.35);
  }
}

[data-theme="light"],
:root[data-surface="public"] {
  color-scheme: light;
}

:root[data-theme="dark"]:not([data-surface="public"]) {
  color-scheme: dark;
  /* -------- dark: near-black with a slight blue bias, under electric blue */
  --paper: #0b0d16;
  --paper-raised: #11141f;
  --paper-sunken: #07080f;
  --bg-hover: rgba(196, 204, 255, 0.06);
  --bg-active: rgba(196, 204, 255, 0.11);

  --ink: #e6e9f4;
  --ink-muted: #a4abc0;
  --ink-faint: #8189a3; /* 4.71:1 even on a hovered raised row */

  /* #1717f4 is 2.3:1 on this ground — the accent is lifted toward the
     brand's own on-dark blue (--accent-bright) until it clears AA, and text
     on an accent fill turns dark (white on a light blue fails AA). */
  --accent: #6c78ff;
  --accent-deep: #929bff; /* hover / pressed — LIGHTER on dark, still legible as text */
  --accent-wash: rgba(108, 120, 255, 0.14);
  --accent-ink: #0b0d16;

  --ok: #5fc675;
  --ok-wash: rgba(95, 198, 117, 0.16);
  --warn: #e2b24c;
  --warn-wash: rgba(226, 178, 76, 0.16);
  --critical: #ff7a6c;
  --critical-wash: rgba(255, 122, 108, 0.16);

  --line: #262b3c;
  --line-strong: #5b6484;
  --rule: #e6e9f4;
  --grid-line: rgba(108, 120, 255, 0.07);

  --scrollbar-thumb: rgba(230, 233, 244, 0.16);
  --scrollbar-thumb-hover: rgba(230, 233, 244, 0.3);
  --scrollbar-color: rgba(230, 233, 244, 0.22);

  --focus-ring-color: var(--accent);
  --selection-bg: rgba(108, 120, 255, 0.35);
}