/* ============================================================
   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 ── */
  --glass-strong: rgba(20,20,24,0.98);
  --glass-medium: rgba(24,24,28,0.96);
  --glass-subtle: rgba(24, 24, 27, 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 ── */
  --emerald: #10B981;              /* Success green */
  --emerald-light: #34D399;
  --emerald-dark: #059669;
  --emerald-glow: rgba(16, 185, 129, 0.25);
  --emerald-wash: rgba(16, 185, 129, 0.10);
  
  /* ── 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(16, 185, 129, 0.3),
                    0 4px 12px rgba(16, 185, 129, 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: #059669;
  --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;
}