/* ─────────────────────────────────────────────────────
   SceneBuilder Marketing — Design Tokens
   Inherited verbatim from pitch-deck/style-guide-v2.html
   ───────────────────────────────────────────────────── */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap');

/* Adobe Typekit — mighty-slab, mono45-headline, pollen-web */
@import url('https://use.typekit.net/hvp8nan.css');

:root {
  /* ── Backgrounds ─────────────────────────── */
  --night:         #04060d;
  --deep:          #080c18;
  --surface:       #0f1628;
  --surface-light: #182038;

  /* ── Text ────────────────────────────────── */
  --text:          #e2e8f0;
  --text-muted:    #94a3b8;
  --text-dim:      #64748b;

  /* ── Brand colors ────────────────────────── */
  --cyan:          #22d3ee;
  --chartreuse:    #c8ff00;
  --pine-text:     #34d399;
  --navy-text:     #60a5fa;
  --red:           #f87171;
  --amber:         #fbbf24;
  --pine:          #059669;
  --navy:          #1e40af;

  /* ── Typefaces ───────────────────────────── */
  --serif:         'Instrument Serif', Georgia, serif;
  --sans:          'DM Sans', system-ui, sans-serif;
  --slab:          'mighty-slab', 'Impact', Arial Black, sans-serif;
  --mono-display:  'mono45-headline', monospace;

  /* ── Spacing ─────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* ── Radii ───────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ── Transitions ─────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Per-tab accent scoping ──────────────────────────
   Each active <section data-accent="..."> scopes
   --accent, --accent-dim, --accent-glow locally.
   ───────────────────────────────────────────────────── */
[data-accent="cyan"] {
  --accent:      var(--cyan);
  --accent-dim:  rgba(34, 211, 238, 0.08);
  --accent-glow: rgba(34, 211, 238, 0.15);
}
[data-accent="chartreuse"] {
  --accent:      var(--chartreuse);
  --accent-dim:  rgba(200, 255, 0, 0.06);
  --accent-glow: rgba(200, 255, 0, 0.12);
}
[data-accent="red"] {
  --accent:      var(--red);
  --accent-dim:  rgba(248, 113, 113, 0.06);
  --accent-glow: rgba(248, 113, 113, 0.12);
}
[data-accent="pine"] {
  --accent:      var(--pine-text);
  --accent-dim:  rgba(5, 150, 105, 0.08);
  --accent-glow: rgba(52, 211, 153, 0.12);
}
[data-accent="amber"] {
  --accent:      var(--amber);
  --accent-dim:  rgba(251, 191, 36, 0.06);
  --accent-glow: rgba(251, 191, 36, 0.12);
}