/* ============================================
   UNEXPLORED MILES — DESIGN TOKENS
   Direction: "Divergent Paths" — editorial, warm,
   optimistic. Branching-path motif throughout.
   ============================================ */

:root{
  /* ---- Color: base ---- */
  --paper:        #FBF6EE;   /* warm cream page background */
  --paper-alt:     #F3ECDF;   /* slightly deeper cream for banding */
  --ink:          #201A16;   /* near-black warm ink for text */
  --ink-soft:      #55493F;   /* secondary text */
  --ink-faint:     #8A7C6E;   /* tertiary / meta text */
  --line:         #E4D9C7;   /* hairline borders on paper */

  /* ---- Color: brand path ---- */
  --path:         #E8622C;   /* terracotta — the road taken */
  --path-dark:     #C24C1D;   /* hover/active */
  --path-ink:      #FFF3EA;   /* text-on-path */

  /* ---- Color: divergent accents (the "other" paths) ---- */
  --accent-lavender: #D9CEF2;
  --accent-mint:      #C9E8D6;
  --accent-butter:    #F5DFA0;
  --accent-blush:     #F3D2CE;
  --accent-sky:       #C7DFF0;

  /* ---- Color: dark section (used sparingly, "night fork") ---- */
  --night:        #1B1712;
  --night-ink:     #F3ECDF;

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Sora", "Inter", system-ui, -apple-system, sans-serif;

  --fs-hero:      clamp(2.6rem, 6vw, 5.4rem);
  --fs-h1:        clamp(2.2rem, 4.4vw, 3.6rem);
  --fs-h2:        clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:        clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:      1.05rem;
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.8rem;

  --lh-tight:     1.05;
  --lh-snug:      1.25;
  --lh-normal:    1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 780px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 900ms;

  /* ---- Shadow ---- */
  --shadow-card: 0 1px 2px rgba(32,26,22,.04), 0 12px 28px -12px rgba(32,26,22,.18);
  --shadow-lift: 0 20px 45px -18px rgba(32,26,22,.35);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
}