/* ============================================
   MVNU ART — DESIGN TOKENS
   Source of truth for color / spacing / type.
   Light theme = :root, dark theme = :root[data-theme="dark"].
   ============================================ */

:root {
  /* --- Brand (header/footer/hero band — shifts hard between themes) --- */
  --brand-teal-1: #3e9da5;
  --brand-teal-2: #1d4c62;
  --brand-navy: #0f172a;
  --hero-glow-cyan: rgba(6, 182, 212, 0.5);
  --hero-glow-warm: rgba(255, 140, 66, 0.4);
  --grain-opacity: 0.035;

  /* --- Accent (signature orange, tuned slightly per theme) --- */
  --accent: #eba16c;
  --accent-2: #ffb363;
  --accent-strong: #ff9c33;
  --accent-ink: #10263a;

  /* --- Surfaces --- */
  --bg: #f5f8fe;
  --bg-alt: #eef3fb;
  --bg-elevated: #ffffff;
  --bg-elevated-alt: #f7f9fd;
  --bg-wash: transparent;
  --card-blur: none;

  /* --- Text --- */
  --text: #17202f;
  --text-muted: #5c6a7a;
  --text-faint: #94a3b8;
  --text-on-accent: #ffffff;
  --text-on-brand: #ffffff;

  /* --- Borders / shadows --- */
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 16px 36px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.14);
  --glow-accent: rgba(235, 161, 108, 0.35);

  /* --- Type --- */
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: 'Unbounded', var(--font-sans);

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

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-theme: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Dark mode goes near-black, not navy — the brand band gets moodier + glowier */
  --brand-teal-1: #0b232c;
  --brand-teal-2: #030810;
  --hero-glow-cyan: rgba(6, 182, 212, 0.65);
  --hero-glow-warm: rgba(255, 140, 66, 0.55);
  --grain-opacity: 0.07;

  --accent: #ffb363;
  --accent-2: #eba16c;
  --accent-strong: #ffb877;
  --accent-ink: #10263a;

  --bg: #05080f;
  --bg-alt: #0a0f1a;
  --bg-elevated: #10151f;
  --bg-elevated-alt: #141a26;
  --bg-wash:
    radial-gradient(ellipse 900px 560px at 12% -10%, rgba(255, 179, 99, 0.09), transparent 60%),
    radial-gradient(ellipse 1000px 640px at 88% 25%, rgba(6, 182, 212, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 50% 90%, rgba(235, 161, 108, 0.05), transparent 60%);
  --card-blur: blur(18px);

  --text: #eef2f8;
  --text-muted: #a8b3c4;
  --text-faint: #64748b;
  --text-on-accent: #10263a;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.65);
  --glow-accent: rgba(255, 179, 99, 0.35);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-theme: none;
  }
}