/* =========================================================
   BASE.CSS
   Reset, design tokens (colors/fonts/spacing), typography.
   ---------------------------------------------------------
   To rebrand: change values in :root only. No HTML edits.
   ========================================================= */

:root {
  /* ---- Brand palette (PLACEHOLDER — swap with client brand) ---- */
  --bg:        #FAF8F5;   /* warm off-white page background          */
  --surface:   #FFFFFF;   /* cards, elevated panels                  */
  --ink:       #0E0E10;   /* primary text, headings                  */
  --ink-soft:  #2A2A30;   /* secondary text                          */
  --muted:     #6B6B72;   /* tertiary, captions                      */
  --line:      #E6E2DB;   /* hairline borders                        */
  --accent:    #b42d33;   /* CTA / highlight (placeholder orange-red)*/
  --accent-ink:#FFFFFF;   /* text on accent                          */
  --dark:      #0E0E10;   /* dark sections                           */
  --dark-ink:  #FAF8F5;   /* text on dark                            */

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Scale ---- */
  --container: 1240px;
  --gutter:    clamp(1rem, 3vw, 2rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius:    14px;
  --radius-sm: 8px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 200ms;
  --t-med:  450ms;
  --t-slow: 800ms;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(14,14,16,.06);
  --shadow-md: 0 14px 40px -16px rgba(14,14,16,.18);
  --shadow-lg: 0 30px 80px -30px rgba(14,14,16,.35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 5.25rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.15rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

p  { max-width: 62ch; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

::selection { background: var(--accent); color: var(--accent-ink); }