index.css

@import "tailwindcss";

/* Use .dark class for dark: variants instead of OS media query */
@custom-variant dark (&:where(.dark, .dark *));

/* ================================================================
 * Self-hosted fonts via npm packages (no CDN) so the dashboard's
 * strict CSP stays quiet on first load.
 * ================================================================ */
@import "@fontsource/inter/latin.css";
@import "@fontsource/jetbrains-mono/latin.css";
@import "@fontsource/atkinson-hyperlegible/index.css";

/* OpenDyslexic — dyslexia-friendly reading font (self-hosted via npm) */
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('OpenDyslexic'),
       url('open-dyslexic/woff/OpenDyslexic-Regular.woff') format('woff');
}

@theme {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', "Cascadia Code", "Consolas", monospace;

  /* Command Center — deep-space navy surfaces (DESIGN.md §1) */
  --color-void: #0B1120; /* Page canvas — deep-space navy */
  --color-void-deep: #060912; /* App shell / off-screen depth */
  --color-void-dark: #111827; /* Panels, cards, elevated areas */
  --color-void-light: #1A2535; /* Interactive surface hover */
  --color-void-lighter: #1E3A5F; /* Panel dividers, grid lines */
  --color-surface: #111827; /* alias of --color-void-dark */
  --color-surface-hover: #1A2535; /* alias of --color-void-light */
  --color-surface-active: #1E3A5F; /* Selected / active panel */
  --color-border-subtle: #162035; /* Inner dividers, minor separation */
  
  --color-text-primary: #E8F0FE; /* cool white (DESIGN.md §1) */
  --color-text-muted: #8BA3C7; /* labels, secondary copy */
  --color-placeholder: #4A6080; /* timestamps, metadata, placeholders */
  
  /* Primary Gradients and Accents */
  --color-accent: #FFB800; /* Primary telemetry / brand amber (DESIGN.md §1) */
  --color-accent-dim: #FFB80020; /* amber @ ~12% — dim accent wash */
  --color-accent-cyan: #00D4FF; /* healthy / active / links */
  --color-accent-cyan-rgb: 0, 212, 255;
  --color-accent-cyan-glow: #67e8f9; /* cyan-300 — glow/shadow color */
  --color-accent-purple: var(--color-accent); /* deprecated: use --color-accent */
  --color-accent-purple-rgb: 255, 184, 0; /* deprecated: amber mirror of --color-accent */
  /* Accent tuned for light-mode contrast (blue-600 ≥ 4.5:1 on #f8fafc). */
  --color-accent-on-light: #2563eb;

  /* Brand wordmark color (dark fallback = text-primary, overridden per theme). */
  --color-brand: #f8fafc;

  /* Surfaces (strong = fully-opaque card surface). */
  --color-surface-strong: #111827;
  --color-border-strong: #1E3A5F;

  /* Primary CTA pair — amber bg, navy text (DESIGN.md §1). Light-mode overrides below. */
  --color-cta-bg: var(--color-accent);
  --color-cta-text: var(--color-void);
  --color-cta-bg-hover: #FFC933;

  /* Status colors (DESIGN.md §1 data palette) */
  --color-danger: #FF4757;
  --color-danger-rgb: 255, 71, 87;
  --color-success: #26DE81;
  --color-success-rgb: 38, 222, 129;
  --color-warning: #FF9F43;
  --color-warning-rgb: 255, 159, 67;
  /* Status dots — single source map (DESIGN.md §4) */
  --color-dot-pending: #FF9F43; /* awaiting → warning */
  --color-dot-unknown: #4A6080; /* unknown → muted */
  --color-dot-killed: #FF4757; /* killed → danger */
  --color-dot-completed: #26DE81; /* completed → success */
  --color-dot-crashed: #FF4757; /* crashed → danger */
  --color-dot-orange: #FF9F43; /* degraded → warning */
  --color-dot-red: #FF4757; /* error → danger */
  --color-dot-awaiting-approval: #FF9F43; /* awaiting approval → warning */
  --color-info: #3B82F6;


  /* Syntax Highlighting (CodeBlock) */
  --color-syn-keyword: #ff7b72;
  --color-syn-string: #a5d6ff;
  --color-syn-comment: #8b949e;
  --color-syn-number: #79c0ff;
  /* Chart & Metrics */
  --color-metrics-purple: #8b5cf6;
  --color-success-bg: #064e3b;
  --color-error-bg: #4c1d1f;
  --color-success-glow: #4ade80; /* emerald-400 — text on dark surfaces */
  --color-danger-glow: #fca5a5;  /* red-300 — text on dark surfaces */
  --color-warning-glow: #fcd34d; /* amber-300 — text on dark surfaces */
  --color-info-glow: #93c5fd;    /* blue-300 — text on dark surfaces */
  --color-accent-purple-glow: #c4b5fd; /* purple-300 — text on dark surfaces */

  /* Severity-tier tokens (Path A additions for #4564 audit).
   * --color-warning-strong: more urgent than --color-warning (orange-500 vs amber-500).
   *                    Used for "high" risk level (above medium).
   * --color-neutral:   non-status color (zinc-500). Used for passive/observer roles
   *                    (distinct from active/driver info color). */
  --color-warning-strong: #f97316;        /* orange-500 */
  --color-warning-strong-glow: #fb923c;   /* orange-400 — text on dark surfaces */
  --color-neutral: #71717a;              /* zinc-500 */
  --color-neutral-glow: #a1a1aa;         /* zinc-400 — text on dark surfaces */

  /* Overlay tokens (#4564 audit, Path A follow-up).
   * Translucent surfaces used for hairline borders, subtle backgrounds,
   * and modal scrims. In dark mode they read as white-tinted glass; in
   * light mode they re-tint to dark so dividers stay visible on white.
   * --color-scrim stays dark in every theme — modal backdrops always dim. */
  --color-overlay-border: rgba(255, 255, 255, 0.05);        /* white/5   */
  --color-overlay-border-strong: rgba(255, 255, 255, 0.1);  /* white/10  */
  --color-overlay-bg: rgba(255, 255, 255, 0.05);            /* white/5   */
  --color-overlay-bg-hover: rgba(255, 255, 255, 0.1);       /* white/10  */
  --color-overlay-border-faint: rgba(255, 255, 255, 0.04);  /* white/4   */
  --color-overlay-bg-faint: rgba(255, 255, 255, 0.02);      /* white/2   */
  --color-overlay-bg-faint-hover: rgba(255, 255, 255, 0.04);/* white/4   */
  --color-scrim: rgba(0, 0, 0, 0.6);                         /* black/60  */

  /* ------------------------------------------------------------------ */
  /* Motion tokens (mirror of dashboard/src/design/tokens.ts).          */
  /* Keep in sync with tokens.duration and tokens.easing.               */
  /* ------------------------------------------------------------------ */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-cinematic: 480ms;

  /* Shadow tokens */
  --shadow-card: 0 8px 30px rgb(0, 0, 0, 0.4);
  --shadow-panel: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  --shadow-accent-cyan: 0 0 30px rgba(6, 182, 212, 0.12);
  --shadow-brand-success: 0 0 8px rgba(34, 197, 94, 0.6);
  --shadow-brand-success-lg: 0 0 24px rgba(34, 197, 94, 0.8);

  /* Z-index layers */
  --z-drawer-overlay: 150;
  --z-drawer: 151;
  --z-cmd-overlay: 200;
  --z-cmd: 201;
  --z-tour: 300;
  --z-toast: 400;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis-in: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-emphasis-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ------------------------------------------------------------------ */
  /* Radius tokens (mirror of dashboard/src/design/tokens.ts radius).   */
  /* ------------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------ */
  /* Fluid type scale — clamp() for responsive typography (320-1440px) */
  /* ------------------------------------------------------------------ */
  --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);     /* 12px → 13px */
  --text-sm: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);    /* 13px → 14px */
  --text-base: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);       /* 14px → 16px */
  --text-lg: clamp(1rem, 0.925rem + 0.35vw, 1.125rem);       /* 16px → 18px */
  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);         /* 18px → 20px */
  --text-2xl: clamp(1.25rem, 1.125rem + 0.65vw, 1.5rem);     /* 20px → 24px */
  --text-3xl: clamp(1.5rem, 1.325rem + 0.85vw, 1.875rem);    /* 24px → 30px */

  /* ------------------------------------------------------------------ */
  /* Focus ring tokens — used by :focus-visible rule below.             */
  /* ------------------------------------------------------------------ */
  --focus-ring: 0 0 0 2px var(--color-cta-bg);
  --focus-ring-offset: 0 0 0 4px var(--color-void);

  /* ------------------------------------------------------------------ */
  /* Glamour tokens (#2014) — sidebar glow, palette backdrop, rail.     */
  /* ------------------------------------------------------------------ */
  --sidebar-glow: linear-gradient(180deg, rgba(6,182,212,0.06) 0%, transparent 40%, transparent 60%, rgba(139,92,246,0.04) 100%);
  --palette-backdrop: radial-gradient(ellipse at 50% 30%, rgba(6,182,212,0.08) 0%, transparent 60%);
  --side-rail-width: 280px;
  --gauge-glow-blur: 12px;
}

