/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds — warm dark palette */
  --bg-base:        #0a0a0a;
  --bg-surface-1:   #111111;
  --bg-surface-2:   #1a1a1a;
  --bg-surface-3:   #222222;
  --bg-hover:       #2a2a2a;

  /* Borders — warm greys */
  --border:         #2a2a2a;
  --border-subtle:  #1e1e1e;

  /* Legacy surface aliases — older templates (momentum cards, modals, channel cards,
     analytics revenue blocks) reference --surface / --surface-1 / --surface-2 / --bg.
     These were never declared, so those cards rendered with a transparent background.
     Map them onto the real warm-grey scale to make the existing markup correct + consistent. */
  --bg:             var(--bg-base);
  --surface:        var(--bg-surface-2);
  --surface-1:      var(--bg-surface-1);
  --surface-2:      var(--bg-surface-2);
  --surface-3:      var(--bg-surface-3);

  /* Text — warm whites */
  --text-primary:   #fafafa;
  --text-secondary: #a1a1aa;
  /* Tertiary carries meaningful sub-text (KPI sub-labels, footnotes, metadata, date
     stamps, the "breakdown" link). At #52525b it computed to ~2.4:1 on the card surface
     — below WCAG AA — so it now sits at #8a8a93 (~5:1) to stay legible. The very-dim
     #3f3f46 (--text-disabled) is reserved for non-text decoration: inactive bar fills,
     the "today" tier bar, done-step rails. Chart axis ticks keep their own literal grey. */
  --text-tertiary:  #8a8a93;
  --text-disabled:  #3f3f46;
  /* Legacy alias — some templates reference --text-muted; map it to the tertiary tone
     so those nodes render at the intended legible weight (it labels real sub-text:
     "Churn rate", pipeline tags, the momentum "breakdown" link). */
  --text-muted:     #8a8a93;

  /* Accent — warm amber/gold (creator energy) */
  --accent:         #f59e0b;
  --accent-hover:   #fbbf24;
  --accent-subtle:  rgba(245, 158, 11, 0.12);
  --accent-glow:    rgba(245, 158, 11, 0.30);
  /* Amber tint scale — codifies the ad-hoc rgba(245,158,11,.06/.12) usages.
     Brand/interactive only; never used for data encoding (that's --yt/--tiktok/--ig). */
  --accent-04:      rgba(245, 158, 11, 0.04);
  --accent-06:      rgba(245, 158, 11, 0.06);
  --accent-10:      rgba(245, 158, 11, 0.10);
  --accent-12:      rgba(245, 158, 11, 0.12);
  --accent-15:      rgba(245, 158, 11, 0.15);
  --accent-line:    rgba(245, 158, 11, 0.22);  /* hairline borders on amber tiles */

  /* Platform colours — authentic brand hues */
  --yt:             #FF0000;
  --yt-subtle:      rgba(255, 0, 0, 0.12);
  --tiktok:         #69C9D0;
  --tiktok-subtle:  rgba(105, 201, 208, 0.12);
  --ig:             #E1306C;
  --ig-subtle:      rgba(225, 48, 108, 0.12);

  /* Status */
  --green:          #22C55E;
  --green-subtle:   rgba(34, 197, 94, 0.12);
  --yellow:         #EAB308;
  --yellow-subtle:  rgba(234, 179, 8, 0.12);
  --red:            #EF4444;
  --red-subtle:     rgba(239, 68, 68, 0.12);

  /* Typography — Creator Studio */
  --font:           'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'Space Mono', 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:       1.875rem;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* Spacing (8px grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii — generous rounding for creator aesthetic */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  16px;
  --radius-xl:  16px;
  --radius-btn: 12px;
  --radius-badge: 24px;
  --radius-full: 9999px;

  /* Shadows — warm tinted */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px rgba(245, 158, 11, 0.08);

  /* Layout */
  --sidebar-w:  240px;
  --topbar-h:   56px;

  /* ── Motion tokens (documented) ────────────────────────────────────────────
     The cinematic/ambient language runs on two curves and three durations.
       --ease        standard UI ease for hovers, fades, color shifts (150ms)
       --ease-entrance  the signature "settle" curve used by twow entrance,
                        bcRise insight stagger, count-up and revenue-bar fills
     Keep new motion on these tokens so the whole dashboard breathes in one rhythm.
     All entrance motion is gated behind prefers-reduced-motion. */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance:  cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration:       150ms;     /* hovers / state changes */
  --duration-md:    220ms;     /* modal + drawer slide-in */
  --duration-slow:  450ms;     /* insight stagger / draw-in */

  /* Scrollbar — warm grey */
  scrollbar-color: #333 #111111;
}

/* ── Warm scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }