/* ============================================================
   Scribara — Design Tokens (Motion Storytelling, cinematic dark)
   Single source of truth. Override --accent-* to rebrand.
   ============================================================ */
:root {
  /* ---- Canvas + scene backgrounds (chapters transition between these) ---- */
  --bg-base:    #06090f;
  --bg-scene-1: #06090f;   /* cool clinical */
  --bg-scene-2: #06090f;   /* unified */
  --bg-scene-1s:#06090f;
  --bg-scene-2s:#06090f;   /* unified — same bg across all sections */
  --bg-scene-3s:#06090f;   /* unified */
  --bg-scene-4s:#06090f;   /* unified */
  --bg-elevated:#101620;

  /* ---- Flat design: no gradients (tokens resolve to solid colors) ---- */
  --grad-accent: var(--accent);
  --grad-text:   var(--text-primary);
  --grad-aurora: none;
  --grad-scene:  none;
  --grad-primary: var(--accent);
  --grad-border:  var(--border-default);
  --grad-card:    transparent;

  /* ---- Surfaces ---- */
  --surface-1:  #101620;
  --surface-2:  #161d29;
  --surface-glass: rgba(16,22,32,0.55);

  /* ---- Text ramp (AA over moving gradients) ---- */
  --text-primary:   #f4f7fb;
  --text-secondary: #c3cad8;
  --text-muted:     #919bb0;
  --text-faint:     #727d99;   /* WCAG AA: 4.85:1 on base bg */
  --text-on-accent: #04110f;

  /* ---- Borders / hairlines (panels/inputs — NOT between scenes) ---- */
  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --ring:           #5eead4;

  /* ---- Accent (the thread that traces the story) ---- */
  --accent:        #14b8a6;   /* clinical teal */
  --accent-hover:  #2dd4bf;
  --accent-press:  #0d9488;
  --accent-2:      #06b6d4;   /* cyan — secondary beat */
  --accent-3:      #10b981;   /* emerald — climactic beat (sparing) */
  --accent-soft:   rgba(20,184,166,0.16);
  --accent-2-soft: rgba(6,182,212,0.16);
  --accent-3-soft: rgba(16,185,129,0.16);

  /* ---- Semantic ---- */
  --success: #34d399; --success-soft: rgba(52,211,153,0.16);
  --warning: #fbbf24; --warning-soft: rgba(251,191,36,0.16);
  --error:   #fb7185; --error-soft:   rgba(251,113,133,0.16);
  --info:    #38bdf8; --info-soft:    rgba(56,189,248,0.16);

  /* ---- Elevation ---- */
  /* ---- Elevation (flat: no shadows) ---- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --glow:      none;

  /* ---- Type ---- */
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(2.75rem, 1.4rem + 6.6vw, 6rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 2.2vw, 2.875rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --fs-h4:      clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.55vw, 1.4375rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* ---- Spacing (4-pt base / 8-pt rhythm) ---- */
  --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; --space-24: 96px;
  --space-28: 112px;--space-32: 128px;--space-40: 160px;

  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px;

  --container-sm: 680px;  --container-md: 820px;  --container-lg: 1060px;
  --container-xl: 1200px; --container-2xl: 1360px;
  --gutter: clamp(20px, 5vw, 48px);

  --section-y: clamp(64px, 8vw, 120px);
  --section-y-lg: clamp(72px, 9vw, 128px);
  --stack: clamp(16px, 2vw, 24px);

  --track-short: 150vh;
  --track:       250vh;
  --track-long:  360vh;

  --grid-cols: 12; --grid-gap: clamp(16px, 2.2vw, 28px);

  /* ---- Motion ---- */
  --dur-fast: 160ms;  --dur-base: 280ms;  --dur-slow: 520ms;  --dur-slower: 800ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Extended product accent variants (Layer 4 products) ---- */
.accent-purple  { --accent: #9333ea; --accent-hover: #a855f7; --accent-press: #7e22ce; --accent-soft: rgba(147,51,234,.16); }
.accent-coral   { --accent: #ea580c; --accent-hover: #f97316; --accent-press: #c2410c; --accent-soft: rgba(234,88,12,.16); }
.accent-magenta { --accent: #db2777; --accent-hover: #ec4899; --accent-press: #be185d; --accent-soft: rgba(219,39,119,.16); }
.accent-lime    { --accent: #16a34a; --accent-hover: #22c55e; --accent-press: #15803d; --accent-soft: rgba(22,163,74,.16); }
.accent-warmamber { --accent: #d97706; --accent-hover: #f59e0b; --accent-press: #b45309; --accent-soft: rgba(217,119,6,.16); }

/* ---- Optional light theme ---- */
[data-theme="light"] {
  --bg-base:#f4f7fb; --bg-scene-1s:#f4f7fb; --bg-scene-2s:#f4f7fb;
  --bg-scene-3s:#f4f7fb; --bg-scene-4s:#f4f7fb; --bg-elevated:#ffffff;
  --surface-1:#ffffff; --surface-2:#f3f6fb; --surface-glass:rgba(255,255,255,0.6);
  --text-primary:#0a0e16; --text-secondary:#39415a; --text-muted:#5d6480; --text-faint:#67708a;
  --text-on-accent:#04110f;
  --border-subtle:rgba(8,12,22,0.08); --border-default:rgba(8,12,22,0.14);
  --grad-text: var(--text-primary);
}