/* ────────────────────────────────────────────────────────────────────
 * Display-P3 Wide Gamut Enhancement (Issue #009)
 * Adds vibrant P3-space colors for compatible displays while
 * maintaining sRGB fallback for all others.
 * ──────────────────────────────────────────────────────────────────── */
@media (color-gamut: p3) {
  @supports (color: color(display-p3 0 0 0)) {
    :root {
      /* P3-enhanced cyan — more vivid than sRGB #00D4FF */
      --color-accent-cyan: color(display-p3 0.1 0.82 1);
      
      /* P3-enhanced brand amber — wider gamut than sRGB #FFB800 */
      --color-accent: color(display-p3 1 0.72 0);
      
      /* P3-enhanced deep-space navy — richer than sRGB #0B1120 / #111827 */
      --color-void: color(display-p3 0.043 0.067 0.122);
      --color-void-dark: color(display-p3 0.066 0.094 0.15);
    }
  }
}

/* ------------------------------------------------------------------------
 * Light theme — re-spec'd 2026-04-19 for contrast (epic dashboard-perfection
 * issue #002). Contrast targets are documented alongside each value.
 * ---------------------------------------------------------------------- */
[data-theme="light"] {
  /* Backgrounds. */
  --color-void: #f8fafc;          /* slate-50  — app background */
  --color-void-deep: #ffffff;     /* pure white — modal/inset surfaces */
  --color-void-dark: #f1f5f9;     /* slate-100 — subdued band */
  --color-void-light: #e2e8f0;    /* slate-200 — dividers */
  --color-void-lighter: #cbd5e1;  /* slate-300 — prominent dividers/borders */
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-surface-strong: #ffffff;        /* fully-opaque card surface */
  --color-border-strong: #cbd5e1;         /* slate-300 — crisp card border */

  /* Text. */
  --color-text-primary: #020617;  /* slate-950 on #f8fafc ≈ 17.6:1 (AAA) */
  --color-text-muted: #334155;    /* slate-700 on #f8fafc ≈ 10.4:1 (AAA)  */
  --color-placeholder: #94a3b8;    /* placeholder on light bg */

  /* Brand. */
  --color-brand: #0f172a;         /* slate-900 for the Aegis wordmark       */

  /* Accent: cyan-800 keeps action text ≥ 4.5:1 on tinted light surfaces. */
  --color-accent-on-light: #2563eb;
  --color-accent-cyan: #155e75; /* cyan-800 on white ≈ 7.5:1 */
  --color-success: #047857;     /* emerald-700 on white ≈ 6.3:1 */
  --color-warning: #92400e;     /* amber-800 on tinted light surfaces clears AA */
  --color-danger: #dc2626;      /* red-600 on white ≈ 4.8:1 */
  --color-success-glow: #059669; /* emerald-600 on white */
  --color-danger-glow: #b91c1c;  /* red-700 on white */
  --color-warning-glow: #92400e; /* amber-800 on white */
  --color-info-glow: #2563eb;    /* blue-600 on white */
  --color-accent-purple-glow: #7c3aed; /* purple-600 on white */

  /* Primary CTA: emerald-600 on white ≈ 4.6:1 (AA normal). */
  --color-cta-bg: #059669;
  --color-cta-text: #ffffff;
  --color-cta-bg-hover: #047857;  /* emerald-700 on white ≈ 6.3:1 */

  /* Syntax Highlighting — contrast-safe on light backgrounds. */
  --color-syn-keyword: #cf222e;
  --color-syn-string: #0a3069;
  --color-syn-comment: #6e7781;
  --color-syn-number: #0550ae;

  /* Timeline trace line: clearly visible in light mode. */
  --color-trace-line: #94a3b8;

  /* Overlay tokens — dark-tinted glass on white surfaces (#4564 audit). */
  --color-overlay-border: rgba(15, 23, 42, 0.08);        /* slate-900/8  */
  --color-overlay-border-strong: rgba(15, 23, 42, 0.14); /* slate-900/14 */
  --color-overlay-bg: rgba(15, 23, 42, 0.04);            /* slate-900/4  */
  --color-overlay-bg-hover: rgba(15, 23, 42, 0.08);      /* slate-900/8  */
  --color-overlay-border-faint: rgba(15, 23, 42, 0.05);  /* slate-900/5  */
  --color-overlay-bg-faint: rgba(15, 23, 42, 0.02);      /* slate-900/2  */
  --color-overlay-bg-faint-hover: rgba(15, 23, 42, 0.05);/* slate-900/5  */
  --color-scrim: rgba(0, 0, 0, 0.5);                      /* black/50     */
}

