/* ============================================================
   tokens.css — Premium AI Intelligence Platform Design System
   Obsidian Black · Royal Gold · Emerald · Electric Blue
   ============================================================ */

:root {
  /* ────────── TYPOGRAPHY ────────── */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, "Courier New", monospace;
  --font-serif: "SF Pro Display", Georgia, serif;

  /* Font Sizes - Premium Scale.
     Each is multiplied by --zoom-k (the in-app Zoom slider, default 1),
     so the slider scales all text with zero effect on scrolling. */
  --zoom-k: 1;
  --fs-micro: calc(10px * var(--zoom-k));
  --fs-tiny: calc(11px * var(--zoom-k));
  --fs-caption: calc(12px * var(--zoom-k));
  --fs-small: calc(13px * var(--zoom-k));
  --fs-body: calc(15px * var(--zoom-k));
  --fs-lead: calc(17px * var(--zoom-k));
  --fs-large: calc(19px * var(--zoom-k));
  --fs-title: calc(24px * var(--zoom-k));
  --fs-hero: calc(32px * var(--zoom-k));
  --fs-display: calc(48px * var(--zoom-k));
  --fs-mega: calc(64px * var(--zoom-k));

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ────────── SPACING (4px base) ────────── */
  --s0: 0;
  --s1: max(3px, calc(4px * var(--zoom-k)));
  --s2: max(5px, calc(8px * var(--zoom-k)));
  --s3: max(8px, calc(12px * var(--zoom-k)));
  --s4: calc(16px * var(--zoom-k));
  --s5: calc(20px * var(--zoom-k));
  --s6: calc(24px * var(--zoom-k));
  --s7: calc(32px * var(--zoom-k));
  --s8: calc(40px * var(--zoom-k));
  --s9: calc(48px * var(--zoom-k));
  --s10: calc(64px * var(--zoom-k));
  --s11: calc(80px * var(--zoom-k));
  --s12: calc(96px * var(--zoom-k));

  /* ────────── RADIUS ────────── */
  --r-xs: calc(6px * var(--zoom-k));
  --r-sm: calc(10px * var(--zoom-k));
  --r-md: calc(14px * var(--zoom-k));
  --r-lg: calc(20px * var(--zoom-k));
  --r-xl: calc(28px * var(--zoom-k));
  --r-2xl: 36px;
  --r-full: 9999px;

  /* ────────── MOTION (Premium Easing) ────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --t-instant: 100ms;
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 400ms;
  --t-slower: 600ms;
  --t-glacial: 1000ms;

  /* ────────── LAYOUT ────────── */
  --header-h: calc(64px * var(--zoom-k));
  --nav-h: calc(72px * var(--zoom-k));
  --sidebar-w: 280px;
  --content-max: 1400px;
  --content-narrow: 800px;

  /* ────────── Z-INDEX SYSTEM ────────── */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;
}

