/* ─────────────────────────────────────────────────────────────────────────────
   tokens.css — semantic design tokens for the QC Checker dashboard.
   Loaded first. All other stylesheets reference these tokens.

   Layers:
     1. Light defaults  ->  :root
     2. Dark overrides  ->  [data-theme="dark"]
   color-scheme on :root makes native scrollbars/form controls follow theme.

   Header gradient (--hdr-grad-from / --hdr-grad-to) is intentionally NOT
   themed: it's the brand mark (indigo→violet) and reads on both themes.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Native scrollbars/form controls follow the explicit theme, not the OS.
     Without scoping, dark-OS users would see dark scrollbars even on the
     light theme page when color-scheme advertises both. */
  color-scheme: light;

  --font: system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'SF Mono', Menlo, ui-monospace, monospace;

  /* Brand gradient (theme-neutral) */
  --hdr-grad-from: #4f46e5;
  --hdr-grad-to:   #7c3aed;

  /* === Surface ===================================================== */
  --bg:             #f8f9fa;   /* page */
  --card:           #ffffff;   /* primary surface */
  --card-elev:      #ffffff;   /* modals/dropdowns */
  --card-hover:     #f8fafc;   /* hover/active rows */
  --surface-soft:   #f5f7fb;   /* sidebar/list backgrounds */
  --code-bg:        #f8fafc;
  --code-fg:        #1e293b;

  /* === Border ====================================================== */
  --border:         #e2e8f0;
  --border-strong:  #cbd5e1;
  --border-subtle:  rgba(0, 0, 0, 0.05);

  /* === Text ======================================================== */
  --txt:            #1e293b;
  --dim:            #64748b;
  --txt-muted:      #94a3b8;
  --txt-on-pri:     #ffffff;   /* foreground on --pri solid */

  /* === Brand (primary) ============================================= */
  --pri:            #4f46e5;
  --pri-hover:      #4338ca;
  --pri-soft-bg:    #e0e7ff;
  --pri-soft-fg:    #3730a3;
  --pri-tint:       rgba(79, 70, 229, 0.08);
  --pri-tint-mid:   rgba(79, 70, 229, 0.12);
  --pri-tint-strong:rgba(79, 70, 229, 0.18);
  --pri-ring:       rgba(79, 70, 229, 0.10);   /* focus ring */
  --pri-shadow:     rgba(79, 70, 229, 0.06);

  /* === State: success / OK ========================================= */
  --ok:             #16a34a;
  --ok-strong:      #15803d;
  --ok-soft-bg:     #dcfce7;
  --ok-soft-fg:     #166534;
  --ok-bd:          #bbf7d0;
  --ok-tint:        rgba(16, 185, 129, 0.10);
  --ok-tint-bd:     rgba(16, 185, 129, 0.30);

  /* === State: error ================================================ */
  --err:            #dc2626;
  --err-strong:     #991b1b;
  --err-soft-bg:    #fef2f2;
  --err-soft-fg:    #991b1b;
  --err-bd:         #fecaca;
  --err-tint:       rgba(239, 68, 68, 0.08);
  --err-tint-bd:    rgba(239, 68, 68, 0.25);

  /* === State: warn ================================================= */
  --warn:           #d97706;
  --warn-strong:    #92400e;
  --warn-soft-bg:   #fef3c7;
  --warn-soft-fg:   #92400e;
  --warn-bd:        #fcd34d;
  --warn-tint:      rgba(245, 158, 11, 0.10);

  /* === State: info / running ======================================= */
  --info:           #3b82f6;
  --info-strong:    #1e40af;
  --info-soft-bg:   #dbeafe;
  --info-soft-fg:   #1e40af;
  --info-bd:        #bfdbfe;
  --info-tint:      rgba(59, 130, 246, 0.10);

  /* === Skip / muted state ========================================== */
  --skip-bg:        #fef9c3;
  --skip-fg:        #854d0e;
  --neutral-bg:     #f1f5f9;
  --neutral-fg:     #94a3b8;
  --neutral-fg2:    #64748b;

  /* === Overlay / scrim ============================================= */
  --scrim:          rgba(15, 23, 42, 0.45);
  --scrim-soft:     rgba(15, 23, 42, 0.32);
  --scrim-strong:   rgba(15, 23, 42, 0.55);

  /* === Shadow — light theme baseline; dark overrides at line ~225 == */
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-modal:   0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-pop:     0 18px 50px rgba(15, 23, 42, 0.18);

  /* === Toast — dark pill on light theme; flips to light pill on dark === */
  --toast-bg:       #1e293b;
  --toast-fg:       #ffffff;

  /* === Chat tool/thinking card backgrounds (alternating tints) ==== */
  --tool-bg-a:        #eef7f7;
  --tool-bg-a-light:  #f6fbfb;
  --tool-bg-b:        #f4f9ff;
  --tool-bg-b-light:  #f9fcff;
  --tool-fg:          #1e293b;

  /* Aliases kept for chat.css/chats.css compatibility -------------- */
  --cc-err-bg:      #ffdad6;
  --cc-warn:        var(--warn-strong);
  --cc-warn-hover:  #78350f;                 /* amber-950 (chat danger button hover) */
  --cc-warn-bg:     var(--warn-soft-bg);
  --cc-ok:          var(--ok-soft-fg);
  --cc-ok-bg:       var(--ok-soft-bg);
  --cc-running:     #3730a3;

  --cw-list-bg:     var(--surface-soft);
  --cw-row-active:  rgba(79, 70, 229, 0.10);
  --cw-row-hover:   rgba(15, 23, 42, 0.04);
  --cw-running:     var(--info);
  --cw-error:       var(--err);
  --cw-awaiting:    var(--ok);
  --cw-idle:        transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   Zinc dark theme.
   Strategy:
   - Surfaces use Tailwind's zinc scale — true neutral grey, no blue undertone.
   - Brand stays indigo (lifted to indigo-400 for AA contrast on dark surfaces).
   - State colors use 300/400-tier (lighter) so they're legible on dark tints.
   - Soft state backgrounds become low-opacity color tints, not solid pastels.
   - Shadows are deeper because diffusion on dark needs more contrast.
   ────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  color-scheme: dark;

  /* Surface — Tailwind zinc */
  --bg:             #18181b;   /* zinc-900 */
  --card:           #27272a;   /* zinc-800 */
  --card-elev:      #2e2e33;   /* between zinc-800 and zinc-700 */
  --card-hover:     #2e2e33;
  --surface-soft:   #0f0f10;   /* near zinc-950 */
  --code-bg:        #0f0f10;
  --code-fg:        #e4e4e7;   /* zinc-200 */

  /* Border */
  --border:         #3f3f46;   /* zinc-700 */
  --border-strong:  #52525b;   /* zinc-600 */
  --border-subtle:  rgba(255, 255, 255, 0.06);

  /* Text */
  --txt:            #fafafa;   /* zinc-50 */
  --dim:            #a1a1aa;   /* zinc-400 */
  --txt-muted:      #71717a;   /* zinc-500 */
  --txt-on-pri:     #18181b;

  /* Brand — lifted */
  --pri:            #818cf8;
  --pri-hover:      #a5b4fc;
  --pri-soft-bg:    rgba(129, 140, 248, 0.16);
  --pri-soft-fg:    #c7d2fe;
  --pri-tint:       rgba(129, 140, 248, 0.10);
  --pri-tint-mid:   rgba(129, 140, 248, 0.16);
  --pri-tint-strong:rgba(129, 140, 248, 0.24);
  --pri-ring:       rgba(129, 140, 248, 0.20);
  --pri-shadow:     rgba(129, 140, 248, 0.10);

  /* OK */
  --ok:             #4ade80;
  --ok-strong:      #86efac;
  --ok-soft-bg:     rgba(34, 197, 94, 0.14);
  --ok-soft-fg:     #86efac;
  --ok-bd:          rgba(74, 222, 128, 0.30);
  --ok-tint:        rgba(34, 197, 94, 0.10);
  --ok-tint-bd:     rgba(74, 222, 128, 0.28);

  /* Error */
  --err:            #f87171;
  --err-strong:     #fca5a5;
  --err-soft-bg:    rgba(239, 68, 68, 0.14);
  --err-soft-fg:    #fca5a5;
  --err-bd:         rgba(248, 113, 113, 0.30);
  --err-tint:       rgba(239, 68, 68, 0.10);
  --err-tint-bd:    rgba(248, 113, 113, 0.28);

  /* Warn */
  --warn:           #fbbf24;
  --warn-strong:    #fcd34d;
  --warn-soft-bg:   rgba(245, 158, 11, 0.14);
  --warn-soft-fg:   #fcd34d;
  --warn-bd:        rgba(251, 191, 36, 0.30);
  --warn-tint:      rgba(245, 158, 11, 0.10);

  /* Info / running */
  --info:           #60a5fa;
  --info-strong:    #93c5fd;
  --info-soft-bg:   rgba(59, 130, 246, 0.16);
  --info-soft-fg:   #93c5fd;
  --info-bd:        rgba(96, 165, 250, 0.30);
  --info-tint:      rgba(59, 130, 246, 0.10);

  /* Skip / muted */
  --skip-bg:        rgba(234, 179, 8, 0.14);
  --skip-fg:        #fcd34d;
  --neutral-bg:     rgba(161, 161, 170, 0.12);   /* zinc-400 tint */
  --neutral-fg:     #a1a1aa;                     /* zinc-400 */
  --neutral-fg2:    #d4d4d8;                     /* zinc-300 */

  /* Scrim — darker to compensate for already-dark page */
  --scrim:          rgba(0, 0, 0, 0.55);
  --scrim-soft:     rgba(0, 0, 0, 0.45);
  --scrim-strong:   rgba(0, 0, 0, 0.70);

  /* Shadow — deeper diffusion */
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.55);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.60);
  --shadow-modal:   0 12px 40px rgba(0, 0, 0, 0.65);
  --shadow-pop:     0 18px 50px rgba(0, 0, 0, 0.65);

  /* Toast — light pill on dark theme */
  --toast-bg:       #fafafa;   /* zinc-50 */
  --toast-fg:       #18181b;   /* zinc-900 */

  /* Chat tool tints — neutral on neutral surfaces */
  --tool-bg-a:        rgba(255, 255, 255, 0.04);
  --tool-bg-a-light:  rgba(255, 255, 255, 0.02);
  --tool-bg-b:        rgba(129, 140, 248, 0.05);  /* faint indigo for alternation */
  --tool-bg-b-light:  rgba(129, 140, 248, 0.025);
  --tool-fg:          #fafafa;

  /* Compatibility aliases */
  --cc-err-bg:      rgba(239, 68, 68, 0.18);
  --cc-warn-hover:  #fde68a;                 /* amber-200 (lift on dark) */
  --cc-running:     var(--pri-soft-fg);
  --cw-row-active:  rgba(129, 140, 248, 0.16);
  --cw-row-hover:   rgba(255, 255, 255, 0.04);
}