/* ------------------------------------------------------------------------
 * Paper (warm sepia) — warm off-white with ink-black text. Intended for
 * long reading sessions; feels like paper under a desk lamp.
 * ---------------------------------------------------------------------- */
[data-theme="light-paper"] {
  --color-void: #fafaf7;          /* warm off-white */
  --color-void-deep: #ffffff;
  --color-void-dark: #f4f3ee;
  --color-void-light: #e8e6dc;
  --color-void-lighter: #d4d0c2;
  --color-surface: #ffffff;
  --color-surface-hover: #f4f3ee;
  --color-surface-strong: #ffffff;
  --color-border-strong: #c8c4b4;

  --color-text-primary: #0a0a0a;  /* near-ink on warm white — ≥ 18:1 */
  --color-text-muted: #404040;    /* ≥ 9.3:1 on #fafaf7 */

  --color-placeholder: #78716c;    /* stone-500 on paper bg */
  --color-brand: #0a0a0a;
  --color-accent-on-light: #1d4ed8; /* blue-700 for saturation shift */
  --color-accent-cyan: #155e75;
  --color-success: #047857;
  --color-warning: #a16207;
  --color-danger: #b91c1c;

  --color-cta-bg: #059669;
  --color-cta-text: #ffffff;
  --color-cta-bg-hover: #047857;

  --color-trace-line: #a1998a;

  --color-syn-keyword: #8b2500;
  --color-syn-string: #1a3a5c;
  --color-syn-comment: #6b6b5e;
  --color-syn-number: #1a4a7a;

  /* Overlay tokens — dark ink tints on warm paper. */
  --color-overlay-border: rgba(10, 10, 10, 0.08);
  --color-overlay-border-strong: rgba(10, 10, 10, 0.16);
  --color-overlay-bg: rgba(10, 10, 10, 0.04);
  --color-overlay-bg-hover: rgba(10, 10, 10, 0.10);
  --color-overlay-border-faint: rgba(10, 10, 10, 0.05);
  --color-overlay-bg-faint: rgba(10, 10, 10, 0.02);
  --color-overlay-bg-faint-hover: rgba(10, 10, 10, 0.05);
  --color-scrim: rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------------
 * AAA — maximum-contrast high-accessibility light theme. Every foreground
 * pair clears 7:1 on its intended background.
 * ---------------------------------------------------------------------- */
[data-theme="light-aaa"] {
  --color-void: #ffffff;
  --color-void-deep: #ffffff;
  --color-void-dark: #f5f5f5;
  --color-void-light: #e4e4e4;
  --color-void-lighter: #767676;  /* slate-ish but ≥ 4.5:1 on #fff for borders */
  --color-surface: #ffffff;
  --color-surface-hover: #f5f5f5;
  --color-surface-strong: #ffffff;
  --color-border-strong: #000000;

  --color-text-primary: #000000;  /* 21:1 on white */
  --color-text-muted: #1a1a1a;    /* 18.88:1 — still reads as muted weight */

  --color-placeholder: #a3a3a3;    /* neutral-400 on high-contrast bg */
  --color-brand: #000000;
  --color-accent-on-light: #1d4ed8; /* blue-700 on white ≈ 7.9:1 (AAA) */
  --color-accent-cyan: #155e75;
  --color-success: #065f46;
  --color-warning: #854d0e;
  --color-danger: #991b1b;

  --color-cta-bg: #047857;         /* emerald-700 on white ≈ 6.3:1 */
  --color-cta-text: #ffffff;
  --color-cta-bg-hover: #065f46;   /* emerald-800 on white ≈ 8.4:1 (AAA) */

  --color-trace-line: #525252;

  --color-syn-keyword: #8b0000;
  --color-syn-string: #00008b;
  --color-syn-comment: #696969;
  --color-syn-number: #00008b;

  /* Overlay tokens — pure-black tints on white. */
  --color-overlay-border: rgba(0, 0, 0, 0.1);
  --color-overlay-border-strong: rgba(0, 0, 0, 0.2);
  --color-overlay-bg: rgba(0, 0, 0, 0.05);
  --color-overlay-bg-hover: rgba(0, 0, 0, 0.12);
  --color-overlay-border-faint: rgba(0, 0, 0, 0.05);
  --color-overlay-bg-faint: rgba(0, 0, 0, 0.02);
  --color-overlay-bg-faint-hover: rgba(0, 0, 0, 0.05);
  --color-scrim: rgba(0, 0, 0, 0.7);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-void);
  /* Cyber-Noir deep immersive glow */
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.08), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.05), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.03), transparent 60%);
  background-attachment: fixed;
  color: var(--color-text-primary);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
  /* OpenType features: Inter stylistic sets (DESIGN.md §2) + alternates/ligatures */
  font-feature-settings: 'cv01' 1, 'ss03' 1, 'cv11' 1, 'calt' 1, 'liga' 1;
}

