/* ===== DESIGN TOKENS — PHASE 1: Terminal Operator-Grade ===== */
/* AI Worker: Token Steward | Health: token_coverage_pct | Security: No secrets */

:root {
  /* ==================== COLORS: Semantic (Phase 1) ==================== */
  /* Backgrounds */
  --bg: #05070D;
  --surface-0: #0A0E1A;
  --surface-1: #0F1425;
  --surface-2: #13151E;
  
  /* Borders */
  --border: rgba(124, 92, 255, 0.2);
  --border-subtle: rgba(255, 255, 255, 0.08);
  
  /* Text */
  --text-0: #E8EDF9;
  --text-1: rgba(232, 237, 249, 0.8);
  --text-2: rgba(139, 148, 178, 0.8);
  --text-muted: #8B94B2;
  --text-white: #FFFFFF;
  --text-code: #D9E2FF;
  
  /* Accent & Brand */
  --accent: #7C5CFF;
  --accent-hover: #9475FF;
  --accent-bright: #22D3EE;
  
  /* Status colors (operator-grade) */
  --good: #00FF88;
  --good-bright: #00E58F;
  --good-light: #86EFAC;
  --warn: #FFB800;
  --warn-light: #FFD166;
  --bad: #FF4757;
  --bad-dark: #DC2626;
  --bad-light: #FCA5A5;
  --bad-bright: #FF6B6B;
  --info: #3B82F6;
  --success-emerald: #10B981;
  --success-bright: #4ADE80;
  
  /* Freshness badges (Phase 1 critical) */
  --live: var(--good);
  --cached: var(--info);
  --stale: var(--warn);
  --error: var(--bad);
  
  /* ==================== SPACING SCALE (Phase 1 Grid) ==================== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  
  /* ==================== RADIUS ==================== */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  
  /* ==================== SHADOWS (Terminal vibe) ==================== */
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.12);
  --sh-2: 0 4px 12px rgba(0, 0, 0, 0.15);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.2);
  --sh-glow: 0 0 32px rgba(124, 92, 255, 0.25);
  
  /* ==================== TYPOGRAPHY (Phase 1 Scale) ==================== */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Inconsolata', 'Source Code Pro', monospace;
  
  /* Font sizes (max 12 sizes) */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px - minimum for mobile */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 2rem;      /* 32px */
  --fs-3xl: 2.5rem;    /* 40px */
  
  /* Line heights */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  
  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  
  /* ==================== LEGACY TOKENS (backward compat) ==================== */
  /* Colors: Space */
  --space-dark: #05070D;
  --space-mid: #0A0E1A;
  --space-card: #0F1425;
  
  /* Colors: Brand (aliased) */
  --brand: var(--accent);
  --brand-glow: var(--accent-bright);
  --good-legacy: var(--good);
  --warning: var(--warn);
  --danger: var(--bad);
  
  /* Shadows (legacy) */
  --shadow-xs: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.4);
  --shadow-lg: 0 25px 60px rgba(0,0,0,0.6);
  --shadow-soft: 0 8px 24px rgba(34, 211, 238, 0.15);
  --shadow-glow: var(--sh-glow);
  --border-glass: 1px solid rgba(255,255,255,0.12);
  
  /* Blur & Effects */
  --blur: 12px;
  --blur-strong: 20px;
  
  /* Transitions */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-premium: cubic-bezier(0.18, 0.8, 0.24, 1);
  --ease-out-fluid: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.37, 0, 0.19, 1);
  
  /* Motion Durations */
  --motion-micro: 120ms;
  --motion-fast: 180ms;
  --motion-med: 320ms;
  --motion-slow: 620ms;
  --motion-long: 900ms;
  
  /* Easings (unified motion language) */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  
  /* Spacing Scale (legacy) */
  --space-xs: var(--s-1);
  --space-sm: var(--s-2);
  --space-md: var(--s-4);
  --space-lg: var(--s-6);
  --space-xl: var(--s-8);
  --space-2xl: 6rem;
  
  /* Typography Scale (fluid with clamp) */
  --text-xs: var(--fs-xs);
  --text-sm: var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg: var(--fs-md);
  --text-xl: var(--fs-lg);
  --text-2xl: var(--fs-xl);
  --text-3xl: clamp(1.75rem, 4.5vw, 2.25rem);
  --text-4xl: clamp(2rem, 5.5vw, 2.75rem);
  --text-5xl: clamp(2.5rem, 7vw, 3.75rem);
  --text-6xl: clamp(3rem, 9vw, 4.5rem);
  --text-7xl: clamp(3.5rem, 11vw, 5.5rem);
  
  /* Line Heights (legacy) */
  --leading-tight: var(--lh-tight);
  --leading-normal: var(--lh-normal);
  --leading-relaxed: var(--lh-relaxed);
  --leading-heading: 1.3;
  
  /* Border Radius (legacy) */
  --radius-sm: var(--r-2);
  --radius-md: var(--r-3);
  --radius-lg: var(--r-4);
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Icon sizing (standardized hierarchy) */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 28px;
  
  /* Layout */
  --container-max: 1200px;
  --container-sm: 800px;
  --wrap-pad-inline: clamp(1rem, 3vw, 1.5rem);
  
  /* Surface Glass System */
  --surface-card: rgba(15, 20, 37, 0.8);
  --surface-panel: rgba(15, 20, 37, 0.6);
  --surface-overlay: rgba(5, 7, 13, 0.9);
  --border-glass-light: 1px solid rgba(255,255,255,0.08);
  --border-glass-medium: 1px solid rgba(255,255,255,0.12);
  --glow-subtle: 0 0 24px rgba(124, 92, 255, 0.12);
  --glow-medium: 0 0 40px rgba(34, 211, 238, 0.15);
  
  /* Gradients */
  --gradient-brand: linear-gradient(90deg, var(--accent-bright), var(--accent));
  --gradient-brand-alt: linear-gradient(90deg, #22d3ee, #7c5cff);
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  
  /* Quality-based Adaptive Rendering */
  --overlay-opacity: 0.95;
  --grain-opacity: 0.012;
  --surface-blur: 12px;
  --glow-strength: 1;
  --scanline-opacity: 0;
}

/* Quality Levels (applied to html element by QualityController) */
html.quality-high {
  --overlay-opacity: 0.95;
  --grain-opacity: 0.012;
  --surface-blur: 12px;
  --glow-strength: 1;
  --scanline-opacity: 0;
}

html.quality-med {
  --overlay-opacity: 0.85;
  --grain-opacity: 0.008;
  --surface-blur: 8px;
  --glow-strength: 0.8;
  --scanline-opacity: 0;
}

html.quality-low {
  --overlay-opacity: 0.7;
  --grain-opacity: 0.004;
  --surface-blur: 4px;
  --glow-strength: 0.5;
  --scanline-opacity: 0;
}