/* ============================================================
   DARK THEME (Default) — Premium AI Intelligence Platform
   ============================================================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Base Layers ── */
  --bg-base: #0A0A0B;              /* Obsidian Black */
  --bg-elevated: #111113;          /* Slightly elevated */
  --bg-surface: #18181B;           /* Card surfaces */
  --bg-overlay: #1F1F23;           /* Overlays, modals */
  
  /* ── Glass Surfaces ──
     Pulled close to --bg-base on purpose. They used to sit at #18181C
     against a #0A0A0B page, which drew a visible rectangle around every
     card and made the screen look like a patchwork of boxes. Definition
     now comes from the hairline border, not from a lighter fill. */
  --glass-strong: rgba(14,14,17,0.98);
  --glass-medium: rgba(13,13,16,0.94);
  --glass-subtle: rgba(16, 16, 20, 0.50);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  
  /* ── Text Hierarchy ── */
  --text-primary: #FAFAFA;         /* Pure white text */
  --text-secondary: #B8B8C2;       /* Medium gray */
  --text-tertiary: #8E8E99;        /* Subtle gray */
  --text-disabled: #6A6A74;        /* Disabled state */
  
  /* ── Royal Gold Accent ── */
  --gold: #F59E0B;                 /* Royal Gold */
  --gold-light: #FCD34D;           /* Lighter gold */
  --gold-dark: #D97706;            /* Deeper gold */
  --gold-glow: rgba(245, 158, 11, 0.34);
  --gold-wash: rgba(245, 158, 11, 0.14);
  
  /* ── "Emerald" Accent — now GOLD ──
     The green was the single off-theme colour in the app: it lit the
     Fairness Lab and Number Dossier verdicts, the referral card, the
     guide callouts and one corner of the background bloom. The names are
     kept so every existing rule keeps working; only the values changed.
     Good news now reads gold, which is the brand colour and, in a
     lottery app, the right colour for a positive result. */
  --emerald: #F59E0B;
  --emerald-light: #FCD34D;
  --emerald-dark: #D97706;
  --emerald-glow: rgba(245, 158, 11, 0.28);
  --emerald-wash: rgba(245, 158, 11, 0.12);
  
  /* ── Electric Blue ── */
  --blue: #3B82F6;                 /* Data highlight */
  --blue-light: #60A5FA;
  --blue-dark: #2563EB;
  --blue-glow: rgba(59, 130, 246, 0.25);
  --blue-wash: rgba(59, 130, 246, 0.10);
  
  /* ── Semantic Colors ── */
  --success: var(--emerald);
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: var(--blue);
  
  --danger-glow: rgba(239, 68, 68, 0.25);
  --danger-wash: rgba(239, 68, 68, 0.10);
  
  /* ── Borders & Lines ── */
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-gold: rgba(245, 158, 11, 0.45);
  
  /* ── Shadows & Depth ── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4),
               0 1px 3px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
               0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
               0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6),
               0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  
  --shadow-gold: 0 0 20px rgba(245, 158, 11, 0.3),
                 0 4px 12px rgba(245, 158, 11, 0.2);
  --shadow-emerald: 0 0 20px rgba(245, 158, 11, 0.3),
                    0 4px 12px rgba(245, 158, 11, 0.2);
  --shadow-blue: 0 0 20px rgba(59, 130, 246, 0.3),
                 0 4px 12px rgba(59, 130, 246, 0.2);
  
  /* ── Overlays ── */
  --scrim: rgba(0, 0, 0, 0.75);
  --scrim-heavy: rgba(0, 0, 0, 0.9);
  
  /* ── Loading Skeleton ── */
  --skeleton-from: rgba(255, 255, 255, 0.03);
  --skeleton-to: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   LIGHT THEME (Optional - commented out for now)
   ============================================================ */
/*
:root[data-theme="light"] {
  color-scheme: light;
  
  --bg-base: #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-surface: #F4F4F5;
  --bg-overlay: #E4E4E7;
  
  --glass-strong: rgba(255,255,255,0.98);
  --glass-medium: rgba(255,255,255,0.96);
  --glass-subtle: rgba(255, 255, 255, 0.50);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.14);
  
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-tertiary: #71717A;
  --text-disabled: #A1A1AA;
  
  --gold: #D97706;
  --emerald: #B45309;
  --blue: #2563EB;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
*/

/* ────────── RESPONSIVE BREAKPOINTS ────────── */
@custom-media --sm (min-width: 640px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);
@custom-media --xl (min-width: 1280px);
@custom-media --2xl (min-width: 1536px);

/* ============================================================
   ZOOM / TEXT SIZE
   The header button cycles these. Because the whole app sizes
   its type from these tokens, one attribute on <html> scales
   every page at once — no transforms, so nothing can overflow
   sideways or break a fixed header/nav.
   ============================================================ */
:root[data-zoom="lg"]{
  --fs-micro:11px; --fs-tiny:12px;  --fs-caption:13px; --fs-small:14px;
  --fs-body:17px;  --fs-lead:19px;  --fs-large:21px;   --fs-title:26px;
  --fs-hero:35px;  --fs-display:52px; --fs-mega:70px;
}
:root[data-zoom="xl"]{
  --fs-micro:12px; --fs-tiny:13px;  --fs-caption:15px; --fs-small:16px;
  --fs-body:19px;  --fs-lead:21px;  --fs-large:24px;   --fs-title:29px;
  --fs-hero:39px;  --fs-display:58px; --fs-mega:78px;
}
/* the button shows which step you are on */
#btnZoom .zoomlvl{
  font-family:var(--font-mono,monospace); font-size:9px; font-weight:700;
  letter-spacing:0; line-height:1;
}