/* ============================================================
   It's All About You — Design Tokens
   Single source of truth for color, type, spacing, radius,
   shadow and motion values used across the whole site.
   ============================================================ */

:root {
  /* ---------- Brand color ---------- */
  --color-orange: #EA6C06;
  --color-orange-600: #D06105;
  --color-orange-700: #B65402;
  --color-orange-100: #FDE9D6;
  --color-orange-50: #FEF5EB;

  --color-purple: #6F5086;
  --color-purple-600: #5E4373;
  --color-purple-700: #4C3760;
  --color-purple-100: #EAE3EF;
  --color-purple-50: #F5F1F7;

  /* ---------- Warm neutrals (never pure black/white) ---------- */
  --color-bg: #F6F3F1;
  --color-bg-alt: #F2EFEE;
  --color-surface: #FFFFFF;
  --color-charcoal: #3D3B3B;
  --color-charcoal-70: rgba(61, 59, 59, .72);
  --color-charcoal-50: rgba(61, 59, 59, .5);
  --color-charcoal-30: rgba(61, 59, 59, .3);
  --color-charcoal-10: rgba(61, 59, 59, .1);
  --color-border: #E5DFDB;
  --color-border-soft: #EFEAE6;

  /* ---------- Semantic ---------- */
  --color-primary: var(--color-orange);
  --color-primary-hover: var(--color-orange-600);
  --color-accent: var(--color-purple);
  --color-accent-hover: var(--color-purple-600);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-charcoal-70);
  --color-text-faint: var(--color-charcoal-50);
  --color-bg-page: var(--color-bg);
  --color-bg-surface: var(--color-surface);
  --color-success: #3E8A5B;
  --color-success-bg: #E7F3EC;
  --color-error: #C0392B;
  --color-error-bg: #FBEAE8;

  /* ---------- Typography ---------- */
  --font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 1.95rem + 2.4vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.6rem + 1.3vw, 2.75rem);
  --fs-h3: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --fs-h4: 1.25rem;
  --fs-h5: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-tiny: 0.8rem;
  --fs-eyebrow: 0.8125rem;

  --lh-heading: 1.14;
  --lh-body: 1.65;
  --ls-eyebrow: 0.14em;
  --ls-tight: -0.01em;

  /* ---------- Spacing scale (8px base) ---------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;
  --space-section: clamp(3.5rem, 3rem + 3vw, 7rem);
  --space-section-sm: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);

  --container-max: 1240px;
  --container-narrow: 820px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

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

  /* ---------- Shadow (warm-tinted, never pure black) ---------- */
  --shadow-sm: 0 2px 10px rgba(61, 59, 59, .06);
  --shadow-md: 0 4px 20px rgba(61, 59, 59, .08);
  --shadow-lg: 0 12px 32px rgba(61, 59, 59, .14);
  --shadow-xl: 0 24px 56px rgba(61, 59, 59, .18);
  --shadow-orange: 0 10px 28px rgba(234, 108, 6, .28);
  --shadow-purple: 0 10px 28px rgba(111, 80, 134, .24);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur-base: .35s;
  --dur-slow: .6s;

  /* ---------- Z-index scale ---------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}