/* =========================================================
   Hope on the Road — Core Tokens
   Terracotta + taupe on a warm, restful cream base.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Archivo:wght@300;400;500;600;700&family=Caveat:wght@400;500;600&display=swap');

:root {
  /* ---------- Color — Core palette ---------- */
  /* Terracotta — primary accent, warm sunset clay */
  --terracotta-50:  #FBF1EC;
  --terracotta-100: #F4DCCF;
  --terracotta-200: #E9BBA3;
  --terracotta-300: #DB9677;
  --terracotta-400: #C87454;
  --terracotta-500: #B65A3C;   /* primary */
  --terracotta-600: #9A4830;
  --terracotta-700: #7A3724;
  --terracotta-800: #562719;
  --terracotta-900: #3A1B12;

  /* Taupe — neutral, warm stone */
  --taupe-50:  #F7F3EE;
  --taupe-100: #ECE4D9;
  --taupe-200: #DACEBE;
  --taupe-300: #C2B19C;
  --taupe-400: #A89478;
  --taupe-500: #8E7A5F;   /* mid taupe */
  --taupe-600: #6F5F4A;
  --taupe-700: #544738;
  --taupe-800: #3A3126;
  --taupe-900: #221D16;

  /* Cream — the resting background */
  --cream-50:  #FDFAF5;   /* page bg */
  --cream-100: #F9F3E9;
  --cream-200: #F2E9D9;

  /* Supporting accents — used sparingly */
  --sage-500:  #8A9B7A;   /* distant hills, plants */
  --sky-500:   #A8B8C2;   /* sky/dust */
  --ochre-500: #C8974B;   /* sun, sand highlights */

  /* ---------- Semantic color ---------- */
  --bg:           var(--cream-50);
  --bg-alt:       var(--cream-100);
  --bg-sunk:      var(--cream-200);
  --bg-inverse:   var(--taupe-800);

  --fg:           var(--taupe-800);   /* primary text */
  --fg-muted:     var(--taupe-600);
  --fg-soft:      var(--taupe-500);
  --fg-faint:     var(--taupe-400);
  --fg-inverse:   var(--cream-50);

  --accent:          var(--terracotta-500);
  --accent-hover:    var(--terracotta-600);
  --accent-press:    var(--terracotta-700);
  --accent-soft-bg:  var(--terracotta-50);
  --accent-soft-fg:  var(--terracotta-700);

  --border:        rgba(84, 71, 56, 0.14);     /* taupe-700 @ 14% */
  --border-strong: rgba(84, 71, 56, 0.28);
  --border-accent: var(--terracotta-300);

  --success: #6F8A5E;
  --warning: var(--ochre-500);
  --danger:  #A84A3B;

  /* ---------- Type ---------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Caveat', 'Homemade Apple', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid, calm rhythm */
  --fs-hero:   clamp(3.5rem, 6vw, 5.5rem);
  --fs-h1:     clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:     clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:     1.5rem;
  --fs-h4:     1.25rem;
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relax:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.18em;   /* eyebrow / label */

  /* ---------- Spacing (8pt soft grid, generous) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Radius — soft, organic ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------- Shadow — low, warm, ambient ---------- */
  --shadow-sm:  0 1px 2px rgba(84, 71, 56, 0.06);
  --shadow-md:  0 4px 12px rgba(84, 71, 56, 0.08), 0 1px 2px rgba(84, 71, 56, 0.04);
  --shadow-lg:  0 12px 32px rgba(84, 71, 56, 0.10), 0 2px 6px rgba(84, 71, 56, 0.05);
  --shadow-xl:  0 24px 56px rgba(84, 71, 56, 0.14), 0 4px 10px rgba(84, 71, 56, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.4);

  /* ---------- Motion ---------- */
  --ease-slow:   cubic-bezier(0.33, 0.1, 0.25, 1);   /* default: slow-life */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-slow:   600ms;
}

/* =========================================================
   Base type — applied as a stylesheet so product UIs inherit
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.script {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--accent);
}

.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  font-weight: 400;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}