/* MIH Creator Academy — design tokens v1 (themeable)
   Source of truth: output/design-system/MIH-DESIGN-TOKENS.md (colors) + this file (web scale).
   Override strategy: Jayden's reference → styles/theme-override.css redefines the same variables.
   Never hard-code colors in components; use var(--*) only. */
:root {
  /* brand palette */
  --brand-ink: #0F0F12;
  --brand-ink-2: #17171C;
  --brand-line: #2A2A32;
  --brand-paper: #FFFFFF;
  --brand-muted: #9A9AA6;
  --brand-cyan: #25F4EE;
  --brand-pink: #FE2C55;
  --brand-cyan-dim: #0E5E5B;
  --brand-pink-dim: #6B1426;

  /* semantic — dark (default, matches posters / playbook) */
  --bg: var(--brand-ink);
  --bg-2: var(--brand-ink-2);
  --bg-3: #1F1F26;
  --line: var(--brand-line);
  --fg: var(--brand-paper);
  --fg-2: #D4D4DC;
  --fg-muted: var(--brand-muted);
  --accent: var(--brand-cyan);
  --accent-fg: #06201F;
  --accent-soft: rgba(37,244,238,.12);
  --cta: var(--brand-pink);
  --cta-fg: #FFFFFF;
  --cta-soft: rgba(254,44,85,.14);
  --ok: #4ADE80;
  --warn: #FBBF24;
  --danger: var(--brand-pink);
  --info: var(--brand-cyan);
  --focus: var(--brand-cyan);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --overlay: rgba(10,10,14,.72);

  /* type */
  --font-display: "Montserrat", "AlibabaPuHuiTi 2", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Inter", "AlibabaPuHuiTi 2", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --fs-xs: .75rem;   /* 12 */
  --fs-sm: .875rem;  /* 14 */
  --fs-md: 1rem;     /* 16 */
  --fs-lg: 1.125rem; /* 18 */
  --fs-xl: 1.375rem; /* 22 */
  --fs-2xl: 1.75rem; /* 28 */
  --fs-3xl: 2.25rem; /* 36 */
  --fs-4xl: clamp(2.5rem, 6vw, 4rem);
  --lh-tight: 1.1;
  --lh-body: 1.5;
  --tracking-display: -0.02em;
  --tracking-label: 0.08em;

  /* space (8pt 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; --s-9: 96px;
  --gutter: 16px;
  --container: 1120px;
  --container-narrow: 720px;

  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 24px; --r-pill: 999px;
  --border: 1px solid var(--line);

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 180ms;

  /* layout */
  --nav-h: 60px;
  --tabbar-h: 64px;
  --sidebar-w: 248px;
}

/* light theme (for Jayden's reference comparison / print) */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-2: #F5F5F8;
  --bg-3: #ECECF2;
  --line: #E2E2EA;
  --fg: #0F0F12;
  --fg-2: #2A2A32;
  --fg-muted: #6B6B78;
  --accent: #0E8F8A;
  --accent-fg: #FFFFFF;
  --accent-soft: rgba(14,143,138,.10);
  --cta: #E5173F;
  --cta-soft: rgba(229,23,63,.10);
  --shadow: 0 10px 30px rgba(15,15,18,.10);
  --overlay: rgba(255,255,255,.80);
  --ok: #15803D;
  --warn: #B45309;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }