/* ============================================================
   base.css — design tokens + element resets
   Tokens come from the design bundle's README. Every later
   stylesheet should reference these custom properties, not
   hardcoded hex values.
   ============================================================ */

:root {
  /* Colors */
  --cream:        #F4EBDD;
  --cream-warm:   #F0E3CE;
  --cream-deep:   #EADBC4;
  --paper:        #FBF5EA;
  --espresso:     #2B1D14;
  --espresso-soft:#4A3528;
  --caramel:      #B8733A;
  --caramel-soft: #C88A4E;
  --sage:         #7C8B6F;
  --chalk:        #1F1A17;
  --chalk-dust:   #E8E0D2;

  /* Fonts */
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-hand: 'Caveat', 'Brush Script MT', cursive;

  /* Type scale (px) */
  --fs-hero:      104px;
  --fs-section:   52px;
  --fs-card-h:    26px;
  --fs-stat:      64px;
  --fs-logo:      18px;
  --fs-button:    14px;
  --fs-body:      18px;
  --fs-body-lg:   19px;
  --fs-eyebrow:   30px;
  --fs-eyebrow-sm:26px;
  --fs-nav-link:  22px;

  /* Layout */
  --pad-section:  100px;
  --pad-page-x:   48px;
  --max-content:  1200px;
  --max-grid:     1100px;
  --max-savings:  1040px;
  --max-hero:     1280px;

  /* Motion */
  --ease-draw: cubic-bezier(.55,.1,.35,1);
  --ease-fade: cubic-bezier(.2,.6,.2,1);

  /* Shadow */
  --shadow-card-hover: 0 18px 32px -16px rgba(43,29,20,.25);
  --shadow-card-rest:  0 2px 0 rgba(43,29,20,.04);
  --shadow-badge:      0 6px 14px -6px rgba(43,29,20,.3);
}

/* Element reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Stops any oversized SVG/scene from causing the whole page
     to scroll sideways on narrow screens. */
  overflow-x: hidden;
}

/* Page padding tightens on small screens. Anything that uses
   var(--pad-page-x) gets the new value automatically. */
@media (max-width: 720px) {
  :root { --pad-page-x: 24px; }
}
@media (max-width: 420px) {
  :root { --pad-page-x: 16px; }
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Page shell — nav + main + footer column */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page main { flex: 1; }

/* Reduced motion: instant-reveal for everyone who asked */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}