/* ════════════════════════════════════════════════════════════════════════
   Base system — reset, type scale, grid rail, color tokens.
   Placeholder values throughout. See DESIGN-SYSTEM.md before changing.
   ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Neutral ink/paper — placeholder until Thomas's brand palette lands */
  --ink:        #1B1B1B;
  --ink-soft:   #4A4A4A;
  --line:       #E3E0D9;
  --paper:      #FFFFFF;
  --paper-warm: #F7F4EE;

  /* One accent, rationed to small elements only (§3, DESIGN-SYSTEM.md).
     Sibcy Cline brand red, sampled from sibcycline.com. */
  --accent:     #C80002;

  --font-sans: 'DM Sans', system-ui, sans-serif;

  --t-display: clamp(2.5rem, 5vw, 4.2rem);
  --t-head:    clamp(1.55rem, 2.6vw, 2.1rem);
  --t-sub:     1.22rem;
  --t-body:    1rem;
  --t-caption: 0.8125rem;
  --t-label:   0.72rem;
  --t-label-track: 0.16em;

  --max-width: 1120px;
  --gutter:    32px;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ─── Type ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-head); }
h3 { font-size: var(--t-sub); }

p {
  color: var(--ink-soft);
  max-width: 640px;
  text-wrap: pretty;
}

/* The one label treatment. Every kicker/tag/column-head joins this group,
   never a one-off style — see DESIGN-SYSTEM.md §1. */
.label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  color: var(--accent);
}

.caption {
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

/* ─── Layout ───────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: 64px;
}

.band {
  background: var(--paper-warm);
}

/* ─── Components (minimal — expand as the real design takes shape) ──── */

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
}

.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
}