/* ZapAGI design tokens — the single source for every surface:
   zapagi.ai and zapagi.com (copies in web/<site>/css/tokens.css, kept
   identical by a test), the customer dashboard, the login pages and the
   admin console. Components never use raw colours; they use the
   semantic roles in layer 2.

   Layer 1  primitives: the raw palette, named once.
   Layer 2  semantic roles: what a colour is for. Dark is the default;
            [data-theme="light"] (set by theme-init.js from the saved
            choice or the system preference) swaps the roles, never the
            components.

   Brand: signal cyan on deep navy; Space Grotesk + IBM Plex Mono (each
   surface ships the font files: @font-face lives with its stylesheet).
   Design notes: docs/ui-ux-research/006/THEME_SYSTEM.md */

/* ── Layer 1: primitives ───────────────────────────────────────────── */
:root {
  /* Navy (dark surfaces) */
  --navy-950: #0A0E1A;
  --navy-900: #0D1424;
  --navy-850: #111A2E;
  --navy-800: #1B2740;
  --navy-700: #2A3B5C;
  /* Slate (light surfaces and text) */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-550: #5F6B7D;
  --slate-600: #475569;
  --slate-800: #1E293B;
  --white: #FFFFFF;
  /* Ink (text on dark) */
  --ink-100: #E6EDF7;
  --ink-300: #8CA0B8;
  --ink-500: #7E8FA7;  /* 5.2:1 on every dark surface (was #6B7C93, 3.99:1) */
  --ink-950: #04121A;
  /* Signal cyan (brand) */
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  /* Status */
  --red-400: #F87171;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --green-400: #34D399;
  --green-600: #059669;
  --green-700: #047857;
  --amber-400: #FBBF24;
  --amber-600: #D97706;
  --amber-800: #92400E;
  --blue-400: #60A5FA;
  --blue-600: #2563EB;
  /* Violet (AGI tier, delegation) */
  --violet-400: #C084FC;
  --violet-700: #7E22CE;

  /* Scale (theme-independent) */
  /* Type scale. The app root is 87.5% (14 px at the browser default, and
     it follows a larger default font chosen by the user), so these rems
     are fractions of 14 px. 12 px is the smallest UI text (UI/UX audit
     007, D1); 11 px only for uppercase, letter-spaced labels. */
  --text-label: .7857rem; /* 11 px */
  --text-xs: .8571rem;    /* 12 px */
  --text-sm: .9286rem;    /* 13 px */
  --text-base: 1rem;      /* 14 px */
  --text-md: 1.1429rem;   /* 16 px */
  --text-lg: 1.2857rem;   /* 18 px */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --transition: 150ms ease;
  /* App layout */
  --page-gutter: 1.25rem;
  --page-gap: .875rem;
  --sidebar-w: 220px;
  --topbar-h: 52px;
}
/* Tighter page spacing at phone widths (same breakpoint as the shell). */
@media (max-width: 768px) {
  :root { --page-gutter: .75rem; --page-gap: .625rem; }
}

/* ── Layer 2: semantic roles — dark (default) ──────────────────────── */
:root {
  color-scheme: dark;
  /* Surfaces */
  --bg: var(--navy-950);
  --bg-elevated: var(--navy-900);
  --bg-hover: var(--navy-850);
  --bg-input: var(--navy-900);
  --border: var(--navy-800);
  --border-strong: var(--navy-700);
  /* Text */
  --text: var(--ink-100);
  --text-muted: var(--ink-300);
  --text-dim: var(--ink-500);
  /* Brand */
  --primary: var(--cyan-400);
  --primary-hover: var(--cyan-300);
  --primary-deep: var(--cyan-600);
  --primary-faint: rgba(34, 211, 238, 0.08);
  --primary-glow: rgba(34, 211, 238, 0.25);
  --accent: var(--cyan-400);
  /* Text on a filled brand or status background */
  --on-primary: var(--ink-950);
  --on-danger: var(--white);
  /* Status */
  --danger: var(--red-400);
  --danger-faint: rgba(248, 113, 113, 0.08);
  --success: var(--green-400);
  --success-faint: rgba(52, 211, 153, 0.08);
  --warning: var(--amber-400);
  --warning-faint: rgba(251, 191, 36, 0.08);
  --info: var(--blue-400);
  --info-faint: rgba(96, 165, 250, 0.10);
  --violet: var(--violet-400);
  --violet-faint: rgba(192, 132, 252, 0.12);
  --neutral-faint: rgba(140, 160, 184, 0.10);
  --scrim: rgba(0, 0, 0, .55);
  --qr-surface: var(--white);
  /* Focus */
  --ring: var(--primary);
  /* Effects */
  --gradient-primary: linear-gradient(135deg, var(--cyan-400) 0%, var(--cyan-300) 40%, var(--cyan-600) 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, 0.06), transparent 60%);
  --shadow: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .25);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .4);
  --shadow-glow: 0 0 20px var(--primary-glow);
  /* Aliases kept for existing components and the public sites */
  --surface: var(--bg-elevated);
  --surface-2: var(--bg);
  --surface-hover: var(--bg-hover);
  --bg-card: var(--bg-elevated);
  --bg-muted: var(--bg);
  --text-bright: var(--text);
  --muted: var(--text-muted);
  --mono-font: var(--font-mono);
}

/* ── Layer 2: semantic roles — light ───────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--slate-50);
  --bg-elevated: var(--white);
  --bg-hover: var(--slate-100);
  --bg-input: var(--white);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-800);
  --text-muted: var(--slate-600);  /* >= 7:1 on light surfaces */
  --text-dim: var(--slate-550);    /* >= 4.8:1 (was slate-400, 2.3:1) */
  /* cyan-700: white on it 5.4:1, as text 4.8:1 (cyan-600 was 3.7:1) */
  --primary: var(--cyan-700);
  --primary-hover: var(--cyan-800);
  --primary-deep: var(--cyan-800);
  --primary-faint: rgba(14, 116, 144, 0.06);
  --primary-glow: rgba(14, 116, 144, 0.15);
  --accent: var(--cyan-700);
  --ring: var(--primary);
  --on-primary: var(--white);
  --on-danger: var(--white);
  /* 700/800 shades: >= 4.6:1 as text on their own faint tint */
  --danger: var(--red-700);
  --danger-faint: rgba(185, 28, 28, 0.06);
  --success: var(--green-700);
  --success-faint: rgba(4, 120, 87, 0.07);
  --warning: var(--amber-800);
  --warning-faint: rgba(146, 64, 14, 0.07);
  --info: var(--blue-600);
  --info-faint: rgba(37, 99, 235, 0.06);
  --violet: var(--violet-700);
  --violet-faint: rgba(126, 34, 206, 0.07);
  --neutral-faint: rgba(71, 85, 105, 0.08);
  --scrim: rgba(15, 23, 42, .4);
  --qr-surface: var(--white);
  --gradient-primary: linear-gradient(135deg, var(--cyan-600) 0%, var(--cyan-400) 40%, var(--cyan-700) 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(14, 116, 144, 0.04), transparent 60%);
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);
  --shadow-glow: 0 0 20px var(--primary-glow);
  --surface: var(--bg-elevated);
  --surface-2: var(--bg);
  --surface-hover: var(--bg-hover);
  --bg-card: var(--bg-elevated);
  --bg-muted: var(--bg);
  --text-bright: var(--text);
  --muted: var(--text-muted);
  --mono-font: var(--font-mono);
}