/* ============================================================
   Crane Design Tokens — CSS Custom Properties
   ============================================================ */

:root {
  /* Brand blues */
  --blue-300: #60a5fa;
  --blue-400: #3B82F6;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-900: #1E3A8A;

  /* Backgrounds */
  --bg: #e0edff;
  --bg-soft: #eaf2ff;
  --surface: #ffffff;
  --surface-dim: rgba(255,255,255,0.6);

  /* Text */
  --navy: #0f172a;
  --navy-light: #f0f5ff;
  --navy-lighter: #dbeafe;
  --slate-300: #334155;
  --slate-400: #475569;
  --slate-500: #64748b;
  --text: #0f172a;
  --text-sec: #334155;
  --white: #FFFFFF;

  /* Semantic */
  --amber-400: #d97706;
  --amber-500: #f59e0b;
  --green-400: #16a34a;
  --green-500: #22c55e;
  --red-400: #dc2626;
  --red-500: #ef4444;
  --purple-500: #7c3aed;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;

  /* Borders */
  --border: rgba(59,130,246,0.12);

  /* ---- Section gradient palettes (light mode) ---- */
  /* Each section defines start/end background colors for scroll interpolation */
  --grad-hero-from: #dbeafe;
  --grad-hero-to: #e0edff;
  --grad-demo-from: #e0edff;
  --grad-demo-to: #f0f5ff;
  --grad-fear-from: #fef3c7;
  --grad-fear-to: #fee2e2;
  --grad-cost-from: #fee2e2;
  --grad-cost-to: #fecdd3;
  --grad-hope-from: #d1fae5;
  --grad-hope-to: #ccfbf1;
  --grad-product-from: #dbeafe;
  --grad-product-to: #e0edff;
  --grad-price-from: #e0edff;
  --grad-price-to: #ede9fe;
  --grad-cta-from: #dbeafe;
  --grad-cta-to: #c7d2fe;

  /* Noise texture */
  --noise-opacity: 0.035;

  /* Spacing */
  --section-pad: 80px;
  --container-max: 1120px;
  --container-narrow: 780px;
}

/* ---- Dark mode — hero-image-matched palette ---- */
/* Base colors derived from hero background.png:
   Deep navy #0d0b18, mauve #3d2845, cyan glow #00e5d0, screen blue #2060ff */
[data-theme="night"] {
  --bg: #0d0b18;
  --bg-soft: #151222;
  --surface: #1c1730;
  --surface-dim: rgba(28,23,48,0.6);
  --navy: #b8b4c8;
  --navy-light: #1c1730;
  --navy-lighter: #2a2440;
  --slate-300: #9890a8;
  --slate-400: #6e6882;
  --slate-500: #4e4862;
  --text: #ccc8d8;
  --text-sec: #8e88a2;
  --border: rgba(120,100,160,0.12);
  --green-400: #00d4b8;
  --red-400: #e06070;
  --amber-400: #d4a040;
  --teal-400: #00e5d0;
  --blue-300: #60a0f0;
  --blue-400: #4888e0;
  --blue-500: #4888e0;
  --blue-600: #3070d0;

  /* Section gradient palettes — not used in dark mode,
     replaced by fixed hero-matched background */

  --noise-opacity: 0.04;
}

/* ---- Dusk mode — golden-hour palette ---- */
[data-theme="dusk"] {
  --bg: #3a2820;
  --bg-soft: #46312a;
  --surface: #573e35;
  --surface-dim: rgba(87,62,53,0.6);
  --navy: #f2e0cc;
  --navy-light: #46312a;
  --navy-lighter: #6b4a3d;
  --slate-300: #e2c5a4;
  --slate-400: #c2a17e;
  --slate-500: #96775c;
  --text: #fdebd4;
  --text-sec: #e2c5a4;
  --border: rgba(232,180,130,0.2);
  --green-400: #34d399;
  --red-400: #f87171;
  --amber-400: #e6ac40;
  --teal-400: #f6ae62;

  --noise-opacity: 0.04;
}