/* ================================================================
 * OpenType Features
 * ================================================================ */

/* Tabular numbers for all numeric displays */
[data-numeric],
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Monospace: disable contextual alternates for code clarity */
code,
pre,
.font-mono,
.font-code {
  font-feature-settings: 'calt' 0;
}

/* ================================================================
 * Reading Font Overrides (set via localStorage → class on <html>)
 * ================================================================ */

/* Hyperlegible reading font */
html.reading-font-hyperlegible,
html.reading-font-hyperlegible * {
  font-family: 'Atkinson Hyperlegible', var(--font-sans) !important;
}

/* Dyslexia-friendly reading font */
html.reading-font-dyslexia,
html.reading-font-dyslexia * {
  font-family: 'OpenDyslexic', var(--font-sans) !important;
}

/* Preserve monospace for code in reading font modes */
html.reading-font-hyperlegible code,
html.reading-font-hyperlegible pre,
html.reading-font-hyperlegible .font-mono,
html.reading-font-hyperlegible .font-code,
html.reading-font-dyslexia code,
html.reading-font-dyslexia pre,
html.reading-font-dyslexia .font-mono,
html.reading-font-dyslexia .font-code {
  font-family: var(--font-mono) !important;
}

/* ================================================================
 * Brand shimmer animation for loading skeletons
 * ================================================================ */
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Subtle CSS noise overlay for premium texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

[data-theme="light"] body {
  background-image:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.04), transparent 50%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.04), transparent 50%);
}
/* Paper: warm, low-sat wash — avoids the cool blue glows used by the
 * default light theme and reinforces the sepia feel. */
[data-theme="light-paper"] body {
  background-image:
    radial-gradient(circle at top left, rgba(217, 182, 112, 0.08), transparent 50%),
    radial-gradient(circle at bottom right, rgba(168, 136, 90, 0.06), transparent 50%);
}
/* AAA: no background wash — pure white to preserve the 21:1 text ratio. */
[data-theme="light-aaa"] body {
  background-image: none;
}
/* Paper + AAA inherit the light-mode chrome (no noise overlay). */
[data-theme="light-paper"] body::before,
[data-theme="light-aaa"] body::before {
  display: none;
}

/* Base resets & utilities */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-void-lighter) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-void-lighter);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* --- Cyber-Noir Glassmorphism 2.0 Elements --- */
.card-glass {
  background: var(--color-surface-strong);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 40px -15px rgba(0, 0, 0, 0.7),
    0 4px 24px -2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.02);
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* Hover state for interactive bento cards */
.card-glass-interactive:hover {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 30px 60px -15px rgba(0, 0, 0, 0.9),
    0 12px 40px -4px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(6, 182, 212, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-4px) scale(1.01);
  cursor: pointer;
}

/* Light mode: crisp enterprise shadows instead of glow */
[data-theme="light"] .card-glass {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e2e8f0;
  border-top: 1px solid #f1f5f9;
  /* Multi-layer crisp shadow — creates depth without glow */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    0 20px 40px -10px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light"] .card-glass-interactive:hover {
  border-color: #cbd5e1;
  /* Stronger but still crisp — no glow */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.1),
    0 30px 60px -15px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,1);
  transform: translateY(-2px) scale(1.005);
}
/* Paper + AAA share the crisp-shadow card but with their own borders. */
[data-theme="light-paper"] .card-glass {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e8e6dc;
  border-top: 1px solid #f4f3ee;
  box-shadow:
    0 1px 2px rgba(71,52,0,0.04),
    0 4px 12px rgba(71,52,0,0.06),
    0 20px 40px -10px rgba(71,52,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light-aaa"] .card-glass {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid #000000;
  border-top: 2px solid #000000;
  box-shadow: none;
}
/* Disable noise overlay in light mode (it washes out text) */
[data-theme="light"] body::before {
  display: none;
}

/* ── MetricCard Progressive Disclosure (Issue #2034) ──────────── */

/* Sparkline hidden in summary, revealed on hover or expanded state */
.metric-card__hover-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: opacity 0.25s ease-out, max-height 0.25s ease-out, margin-top 0.25s ease-out;
}

.metric-card:hover .metric-card__hover-content,
.metric-card--expanded .metric-card__hover-content {
  opacity: 1;
  max-height: 40px;
  margin-top: 0.5rem;
}

/* Expanded detail panel: hidden by default, slides open on click */
.metric-card__expanded-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.metric-card--expanded .metric-card__expanded-content {
  max-height: 120px;
  opacity: 1;
}

