/* ============================================================
   Curbside — Design Tokens
   Warm-paper editorial palette + Söhne-substitute type stack
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: paper + ink ---------- */
  --paper:        oklch(98.5% 0.003 80);   /* clean soft white */
  --paper-2:      oklch(96.5% 0.005 80);   /* card surface */
  --paper-3:      oklch(94.0% 0.007 80);   /* hover surface */
  --paper-deep:   oklch(88.0% 0.010 80);   /* contrast section */

  --ink:          oklch(18.0% 0.030 330);  /* deep aubergine ink */
  --ink-2:        oklch(36.0% 0.030 330);  /* secondary */
  --ink-3:        oklch(54.0% 0.020 330);  /* tertiary */
  --ink-4:        oklch(72.0% 0.012 330);  /* disabled */

  --rule:         oklch(86.0% 0.008 80);
  --rule-strong:  oklch(74.0% 0.010 80);

  /* ---------- Beauty palette (section variants) ---------- */
  --blush:        oklch(92.0% 0.022 25);   /* dusty pink/peach */
  --blush-deep:   oklch(86.0% 0.030 25);
  --sage:         oklch(91.0% 0.020 145);  /* soft eucalyptus */
  --sage-deep:    oklch(85.0% 0.028 145);
  --plaster:      oklch(89.0% 0.018 90);   /* warmer beige plaster */
  --plaster-deep: oklch(82.0% 0.024 85);
  --champagne:    oklch(93.0% 0.028 75);   /* gold-tinted ivory */

  /* ---------- Color: brand + semantic ---------- */
  --signal:       oklch(68.0% 0.085 75);   /* champagne gold */
  --signal-deep:  oklch(56.0% 0.090 65);   /* deeper bronze on hover */
  --signal-soft:  oklch(94.0% 0.030 75);

  --moss:         oklch(48.0% 0.110 145);  /* success / offer locked */
  --moss-soft:    oklch(94.0% 0.035 145);

  --amber:        oklch(72.0% 0.140 75);   /* attention / action needed */
  --amber-soft:   oklch(95.0% 0.045 75);

  --info:         oklch(50.0% 0.090 240);  /* info / neutral status */
  --info-soft:    oklch(95.0% 0.025 240);

  /* ---------- Type: families ---------- */
  --font-display: 'Fraunces', 'Didot', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Type: scale (px) ---------- */
  --t-12: 12px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;
  --t-36: 36px;
  --t-48: 48px;
  --t-64: 64px;
  --t-84: 84px;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(20,18,12,0.04), 0 1px 1px rgba(20,18,12,0.06);
  --shadow-2: 0 12px 32px -8px rgba(20,18,12,0.18);
  --shadow-inset: inset 0 1px 0 rgba(20,18,12,0.04);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-fast: 150ms;
  --d-med:  220ms;
  --d-slow: 400ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / headline */
.h-display {
  font-family: var(--font-display);
  font-size: var(--t-84);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-64);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.022em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-48);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.018em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-28);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--t-22);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.006em;
}

p, .p {
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
}

.lede {
  font-size: var(--t-22);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 56ch;
}

.editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-22);
  line-height: 1.45;
  color: var(--ink);
}

.eyebrow {
  font-size: var(--t-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.caption {
  font-size: var(--t-12);
  line-height: 1.4;
  color: var(--ink-3);
}

.mono, code, .num {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-feature-settings: "tnum", "ss01";
  letter-spacing: -0.01em;
}

.num-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
a:hover { color: var(--signal); text-decoration-color: var(--signal); }

::selection { background: var(--signal); color: var(--paper); }