/* ==========================================================================
   DESIGN TOKENS
   Central source of truth for color, type, spacing, radius, shadow, motion.
   Prompt 2 & 3 sections should consume these tokens, not hardcode values.
   ========================================================================== */

:root {
  /* ---- Color: Primary / Charcoal (UV branding) ----
     Token names kept as --navy-* for backward compatibility with every
     section built in Prompt 1 & 2 — only the values moved to UV's palette. */
  --navy-950: #0a0a0a;
  --navy-900: #141414;
  --navy-800: #1e1e1e;
  --navy-700: #2a2a2a;
  --navy-600: #3d3d3d;

  /* ---- Color: Backgrounds ---- */
  --bg-white: #ffffff;
  --bg-warm: #fdf9f4;
  --bg-soft: #f5f4f2;
  --bg-soft-2: #ececea;

  /* ---- Color: Neutrals / Text ---- */
  --charcoal-900: #1c1a17;
  --charcoal-700: #46423c;
  --charcoal-500: #726c63;
  --charcoal-300: #a8a29a;
  --border-subtle: #e8e5e0;
  --border-strong: #d6d1c9;

  /* ---- Color: Accent (UV Orange → Gold) ---- */
  --accent-600: #d9530f;
  --accent-500: #f0791c;
  --accent-400: #f6a623;
  --accent-300: #fbc94d;
  --accent-100: #fff3e0;
  --accent-glow: rgba(240, 121, 28, 0.35);

  /* ---- Gradients (use sparingly) ---- */
  --gradient-accent: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-400) 100%);
  --gradient-navy: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  --gradient-text: linear-gradient(100deg, var(--accent-600) 0%, var(--accent-500) 55%, var(--accent-300) 100%);

  /* ---- Typography ---- */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-h1: clamp(2.4rem, 5vw, 4rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0 1px 2px rgba(20, 16, 12, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(20, 16, 12, 0.08), 0 1px 2px rgba(20, 16, 12, 0.04);
  --shadow-md: 0 12px 28px -10px rgba(20, 16, 12, 0.14), 0 2px 6px rgba(20, 16, 12, 0.05);
  --shadow-lg: 0 28px 60px -20px rgba(20, 16, 12, 0.2);
  --shadow-glow: 0 0 0 1px rgba(240, 121, 28, 0.16), 0 24px 50px -18px rgba(240, 121, 28, 0.4);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 64px);
  --section-py: clamp(72px, 9vw, 128px);
  --nav-h: 84px;
  --nav-h-compact: 64px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease-out);
  --t-base: 320ms var(--ease-out);
  --t-slow: 560ms var(--ease-out);
}