/* ------------------------------------------------------------------
 * Dark-mode readability shim for legacy utility classes.
 * Several dashboard surfaces use tokenized dark backgrounds without the
 * `.dark` class active, so plain gray/slate utilities need dark-safe ink.
 * ------------------------------------------------------------------ */
.text-gray-400,
.text-slate-400,
.text-zinc-400,
.text-gray-500,
.text-slate-500,
.text-zinc-500,
.text-gray-600,
.text-slate-600,
.text-zinc-600 {
  color: var(--color-text-muted) !important;
}
.text-gray-300,
.text-slate-300,
.text-zinc-300,
.text-gray-200,
.text-slate-200,
.text-zinc-200,
.text-gray-100,
.text-slate-100,
.text-zinc-100 {
  color: var(--color-text-primary) !important;
}

/* ------------------------------------------------------------------
 * Light-mode readability shim for issue #002.
 *
 * A large number of components use Tailwind's default `text-gray-400`,
 * `text-slate-400`, and `text-zinc-400` utilities for secondary copy.
 * These classes compile to ≈ #9ca3af / #94a3b8 / #a1a1aa — each under
 * 3:1 on our light surfaces. Until every call-site migrates to the
 * design tokens (issue #016), rebind these utilities inside the light
 * themes to the appropriate muted-text token so body copy clears 4.5:1.
 *
 * This is intentionally a broad rule: components already using the
 * design-token `--color-text-muted` via CSS vars are unaffected.
 * ------------------------------------------------------------------ */
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-zinc-400,
[data-theme="light-paper"] .text-gray-400,
[data-theme="light-paper"] .text-slate-400,
[data-theme="light-paper"] .text-zinc-400,
[data-theme="light-aaa"] .text-gray-400,
[data-theme="light-aaa"] .text-slate-400,
[data-theme="light-aaa"] .text-zinc-400 {
  color: var(--color-text-muted) !important;
}
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-slate-500,
[data-theme="light"] .text-zinc-500,
[data-theme="light-paper"] .text-gray-500,
[data-theme="light-paper"] .text-slate-500,
[data-theme="light-paper"] .text-zinc-500,
[data-theme="light-aaa"] .text-gray-500,
[data-theme="light-aaa"] .text-slate-500,
[data-theme="light-aaa"] .text-zinc-500,
[data-theme="light"] .text-gray-600,
[data-theme="light"] .text-slate-600,
[data-theme="light"] .text-zinc-600,
[data-theme="light-paper"] .text-gray-600,
[data-theme="light-paper"] .text-slate-600,
[data-theme="light-paper"] .text-zinc-600,
[data-theme="light-aaa"] .text-gray-600,
[data-theme="light-aaa"] .text-slate-600,
[data-theme="light-aaa"] .text-zinc-600 {
  color: var(--color-text-muted) !important;
}
[data-theme="light"] .text-cyan,
[data-theme="light"] .text-cyan-300,
[data-theme="light"] .text-cyan-400,
[data-theme="light-paper"] .text-cyan,
[data-theme="light-paper"] .text-cyan-300,
[data-theme="light-paper"] .text-cyan-400,
[data-theme="light-aaa"] .text-cyan,
[data-theme="light-aaa"] .text-cyan-300,
[data-theme="light-aaa"] .text-cyan-400 {
  color: var(--color-accent-cyan) !important;
}
[data-theme="light"] .text-[var(--color-success-glow)],
[data-theme="light"] .text-[var(--color-success-glow)],
[data-theme="light"] .text-green-400,
[data-theme="light-paper"] .text-[var(--color-success-glow)],
[data-theme="light-paper"] .text-[var(--color-success-glow)],
[data-theme="light-paper"] .text-green-400,
[data-theme="light-aaa"] .text-[var(--color-success-glow)],
[data-theme="light-aaa"] .text-[var(--color-success-glow)],
[data-theme="light-aaa"] .text-green-400 {
  color: var(--color-success) !important;
}
[data-theme="light"] .text-[var(--color-warning-glow)],
[data-theme="light"] .text-[var(--color-warning-glow)],
[data-theme="light-paper"] .text-[var(--color-warning-glow)],
[data-theme="light-paper"] .text-[var(--color-warning-glow)],
[data-theme="light-aaa"] .text-[var(--color-warning-glow)],
[data-theme="light-aaa"] .text-[var(--color-warning-glow)] {
  color: var(--color-warning) !important;
}
/* ------------------------------------------------------------------
 * Light-mode overrides for amber-200 (warning text) and white/opacity
 * utilities used as backgrounds and borders in dark mode.
 * amber-200 (#fde68a) has ~1.4:1 contrast on white — fails WCAG AA.
 * bg-white/5 and border-white/5 are invisible on light backgrounds.
 * ------------------------------------------------------------------ */
