/* ==========================================================================
   Level Headed Construction — base.css
   Design tokens, reset, and base typography.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --cream:         #EDDDB7;
  --cream-soft:    #FBF8F1;
  --brown:         #A8552E;
  --brown-dark:    #7D3E1F;
  --rusty:         #9E3C0E;
  --rusty-dark:    #6E2A0A;
  --ink:           #2A1B10;
  --ink-soft:      #3D2F22;
  --neutral-200:   #D9CEB2;
  --neutral-500:   #8C7B63;
  --white:         #FFFFFF;
  --success:       #4A7C3C;
  --error:         #B33B14;

  /* Typography */
  --font-display: "Oswald", "Arial Narrow", "Impact", sans-serif;
  --font-body:    "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Accent face: italic serif used in headlines to highlight the key
     word (e.g. "Build." / "hold to.") against the condensed display.   */
  --font-accent:  "Playfair Display", "Times New Roman", Georgia, serif;
  /* Form input text uses the body font at a heavier weight —
     keeps the family consistent with the rest of the page while
     giving typed content a quietly substantial feel. */
  --font-input:   "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion — duration */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-medium: 500ms;
  --dur-slow:   800ms;
  --dur-loader: 550ms;

  /* Motion — easing */
  --ease-in-out-circ:  cubic-bezier(0.85, 0, 0.15, 1);
  --ease-in-out-quad:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-out-circ:     cubic-bezier(0, 0.55, 0.45, 1);
  --ease-expo-in-out:  cubic-bezier(0.87, 0, 0.13, 1);

  /* Layout */
  --page-max:    1440px;
  --content-max: 1200px;
  --text-max:    680px;
  --gutter:      24px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(42,27,16,0.08);
  --shadow-lg: 0 12px 32px rgba(42,27,16,0.15);
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 64px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Base typography ---------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(28px, 4vw, 44px); }
h3 { font-size: clamp(22px, 2.5vw, 28px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

/* Headline accent: wrap the emphasis word(s) of any heading with
   <span class="title__accent"> to swap to the italic serif and rust
   color. The italic serif visually balances the condensed display
   sans next to it; size is bumped slightly because italic serifs
   read smaller than their nominal em size at the same font-size. */
.title__accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--rusty);
  letter-spacing: -0.005em;
  /* Italic serifs need a touch more size to balance the condensed
     display next to them. */
  font-size: 1.06em;
  /* Always proper case regardless of parent text-transform. */
  text-transform: none;
}

p { max-width: var(--text-max); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rusty);
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--rusty);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 10000;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  transition: top var(--dur-base) var(--ease-in-out-quad);
}
.skip-link:focus { top: 16px; }

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}