/* ==========================================================================
   PRISM — Design Tokens
   Light theme is the default surface; [data-theme="dark"] overrides below.
   Breakpoints used throughout: 480 / 640 / 768 / 1024 / 1280 / 1440
   ========================================================================== */

:root {
  /* ---- Brand gradient (the "prism" spectrum) ---- */
  --brand-indigo: #84B292;
  --brand-violet: #84B292;
  --brand-aqua: #84B292;
  --brand-pink: #84B292;
  --brand-gradient: linear-gradient(135deg, #1B2F2E 0%, #1B2F2E 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(132,178,146,.12) 0%, rgba(132,178,146,.12) 100%);

  /* ---- Surface & ink (light default) ---- */
  --bg: #FFFFFF;
  --bg-alt: #F1EAD8;
  --bg-raised: #FFFFFF;
  --ink-900: #082640;
  --ink-700: #1B2F2E;
  --ink-500: rgba(27, 47, 46, 0.70);
  --ink-300: rgba(27, 47, 46, 0.40);
  --border: rgba(8, 38, 64, 0.12);
  --border-strong: rgba(8, 38, 64, 0.12);

  /* ---- Buttons ---- */
  --btn-primary-bg: #1B2F2E;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: #1B2F2E;
  --btn-primary-hover-bg: #84B292;
  --btn-primary-hover-text: #FFFFFF;
  --btn-primary-hover-border: #84B292;

  --btn-secondary-bg: rgba(255, 255, 255, 0.72);
  --btn-secondary-text: #082640;
  --btn-secondary-border: rgba(8, 38, 64, 0.12);
  --btn-secondary-hover-bg: rgba(132, 178, 146, 0.08);
  --btn-secondary-hover-text: #84B292;
  --btn-secondary-hover-border: #84B292;

  /* ---- Links ---- */
  --link-color: #082640;
  --link-hover-color: #84B292;

  /* ---- Glass material ---- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-bg-solid: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(8, 38, 64, 0.12);
  --glass-blur: 20px;
  --glass-shadow: 0 1px 1px rgba(255, 255, 255, 0.7) inset,
                  0 18px 40px -12px rgba(8, 38, 64, 0.08),
                  0 2px 10px rgba(8, 38, 64, 0.05);
  --glass-shadow-sm: 0 1px 1px rgba(255, 255, 255, 0.6) inset,
                     0 8px 24px -8px rgba(8, 38, 64, 0.06);

  /* ---- Elevation (non-glass) ---- */
  --shadow-sm: 0 1px 2px rgba(14, 14, 20, 0.06), 0 1px 1px rgba(14,14,20,.04);
  --shadow-md: 0 8px 24px -8px rgba(14, 14, 20, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(14, 14, 20, 0.18);

  /* ---- Typography ---- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-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) ---- */
  --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;
  --space-10: 8rem;
  --space-section: clamp(3.25rem, 2.5rem + 3vw, 5.5rem);

  /* ---- Radius ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --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 ---- */
  --container-w: 1240px;
  --container-pad: clamp(1.25rem, 3vw, 2.5rem);
  --header-h: 84px;

  /* ---- Z-index scale ---- */
  --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: #082640;
  --bg-alt: #1B2F2E;
  --bg-raised: #102B3F;
  --ink-900: #F1EAD8;
  --ink-700: #EAE5D9;
  --ink-500: rgba(241, 234, 216, 0.70);
  --ink-300: rgba(241, 234, 216, 0.40);
  --border: rgba(241, 234, 216, 0.12);
  --border-strong: rgba(241, 234, 216, 0.18);

  --brand-indigo: #84B292;
  --brand-violet: #84B292;
  --brand-aqua: #84B292;
  --brand-pink: #84B292;
  --brand-gradient: linear-gradient(135deg, #84B292 0%, #84B292 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(132,178,146,.15) 0%, rgba(132,178,146,.15) 100%);

  /* ---- Buttons in Dark Mode ---- */
  --btn-primary-bg: #84B292;
  --btn-primary-text: #082640;
  --btn-primary-border: #84B292;
  --btn-primary-hover-bg: #F1EAD8;
  --btn-primary-hover-text: #082640;
  --btn-primary-hover-border: #F1EAD8;

  --btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --btn-secondary-text: #F1EAD8;
  --btn-secondary-border: rgba(241, 234, 216, 0.15);
  --btn-secondary-hover-bg: rgba(132, 178, 146, 0.12);
  --btn-secondary-hover-text: #84B292;
  --btn-secondary-hover-border: #84B292;

  /* ---- Links ---- */
  --link-color: #84B292;
  --link-hover-color: #F1EAD8;

  /* ---- Glass material in Dark Mode ---- */
  --glass-bg: rgba(8, 38, 64, 0.65);
  --glass-bg-strong: rgba(27, 47, 46, 0.85);
  --glass-bg-solid: rgba(8, 38, 64, 0.95);
  --glass-border: rgba(241, 234, 216, 0.15);
  --glass-shadow: 0 1px 1px rgba(255, 255, 255, 0.05) inset,
                  0 20px 48px -16px rgba(0, 0, 0, 0.5);
  --glass-shadow-sm: 0 1px 1px rgba(255, 255, 255, 0.05) inset,
                     0 10px 28px -10px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}