[data-theme="light"] .text-[var(--color-warning-glow)],
[data-theme="light-paper"] .text-[var(--color-warning-glow)],
[data-theme="light-aaa"] .text-[var(--color-warning-glow)] {
  color: var(--color-warning) !important;
}
[data-theme="light"] .text-[var(--color-warning-glow)]\/80,
[data-theme="light-paper"] .text-[var(--color-warning-glow)]\/80,
[data-theme="light-aaa"] .text-[var(--color-warning-glow)]\/80 {
  color: var(--color-warning) !important;
}
[data-theme="light"] .border-amber-500\/20,
[data-theme="light"] .border-amber-500\/30,
[data-theme="light-paper"] .border-amber-500\/20,
[data-theme="light-paper"] .border-amber-500\/30,
[data-theme="light-aaa"] .border-amber-500\/20,
[data-theme="light-aaa"] .border-amber-500\/30 {
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent) !important;
}
[data-theme="light"] .bg-amber-500\/5,
[data-theme="light"] .bg-amber-500\/10,
[data-theme="light-paper"] .bg-amber-500\/5,
[data-theme="light-paper"] .bg-amber-500\/10,
[data-theme="light-aaa"] .bg-amber-500\/5,
[data-theme="light-aaa"] .bg-amber-500\/10 {
  background-color: color-mix(in srgb, var(--color-warning) 8%, transparent) !important;
}
[data-theme="light"] .bg-white\/5,
[data-theme="light-paper"] .bg-white\/5,
[data-theme="light-aaa"] .bg-white\/5 {
  background-color: var(--color-void-light) !important;
}
[data-theme="light"] .bg-white\/10,
[data-theme="light-paper"] .bg-white\/10,
[data-theme="light-aaa"] .bg-white\/10 {
  background-color: var(--color-void-lighter) !important;
}
[data-theme="light"] .border-white\/5,
[data-theme="light-paper"] .border-white\/5,
[data-theme="light-aaa"] .border-white\/5 {
  border-color: var(--color-void-lighter) !important;
}
[data-theme="light"] .border-white\/10,
[data-theme="light-paper"] .border-white\/10,
[data-theme="light-aaa"] .border-white\/10 {
  border-color: var(--color-void-lighter) !important;
}
/* ------------------------------------------------------------------
 * Light-mode overrides for slate bg/hover/border utilities.
 * Used in Layout, CommandPalette, SessionTable, LiveAuditStream,
 * ActivityStream, MetricCards, HomeStatusPanel with dark: variants.
 * ------------------------------------------------------------------ */
