/* ==========================================================================
   FunnelStory pitch deck. design tokens
   Extracted from funnelstory.ai (fonts, palette, radii, elevation).
   Light theme is the default. Dark theme applies on [data-theme="dark"].
   ========================================================================== */

:root {
  /* ---- Type families -------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Switzer", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (fluid) --------------------------------------------- */
  --text-display: clamp(2.75rem, 6.5vw, 5rem);
  --text-h1: clamp(2.25rem, 4.8vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --text-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* ---- Line heights (site values) ------------------------------------- */
  --leading-display: 1.1;   /* headings on funnelstory.ai */
  --leading-body: 1.6;      /* body on funnelstory.ai */
  --leading-tight: 1.3;

  /* ---- Weights --------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Tracking -------------------------------------------------------- */
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---- Brand hues (theme independent) ---------------------------------- */
  --brand-violet-900: #08052b;
  --brand-violet-800: #1c1756;
  --brand-violet-700: #2f2299;
  --brand-violet-600: #4836cc;
  --brand-violet-500: #6152dc;
  --brand-violet-400: #9b9cf7;
  --brand-violet-300: #b6b9fe;
  --brand-violet-200: #cacdff;
  --brand-violet-100: #e5e7ff;
  --brand-violet-50:  #f0f1ff;

  --brand-plum: #531d85;
  --brand-magenta: #db17a7;
  --brand-coral: #ff6a42;
  --brand-amber: #feab59;
  --brand-green: #007d5b;

  /* ---- Signature gradient --------------------------------------------- */
  --gradient-brand: linear-gradient(90deg, #feab59 0%, #ff6a42 31.19%, #db17a7 71.09%, #531d85 100%);
  --gradient-brand-reverse: linear-gradient(270deg, #feab59 0%, #ff6a42 31.19%, #db17a7 71.09%, #531d85 100%);
  --gradient-violet: linear-gradient(135deg, #6152dc 0%, #531d85 100%);

  /* ---- Radii ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Spacing --------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1120px;
  --slide-min-height: 100svh;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
}

/* ==========================================================================
   LIGHT THEME (default / primary)
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #fefdfb;            /* cream page ground */
  --bg-subtle: #f8f9fe;
  --bg-inset: #f0f1ff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.82);

  --border: #e1e5f3;
  --border-strong: #c8cde5;

  --ink: #1c1756;           /* headings */
  --text: #394066;          /* body copy */
  --text-muted: #6d759d;
  --text-subtle: #b3bad8;
  --text-on-brand: #ffffff;

  --primary: #6152dc;
  --primary-hover: #4836cc;
  --primary-active: #2f2299;
  --primary-soft: #f0f1ff;
  --primary-soft-hover: #e5e7ff;
  --primary-border: #cacdff;
  --primary-on: #ffffff;

  --accent-warm: #ff6a42;
  --accent-warm-soft: #fff1ea;
  --accent-magenta: #db17a7;
  --accent-magenta-soft: #fae6f9;
  --success: #007d5b;
  --success-soft: #dcfce7;

  --focus-ring: rgba(97, 82, 220, 0.45);
  --shadow-sm: 0 1px 2px rgba(28, 23, 86, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(28, 23, 86, 0.14);
  --shadow-lg: 0 24px 64px -24px rgba(28, 23, 86, 0.22);
  --glow: 0 0 0 1px var(--primary-border), 0 18px 48px -20px rgba(97, 82, 220, 0.4);
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #08052b;
  --bg-subtle: #0d0a33;
  --bg-inset: #15113c;
  --surface: #15113c;
  --surface-raised: #1c1756;
  --surface-overlay: rgba(21, 17, 60, 0.82);

  --border: #2a2560;
  --border-strong: #3b3577;

  --ink: #f8f8ff;
  --text: #c8cce8;
  --text-muted: #9ba0c8;
  --text-subtle: #6d759d;
  --text-on-brand: #ffffff;

  --primary: #9b9cf7;
  --primary-hover: #b6b9fe;
  --primary-active: #cacdff;
  --primary-soft: rgba(97, 82, 220, 0.20);
  --primary-soft-hover: rgba(97, 82, 220, 0.32);
  --primary-border: #4836cc;
  --primary-on: #08052b;

  --accent-warm: #ff8a68;
  --accent-warm-soft: rgba(255, 106, 66, 0.16);
  --accent-magenta: #f45ec6;
  --accent-magenta-soft: rgba(219, 23, 167, 0.18);
  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.16);

  --focus-ring: rgba(155, 156, 247, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, 0.7);
  --glow: 0 0 0 1px var(--primary-border), 0 18px 48px -20px rgba(155, 156, 247, 0.35);
}