/* ============================================================
   WesterAudio — Design Tokens
   All design values live here as CSS custom properties.
   NO hardcoded hex, px, or font names anywhere else in the CSS.
   ============================================================ */

:root {

  /* ─── COLORS — Brand ─────────────────────────────────────── */
  --color-cream:        #F2EDE3;
  --color-cream-2:      #E8E2D8;
  --color-near-black:   #1A1A1A;
  --color-near-black-2: #242424;
  --color-near-black-3: #2E2E2E;
  --color-near-black-4: #333333;
  --color-accent:       #C8520A;
  --color-subtle:       #6B6560;
  --color-danger:       #E05050;
  --color-warning:      #E0A030;

  /* ─── COLORS — Borders ───────────────────────────────────── */
  --color-border-light: #E4DDD2;
  --color-border-dark:  rgba(242, 237, 227, 0.07);
  --color-border-dark-2:rgba(242, 237, 227, 0.12);

  /* ─── COLORS — Semantic (light mode defaults) ────────────── */
  --color-bg-primary:    var(--color-cream);
  --color-bg-secondary:  var(--color-cream-2);
  --color-text-primary:  var(--color-near-black);
  --color-text-subtle:   var(--color-subtle);
  --color-border:        var(--color-border-light);
  --color-accent-primary:var(--color-accent);

  /* ─── COLORS — Dark surface tokens ──────────────────────── */
  --color-surface-dark:   var(--color-near-black-2);
  --color-surface-dark-2: var(--color-near-black-3);
  --color-text-on-dark:   rgba(242, 237, 227, 0.90);
  --color-text-on-dark-mid: rgba(242, 237, 227, 0.60);
  --color-text-on-dark-dim: rgba(242, 237, 227, 0.35);

  /* ─── GLOWS ──────────────────────────────────────────────── */
  --glow-accent:    0 0 24px 3px rgba(200, 82, 10, 0.28);
  --glow-accent-sm: 0 0 16px 2px rgba(200, 82, 10, 0.22);
  --glow-accent-lg: 0 0 36px 6px rgba(200, 82, 10, 0.32);
  --glow-btn:       0 0 22px 3px rgba(200, 82, 10, 0.26);
  --glow-btn-sm:    0 0 16px 2px rgba(200, 82, 10, 0.24);
  --glow-rec:       0 0 28px 4px rgba(200, 82, 10, 0.35);
  --glow-rec-room:  0 0 22px 4px rgba(200, 82, 10, 0.32);
  --glow-toggle:    0 0 6px rgba(200, 82, 10, 0.30);

  /* ─── TYPOGRAPHY — Families ─────────────────────────────── */
  --font-display: 'Anton', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ─── TYPOGRAPHY — Scale (desktop) ──────────────────────── */
  --text-display:   50px;   /* homepage hero headline */
  --text-h1:        44px;   /* page titles (Solo, Collab) */
  --text-h2:        34px;   /* section headlines */
  --text-h3:        28px;   /* Mix Master empty title */
  --text-h4:        21px;   /* feature card titles */
  --text-h5:        18px;   /* path box titles */
  --text-body-lg:   14px;
  --text-body:      13px;
  --text-body-sm:   12px;
  --text-overline:  11px;
  --text-label:     11px;
  --text-button:    13px;
  --text-mono:      13px;
  --text-mono-sm:   11px;
  --text-mono-lg:   32px;   /* large timer — active recording */
  --text-room-code: 40px;   /* room code display */
  --text-blog-card: 16px;

  /* ─── TYPOGRAPHY — Scale (tablet) ───────────────────────── */
  --text-display-tab: 40px;
  --text-h1-tab:      40px;
  --text-h2-tab:      24px;

  /* ─── TYPOGRAPHY — Scale (mobile) ───────────────────────── */
  --text-display-mob: 34px;
  --text-h1-mob:      32px;
  --text-h2-mob:      24px;
  --text-mono-lg-mob: 24px;
  --text-room-code-mob: 32px;

  /* ─── TYPOGRAPHY — Line heights ─────────────────────────── */
  --leading-display: 0.95;
  --leading-heading: 1.10;
  --leading-body:    1.65;
  --leading-tight:   1.55;

  /* ─── TYPOGRAPHY — Letter spacing ───────────────────────── */
  --tracking-display:  0px;
  --tracking-heading:  0px;
  --tracking-overline: 0.18em;
  --tracking-mono:     0.10em;
  --tracking-button:   0.02em;
  --tracking-code:     0.08em;

  /* ─── SPACING ────────────────────────────────────────────── */
  --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-13: 52px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --layout-outer:     52px;   /* page horizontal padding — desktop */
  --layout-outer-tab: 28px;   /* tablet */
  --layout-outer-mob: 20px;   /* mobile */
  --layout-max:       1280px;
  --layout-content:   560px;  /* centered single-column pages */
  --layout-content-tab: 500px;
  --layout-content-mob: 400px;

  /* ─── NAV ────────────────────────────────────────────────── */
  --nav-height:     56px;
  --nav-height-tab: 52px;
  --nav-height-mob: 52px;
  --nav-height-app: 44px;

  /* ─── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   5px;
  --radius-lg:   6px;
  --radius-xl:   7px;
  --radius-2xl:  8px;
  --radius-3xl:  10px;
  --radius-4xl:  12px;
  --radius-full: 9999px;

  /* ─── TRANSITIONS ────────────────────────────────────────── */
  --duration-micro:  120ms;   /* hover, focus ring */
  --duration-fast:   150ms;   /* button hover, icon scale */
  --duration-base:   200ms;   /* button state changes, color swaps */
  --duration-panel:  300ms;   /* drawer open/close, panel transitions */
  --duration-reveal: 400ms;   /* scroll-reveal fade-in */
  --duration-glow:  1600ms;   /* mic glow pulse */
  --duration-pulse: 1400ms;   /* recording ring + waiting dot */
  --duration-pulse-dot: 1200ms; /* live track dot */

  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-standard: ease;
}

/* ─── DARK MODE OVERRIDE ─────────────────────────────────────
   Applied to <body data-theme="dark"> on app pages
   (Recording Room, Mix Master)
   ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-primary:   var(--color-near-black);
  --color-bg-secondary: var(--color-near-black-2);
  --color-text-primary: rgba(242, 237, 227, 0.90);
  --color-text-subtle:  rgba(242, 237, 227, 0.45);
  --color-border:       rgba(242, 237, 227, 0.07);
}