/* ============================================================================
 * theme-tokens.css — AIDC UNIFIED THEME TOKEN SSOT
 * ----------------------------------------------------------------------------
 * ARCH-THEME-SYSTEM (docs/design/ARCH-THEME-SYSTEM.md) — Section C.
 *
 * SINGLE SOURCE OF TRUTH for every color/design token across the entire AIDC
 * front-end (Engine /app, Admin /admin/aidc, landing, account, auth pages).
 *
 * ONE mechanism:  html.light-theme  (absence = DARK, the default).
 * ONE storage key: localStorage['aidc-theme'] in {'light','dark'}.
 *
 * READABILITY CONTRACT (enforced by tests/test_theme_contrast.py — HARD BLOCK):
 *   - Every text-role token (--text/--text2/--muted/--dim) is AAA (>=7:1) on
 *     --bg in BOTH modes, and >=4.5:1 on --card/--bg2.
 *   - Every text accent is AA (>=4.5:1) on --bg in BOTH modes.
 * Do NOT hand-edit a token to a lower-contrast value — the guard test will fail
 * the build. Ratios for every pair are recorded in docs/design/THEME-CONTRAST-TABLE.md.
 *
 * This file is consumed by:
 *   - static pages: <link rel="stylesheet" href="/static/theme-tokens.css"> (first)
 *   - Engine /app : injected as the first _CSS_FILES entry by app_inject.py
 *   - every page  : injected at </head> by ui_fixes.TabletThemeMiddleware so the
 *                   canonical tokens override any page's stale inline :root.
 * ========================================================================== */

/* ---- DARK (default) -------------------------------------------------------- */
:root {
  /* Non-theme design tokens (constant across modes) */
  --font: 'Inter', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-btn: 10px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Brand (LGC red is the constant in both modes) + primary button family */
  --red: #c8150a;
  --primary: #ef4444;
  --primary-hover: #dc2626;
  --primary-dark: #b91c1c;
  --primary-glow: rgba(239,68,68,.15);
  --gold: #eab308;

  /* Surfaces */
  --bg: #0d0d14;
  --bg2: #13131c;
  --bg3: #151d30;
  --bg4: #1c2640;
  --card: #171721;
  --bg-raised: #13131c;   /* alias of --bg2 (back-compat) */
  --bg-card: #171721;     /* alias of --card (back-compat) */

  /* Text roles — all AAA (>=7:1) on --bg */
  --text: #f2f4f9;        /* 17.59:1 */
  --text2: #cdd3e0;       /* 12.90:1 */
  --muted: #aeb6c6;       /*  9.50:1 */
  --dim: #9aa3b5;         /*  7.63:1 */
  --text-muted: #aeb6c6;  /* alias of --muted */
  --text-dim: #9aa3b5;    /* alias of --dim */

  /* Accents — all AA (>=4.5:1) as text on --bg */
  --green: #22c55e;       /*  8.50:1 */
  --yellow: #eab308;      /* 10.09:1 */
  --cyan: #06b6d4;        /*  7.97:1 */
  --orange: #f97316;      /*  6.91:1 */
  --blue: #3b82f6;        /*  5.26:1 */
  --purple: #8b5cf6;      /*  4.57:1 */
  --red2: #ef4444;        /*  5.14:1  (critical text) */

  /* Semantic aliases */
  --good: #22c55e;
  --warn: #eab308;
  --critical: #ef4444;

  /* Borders — raised from the .06 that vanished */
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.14);

  --shadow-card: 0 12px 40px rgba(0,0,0,.35);
}

/* ---- LIGHT (html.light-theme) --------------------------------------------- */
html.light-theme {
  --primary: #dc2626;
  --primary-hover: #b91c1c;
  --primary-dark: #991b1b;
  --primary-glow: rgba(239,68,68,.08);
  --gold: #a16207;

  /* Surfaces */
  --bg: #ffffff;
  --bg2: #f8f8fa;
  --bg3: #eef0f4;
  --bg4: #e6e9ef;
  --card: #f4f4f7;
  --bg-raised: #f8f8fa;
  --bg-card: #f4f4f7;

  /* Text roles — all AAA (>=7:1) on #fff */
  --text: #14141f;        /* 18.27:1 */
  --text2: #33384a;       /* 11.63:1 */
  --muted: #3d4452;       /*  9.78:1 */
  --dim: #4a5261;         /*  7.86:1 */
  --text-muted: #3d4452;
  --text-dim: #4a5261;

  /* Accents — all AA (>=4.5:1) as text on #fff */
  --purple: #6d28d9;      /*  7.10:1 */
  --blue: #1d4ed8;        /*  6.70:1 */
  --red: #c8150a;         /*  5.89:1  (critical / brand) */
  --green: #047857;       /*  5.48:1 */
  --cyan: #0e7490;        /*  5.36:1 */
  --orange: #b45309;      /*  5.02:1 */
  --yellow: #a16207;      /*  4.92:1 */
  --red2: #c8150a;        /* critical text uses the AA brand red in light */

  --good: #047857;
  --warn: #b45309;
  --critical: #c8150a;

  /* Borders */
  --border: rgba(0,0,0,.10);
  --border2: rgba(0,0,0,.14);

  --shadow-card: 0 12px 40px rgba(0,0,0,.10);
}