/* tokens.css - single source of truth for color, type, motion, geometry.
   Palette matches the portfolio at trishnadas7897.github.io so visiting
   trishna's portfolio -> /transcriber feels like one continuous product:
   deep navy surfaces, champagne gold accent, warm off-white text. */

:root {
  /* Surface scale - layered navy ramp */
  --surface-0: #04060c;             /* page background (matches navy-950) */
  --surface-1: #0a0e1a;             /* primary card */
  --surface-2: #11151f;             /* raised card */
  --surface-3: #181d2a;             /* highest elevation */
  --surface-overlay: rgba(201, 169, 110, 0.06);  /* gold glow underlay */

  /* Text */
  --text-primary: #f0ece4;          /* warm off-white */
  --text-secondary: #a0a4ad;
  --text-tertiary: #6b7080;
  --text-disabled: #3f4250;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(201, 169, 110, 0.35);

  /* Brand - champagne gold */
  --brand-500: #c9a96e;              /* primary accent */
  --brand-400: #d4b275;
  --brand-600: #a88c52;
  --brand-glow: rgba(201, 169, 110, 0.35);

  /* Status */
  --status-live: #4ade80;            /* mint for recording */
  --status-warning: #fbbf24;
  --status-error: #f87171;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;

  --leading-tight: 1.08;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-loose: 1.75;

  --tracking-tightest: -0.04em;
  --tracking-tighter: -0.025em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.22em;

  /* Spacing - 4px scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out-fast: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 400ms;

  /* Shadows */
  --shadow-glow-sm: 0 0 0 1px var(--border-default), 0 4px 16px -4px var(--brand-glow);
  --shadow-glow-md: 0 0 0 1px var(--border-gold), 0 8px 32px -4px var(--brand-glow);
  --shadow-lg: 0 20px 60px -16px rgba(0, 0, 0, 0.6);
}