/* Cobalt Luminary Design Tokens · Light Mode Default Specification */
:root {
  /* Canvas & Multi-Tier Surface Layers (Light Mode Default) */
  --surface-ground: #f8fafc;          /* Cool engineered white canvas */
  --surface-panel: #ffffff;           /* Layer 1 Container (Pure White Card) */
  --surface-panel-85: rgba(255, 255, 255, 0.94);
  --surface-raised: #f1f5f9;          /* Layer 2 Raised / Inactive pill */
  --surface-raised-75: rgba(241, 245, 249, 0.85);
  --surface-overlay: #e2e8f0;         /* Elevated overlay */
  --surface-highest: #cbd5e1;         /* Highest contrast light surface */

  /* Dark Graphite Band (Cobalt Signature Beat for Screen Vision Technical Section) */
  --surface-graphite: #0b0f19;        /* Midnight Obsidian */
  --surface-graphite-card: #111827;   /* Charcoal Navy */
  --text-graphite-light: #f9fafb;     /* Starlight text on dark graphite band */
  --text-graphite-mist: #9ca3af;

  /* Primary Brand - Electric Cobalt */
  --cobalt-primary: #2563eb;
  --cobalt-bright: #1d4ed8;
  --cobalt-tint: #1d4ed8;
  --cobalt-deep: #172554;
  --cobalt-glow: rgba(37, 99, 235, 0.25);
  --cobalt-border: rgba(37, 99, 235, 0.22);
  --cobalt-subtle: rgba(37, 99, 235, 0.06);

  /* Secondary Accent - Cyan Aura (Listening & Telemetry) */
  --cyan-aura: #0284c7;
  --cyan-glow: rgba(2, 132, 199, 0.20);
  --cyan-subtle: rgba(2, 132, 199, 0.08);
  --cyan-border: rgba(2, 132, 199, 0.25);

  /* Semantic - Vibrant Mint (Confirmation & Verified State) */
  --mint-confirm: #059669;
  --mint-subtle: rgba(5, 150, 105, 0.08);
  --mint-glow: rgba(5, 150, 105, 0.20);

  /* Typography & Contrast (Crisp High-Contrast for Light Mode) */
  --text-starlight: #0f172a;         /* Deep Slate / Crisp Charcoal for Headings */
  --text-mist: #475569;              /* Slate for Body Copy & Descriptions */
  --text-dim: #94a3b8;               /* Tertiary metadata & disabled text */
  
  /* Hairline Structural Lines */
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-faint: rgba(15, 23, 42, 0.04);
  --border-highlight: rgba(15, 23, 42, 0.14);

  /* Directional Gradient Stroke & Buttons */
  --stroke-gradient: linear-gradient(135deg, rgba(2, 132, 199, 0.35), rgba(37, 99, 235, 0.12) 40%, rgba(15, 23, 42, 0.04));
  --btn-primary-gradient: linear-gradient(135deg, #2563eb, #1d4ed8);

  /* Typography (2+1 Pairing) */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;

  /* Rhythmic Spacing Standards */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.5rem;   /* 40px */
  --space-2xl: 4.5rem;  /* 72px */
  --space-3xl: 7rem;    /* 112px */

  /* Roundedness Level 2 (Rounded) */
  --radius-xs: 4px;
  --radius-sm: 8px;     /* Base components, inputs, buttons */
  --radius-md: 12px;
  --radius-lg: 16px;    /* Cards, preview panes, transcription monitors */
  --radius-xl: 24px;    /* Floating sheets, modal dialogs */
  --radius-full: 9999px;/* Mic hubs, pills, segmented tracks */

  /* Transitions */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-enter: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}