[data-theme="light"] .bg-slate-100,
[data-theme="light-paper"] .bg-slate-100,
[data-theme="light-aaa"] .bg-slate-100 {
  background-color: var(--color-void-light) !important;
}
[data-theme="light"] .hover\:bg-slate-100:hover,
[data-theme="light-paper"] .hover\:bg-slate-100:hover,
[data-theme="light-aaa"] .hover\:bg-slate-100:hover {
  background-color: var(--color-void-light) !important;
}
[data-theme="light"] .bg-slate-50,
[data-theme="light-paper"] .bg-slate-50,
[data-theme="light-aaa"] .bg-slate-50 {
  background-color: var(--color-void-dark) !important;
}
[data-theme="light"] .hover\:bg-slate-50:hover,
[data-theme="light-paper"] .hover\:bg-slate-50:hover,
[data-theme="light-aaa"] .hover\:bg-slate-50:hover {
  background-color: var(--color-void-dark) !important;
}
[data-theme="light"] .text-slate-700,
[data-theme="light-paper"] .text-slate-700,
[data-theme="light-aaa"] .text-slate-700 {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .text-slate-900,
[data-theme="light-paper"] .text-slate-900,
[data-theme="light-aaa"] .text-slate-900,
[data-theme="light"] .text-gray-900,
[data-theme="light-paper"] .text-gray-900,
[data-theme="light-aaa"] .text-gray-900 {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .hover\:text-slate-900:hover,
[data-theme="light-paper"] .hover\:text-slate-900:hover,
[data-theme="light-aaa"] .hover\:text-slate-900:hover,
[data-theme="light"] .hover\:text-slate-700:hover,
[data-theme="light-paper"] .hover\:text-slate-700:hover,
[data-theme="light-aaa"] .hover\:text-slate-700:hover {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .text-slate-300,
[data-theme="light-paper"] .text-slate-300,
[data-theme="light-aaa"] .text-slate-300 {
  color: var(--color-text-muted) !important;
}
[data-theme="light"] .hover\:text-slate-300:hover,
[data-theme="light-paper"] .hover\:text-slate-300:hover,
[data-theme="light-aaa"] .hover\:text-slate-300:hover {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .text-slate-200,
[data-theme="light-paper"] .text-slate-200,
[data-theme="light-aaa"] .text-slate-200 {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .hover\:text-slate-200:hover,
[data-theme="light-paper"] .hover\:text-slate-200:hover,
[data-theme="light-aaa"] .hover\:text-slate-200:hover {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .text-slate-950,
[data-theme="light-paper"] .text-slate-950,
[data-theme="light-aaa"] .text-slate-950 {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .border-slate-200,
[data-theme="light-paper"] .border-slate-200,
[data-theme="light-aaa"] .border-slate-200 {
  border-color: var(--color-void-lighter) !important;
}
[data-theme="light"] .border-slate-300,
[data-theme="light-paper"] .border-slate-300,
[data-theme="light-aaa"] .border-slate-300 {
  border-color: var(--color-void-lighter) !important;
}
[data-theme="light"] .disabled\:border-slate-300:disabled,
[data-theme="light-paper"] .disabled\:border-slate-300:disabled,
[data-theme="light-aaa"] .disabled\:border-slate-300:disabled {
  border-color: var(--color-void-lighter) !important;
}
[data-theme="light"] .disabled\:bg-slate-50:disabled,
[data-theme="light-paper"] .disabled\:bg-slate-50:disabled,
[data-theme="light-aaa"] .disabled\:bg-slate-50:disabled {
  background-color: var(--color-void-dark) !important;
}
[data-theme="light"] .disabled\:text-slate-700:disabled,
[data-theme="light-paper"] .disabled\:text-slate-700:disabled,
[data-theme="light-aaa"] .disabled\:text-slate-700:disabled {
  color: var(--color-text-muted) !important;
}
[data-theme="light"] .bg-slate-600,
[data-theme="light-paper"] .bg-slate-600,
[data-theme="light-aaa"] .bg-slate-600 {
  background-color: var(--color-void-lighter) !important;
}
[data-theme="light"] .bg-white,
[data-theme="light-paper"] .bg-white,
[data-theme="light-aaa"] .bg-white {
  background-color: var(--color-void-dark) !important;
}

/* ------------------------------------------------------------------
 * Light-mode readability shim for rose/red/sky utility classes (issue #2378).
 * These Tailwind color utilities default to dark-mode-safe shades that
 * fail WCAG contrast on light backgrounds.
 * Placed AFTER body::before closes so rules are top-level.
 * ------------------------------------------------------------------ */
[data-theme="light"] .text-[var(--color-danger-glow)],
[data-theme="light"] .text-[var(--color-danger-glow)],
[data-theme="light-paper"] .text-[var(--color-danger-glow)],
[data-theme="light-paper"] .text-[var(--color-danger-glow)],
[data-theme="light-aaa"] .text-[var(--color-danger-glow)],
[data-theme="light-aaa"] .text-[var(--color-danger-glow)] {
  color: var(--color-danger) !important;
}
[data-theme="light"] .text-[var(--color-danger-glow)],
[data-theme="light"] .text-[var(--color-danger-glow)],
[data-theme="light"] .text-red-500,
[data-theme="light-paper"] .text-[var(--color-danger-glow)],
[data-theme="light-paper"] .text-[var(--color-danger-glow)],
[data-theme="light-paper"] .text-red-500,
[data-theme="light-aaa"] .text-[var(--color-danger-glow)],
[data-theme="light-aaa"] .text-[var(--color-danger-glow)],
[data-theme="light-aaa"] .text-red-500 {
  color: var(--color-danger) !important;
}
[data-theme="light"] .text-sky-300,
[data-theme="light"] .text-sky-400,
[data-theme="light-paper"] .text-sky-300,
[data-theme="light-paper"] .text-sky-400,
[data-theme="light-aaa"] .text-sky-300,
[data-theme="light-aaa"] .text-sky-400 {
  color: var(--color-info) !important;
}

/* Brand-wordmark utility — replaces the dark-only gradient in Layout.tsx
 * with a solid ink color that remains crisp under each sub-theme. */
.brand-wordmark {
  color: var(--color-text-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}
[data-theme="light"] .brand-wordmark,
[data-theme="light-paper"] .brand-wordmark,
[data-theme="light-aaa"] .brand-wordmark {
  color: var(--color-brand);
  background: none;
  -webkit-text-fill-color: var(--color-brand);
}

/* Buttons */

button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}

/* Beautiful Status dots and pulses */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor; /* Smooth bleed */
}
.status-dot--idle { color: var(--color-success); background-color: var(--color-success); }
.status-dot--unknown { color: #475569; background-color: #475569; box-shadow: none; }
/* Live session/agent status dots — including the calm amber "working" pulse
 * (opacity 1→0.4→1, DESIGN §5) — are owned by the canonical StatusDot
 * component (components/overview/StatusDot.tsx). The old `.status-dot--working`
 * / `--permission_prompt` modifiers used a bouncy scale pulse and were unused. */

/* ── Syntax Highlighting Tokens ────────────────────────────── */
.syn-keyword  { color: var(--color-syn-keyword, #ff7b72); }
.syn-string   { color: var(--color-syn-string, #a5d6ff); }
.syn-comment  { color: var(--color-syn-comment, #8b949e); font-style: italic; }
.syn-number   { color: var(--color-syn-number, #79c0ff); }

/* Terminal Area */
.font-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.02em;
}
.terminal-window {
  background: var(--color-void-deep);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: inset 0 2px 15px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}

/* Staggered load animation for Bento grids */
.animate-bento-reveal {
  animation: bento-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-bento-reveal:nth-child(2) { animation-delay: 0.05s; }
.animate-bento-reveal:nth-child(3) { animation-delay: 0.1s; }
.animate-bento-reveal:nth-child(4) { animation-delay: 0.15s; }
.animate-bento-reveal:nth-child(5) { animation-delay: 0.2s; }
.animate-bento-reveal:nth-child(6) { animation-delay: 0.25s; }

@keyframes bento-reveal {
  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

[data-theme="light"] .animate-bento-reveal,
[data-theme="light-paper"] .animate-bento-reveal,
[data-theme="light-aaa"] .animate-bento-reveal {
  animation-name: bento-reveal-light;
}

@keyframes bento-reveal-light {
  0% { opacity: 1; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Seamless nav active indicators */
.nav-link {
  transition: all 0.2s ease;
  position: relative;
}
.nav-link::before {
  content: '';
  position: absolute;
  left: -2px; top: 10%; bottom: 10%; width: 4px;
  background: var(--color-accent);
  border-radius: 0 4px 4px 0;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
.nav-link[data-active="true"] {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.05);
}
.nav-link[data-active="true"]::before {
  transform: scaleY(1);
}
/* Light-mode nav link overrides. Inactive reads at slate-700 (AA), active
 * at slate-900 with a 2px accent rail — spec'd in issue #002. */
[data-theme="light"] .nav-link,
[data-theme="light-paper"] .nav-link,
[data-theme="light-aaa"] .nav-link {
  color: var(--color-text-muted);
}
[data-theme="light"] .nav-link:hover,
[data-theme="light-paper"] .nav-link:hover,
[data-theme="light-aaa"] .nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-void-dark);
}
[data-theme="light"] .nav-link[data-active="true"],
[data-theme="light-paper"] .nav-link[data-active="true"],
[data-theme="light-aaa"] .nav-link[data-active="true"] {
  background: var(--color-void-dark);
  color: var(--color-text-primary);
  box-shadow: none;
}
[data-theme="light"] .nav-link[data-active="true"]::before,
[data-theme="light-paper"] .nav-link[data-active="true"]::before,
[data-theme="light-aaa"] .nav-link[data-active="true"]::before {
  background: var(--color-accent-on-light);
}

/* ── Focus ring — keyboard/programmatic only (resolves #3687) ─── */
/* Amber focus ring (DESIGN.md §1) — overridden per-component / forced-colors where set. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Remove default browser outline for mouse focus; keep for older browsers */
:focus:not(:focus-visible) {
  outline: none;
}

/* ────────────────────────────────────────────────────────────────────
 * Motion system — Animated theme swap, ambient drift, state transitions
 * Issue #017
 * ──────────────────────────────────────────────────────────────────── */

/* Theme swap: all color tokens cross-fade smoothly */
@media (prefers-reduced-motion: no-preference) {
  :root {
    transition: 
      background-color var(--duration-slow) var(--ease-standard),
      color var(--duration-slow) var(--ease-standard),
      border-color var(--duration-slow) var(--ease-standard);
  }
}

/* Ambient background drift: subtle hue rotation on gradients */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ambient-drift {
    0%, 100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(4deg); /* ≤2% hue drift constraint met (4° ≈ 1.1%) */
    }
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: inherit;
    animation: ambient-drift 60s ease-in-out infinite;
    will-change: filter; /* GPU-accelerated filter animation */
  }
}

/* State transition animations for SessionStateBadge */
@media (prefers-reduced-motion: no-preference) {
  /* Idle → Working: hue through accent (blue → amber) */
  @keyframes state-idle-to-working {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(30deg);
    }
  }

  /* Working → Error: hue through danger (amber → red) */
  @keyframes state-working-to-error {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(-15deg);
    }
  }

  /* Error pulse: single pulse on error state */
  @keyframes state-error-pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.15);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  [data-state-transition="idle-to-working"] {
    animation: state-idle-to-working var(--duration-slow) var(--ease-standard) forwards;
  }

  [data-state-transition="working-to-error"] {
    animation: state-working-to-error var(--duration-slow) var(--ease-standard) forwards;
  }

  [data-state="error"] {
    animation: state-error-pulse var(--duration-cinematic) var(--ease-emphasis-out);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
 * View Transitions API (Issue #009)
 * Smooth route transitions using native browser capability.
 * ──────────────────────────────────────────────────────────────────── */

/* Main content container gets transition name */
main[id="main-content"] {
  view-transition-name: main-content;
}

/* Transition animation for route changes */
::view-transition-old(main-content),
::view-transition-new(main-content) {
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease-standard);
}

/* Crossfade transition */
::view-transition-old(main-content) {
  animation-name: fade-out;
}

::view-transition-new(main-content) {
  animation-name: fade-in;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────────────────
 * CTA Sheen & Audit Row Shimmer (Issue #009)
 * Premium polish: moving gradient sheen on primary CTAs and incoming
 * audit rows. GPU-accelerated, paused under reduced-motion.
 * ──────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* CTA gradient sheen — sweeps left-to-right on primary buttons */
  @keyframes cta-sheen {
    0% {
      background-position: -200% center;
    }
    100% {
      background-position: 200% center;
    }
  }

  /* Audit row shimmer — subtle accent sweep on new entries */
  @keyframes audit-shimmer {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      opacity: 0.6;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  /* Primary CTA sheen effect */
  [data-cta],
  button[class*="bg-[var(--color-cta-bg)]"],
  button[class*="bg-cyan-"],
  .btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  [data-cta]::before,
  button[class*="bg-[var(--color-cta-bg)]"]::before,
  button[class*="bg-cyan-"]::before,
  .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      120deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 60%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: cta-sheen 3s ease-in-out infinite;
    will-change: background-position;
    pointer-events: none;
    z-index: 1;
  }

  /* Pause sheen on hover (user is reading/deciding) */
  [data-cta]:hover::before,
  button[class*="bg-[var(--color-cta-bg)]"]:hover::before,
  button[class*="bg-cyan-"]:hover::before,
  .btn-primary:hover::before {
    animation-play-state: paused;
  }

  /* Audit row shimmer on new entries */
  .audit-row-new {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .audit-row-new::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--color-accent-cyan) 50%,
      transparent 100%
    );
    opacity: 0;
    animation: audit-shimmer 320ms var(--ease-emphasis-out) 1;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
  }
}

/* ── Reduced transparency ────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .bg-white\/80, .bg-void\/80, [class*="\/80"], [class*="\/90"] {
    --tw-bg-opacity: 1 !important;
  }
}

/* ── Forced colors (Windows High Contrast Mode) ──────────────────── */
@media (forced-colors: active) {
  :root {
    --color-cta-bg: ButtonText;
    --color-cta-text: ButtonFace;
    --color-text-primary: CanvasText;
    --color-void: Canvas;
    --color-border: ButtonBorder;
  }

  :focus-visible {
    outline: 2px solid ButtonText;
    box-shadow: none;
  }
}

/* ── Prefers contrast: more ──────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--color-text-secondary, var(--color-text-primary));
    --color-border: var(--color-text-muted);
  }
}

/* ────────────────────────────────────────────────────────────────────
 * Glamour utility classes (#2014)
 * Token-gate-safe shadow utilities for glow effects.
 * ──────────────────────────────────────────────────────────────────── */

.glow-ring-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-cyan) 15%, transparent);
}

.glow-icon-active {
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-cyan) 15%, transparent);
}

.glow-nav-active {
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-cyan) 8%, transparent);
}

[data-theme="light"] .glow-ring-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-on-light) 20%, transparent);
}

[data-theme="light"] .glow-icon-active {
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-on-light) 12%, transparent);
}

[data-theme="light"] .glow-nav-active {
  box-shadow: none;
}

/* Command palette depth shadow — token-gate-safe */
.shadow-palette {
  box-shadow:
    0 40px 80px -15px rgba(0, 0, 0, 0.9);
}


/* Hide scrollbar but keep scroll functionality — for mobile tab bars */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
/* ── Approval-pending row pulse ────────────────────────────── */
@keyframes approval-row-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.4), 0 0 12px rgba(245, 158, 11, 0.08); }
}

.approval-pending-row {
  animation: approval-row-pulse 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .approval-pending-row {
    animation: none;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
  }
}