/* ==========================================================================
   PRISM — Design Tokens
   The AI Workshop Co — Visual Direction Board (Violet Range 13)
   - Ink:     #4B0073
   - Primary: #EB0032
   - Accent:  #C8AAFF
   - Surface: #E6E1FF
   - Font:    Source Serif 4
   ========================================================================== */

:root {
  /* ---- Brand gradient ---- */
  --brand-indigo: #EB0032;
  --brand-violet: #4B0073;
  --brand-aqua: #C8AAFF;
  --brand-pink: #EB0032;
  --brand-gradient: linear-gradient(135deg, #EB0032 0%, #7B008A 52%, #4B0073 100%);
  --brand-gradient-text: linear-gradient(135deg, #EB0032 0%, #7B008A 52%, #4B0073 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(235, 0, 50, 0.10) 0%, rgba(200, 170, 255, 0.25) 52%, rgba(230, 225, 255, 0.40) 100%);

  /* ---- Surface & ink (light default per Visual Direction Board) ---- */
  --bg: #FAF8FF;
  --bg-alt: #FFFFFF;
  --bg-raised: #FFFFFF;
  --ink-900: #4B0073;
  --ink-700: #1A1926;
  --ink-500: #383648;
  --ink-300: #6E6B82;
  --border: rgba(75, 0, 115, 0.10);
  --border-strong: rgba(75, 0, 115, 0.20);

  /* ---- Glass material ---- */
  --glass-bg: rgba(255, 255, 255, 0.70);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-bg-solid: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(200, 170, 255, 0.50);
  --glass-blur: 20px;
  --glass-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset,
                  0 18px 40px -12px rgba(75, 0, 115, 0.14),
                  0 2px 10px rgba(75, 0, 115, 0.05);
  --glass-shadow-sm: 0 1px 1px rgba(255, 255, 255, 0.7) inset,
                     0 8px 24px -8px rgba(75, 0, 115, 0.12);

  /* ---- Elevation (non-glass) ---- */
  --shadow-sm: 0 1px 2px rgba(75, 0, 115, 0.06), 0 1px 1px rgba(75, 0, 115, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(75, 0, 115, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(75, 0, 115, 0.18);

  /* ---- Typography (Source Serif 4) ---- */
  --font-display: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;

  --fs-h1: clamp(2.75rem, 1.7rem + 4.2vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-wide: 0.08em;

  /* ---- Spacing scale (rem) - 100% UNTOUCHED ORIGINAL ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --space-section: clamp(3.25rem, 2.5rem + 3vw, 5.5rem);

  /* ---- Radii - 100% UNTOUCHED ORIGINAL ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* ---- Motion - 100% UNTOUCHED ORIGINAL ---- */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;
  --dur-slower: 900ms;

  /* ---- Layout - 100% UNTOUCHED ORIGINAL ---- */
  --container-w: 1240px;
  --container-pad: clamp(1.25rem, 3vw, 2.5rem);
  --header-h: 84px;

  /* ---- Z-index scale - 100% UNTOUCHED ORIGINAL ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 500;
  --z-toast: 1000;

  color-scheme: light;
}

/* ---------------------------------------------------------------------- */
/* Dark theme overrides                                                    */
/* ---------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #140320;
  --bg-alt: #1F0730;
  --bg-raised: #280B3D;
  --ink-900: #FFFFFF;
  --ink-700: #F6EEFF;
  --ink-500: #E6E1FF;
  --ink-300: #C8AAFF;
  --border: rgba(200, 170, 255, 0.14);
  --border-strong: rgba(200, 170, 255, 0.24);

  --glass-bg: rgba(75, 0, 115, 0.35);
  --glass-bg-strong: rgba(75, 0, 115, 0.65);
  --glass-bg-solid: #1F0730;
  --glass-border: rgba(200, 170, 255, 0.22);
  --glass-shadow: 0 1px 1px rgba(200, 170, 255, 0.12) inset,
                  0 20px 48px -16px rgba(0, 0, 0, 0.7),
                  0 0 60px -20px rgba(235, 0, 50, 0.3);
  --glass-shadow-sm: 0 1px 1px rgba(200, 170, 255, 0.08) inset,
                     0 10px 28px -10px rgba(0, 0, 0, 0.6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.65);

  --brand-indigo: #FF2E5B;
  --brand-violet: #C8AAFF;
  --brand-aqua: #E6E1FF;
  --brand-gradient: linear-gradient(135deg, #FF1E4D 0%, #B83AE8 52%, #8522CC 100%);
  --brand-gradient-text: linear-gradient(135deg, #FF2E5B 0%, #DE44FF 48%, #C8AAFF 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(235, 0, 50, 0.22) 0%, rgba(200, 170, 255, 0.20) 52%, rgba(230, 225, 255, 0.15) 100%);

  color-scheme: dark;
}