/* =========================================================
   Neighborhood Disruptors — Design Tokens
   Authority: ND directive color system + editorial reference
   Used by every master visual system.
   ========================================================= */

:root {
  /* --- Palette (from ND spec) --- */
  --pearl:            #f7f3ed;
  --ivory:            #fffdf8;
  --stone:            #e9e2d8;
  --linen:            #eee7dc;
  --ink:              #151613;
  --soft-ink:         #343630;
  --muted:            #727068;
  --champagne:        #b99b62;
  --champagne-light:  #dcc99d;
  --champagne-deep:   #8f7642;
  --plum:             #493246;
  --sage:             #69796d;

  /* --- Semantic --- */
  --bg:               var(--pearl);
  --bg-card:          var(--ivory);
  --bg-inset:         var(--linen);
  --bg-dark:          var(--ink);
  --bg-dark-2:        #1e1f1b;
  --fg:               var(--ink);
  --fg-2:             var(--soft-ink);
  --fg-muted:         var(--muted);
  --fg-on-dark:       #f5efe3;
  --fg-on-dark-mute:  #a6a196;
  --accent:           var(--champagne);
  --accent-strong:    var(--champagne-deep);
  --rule:             #d9d1c2;
  --rule-strong:      #b8ac97;
  --rule-dark:        #2c2d28;
  --success:          #4f7a4a;
  --warn:             #b25b2a;

  /* --- Type --- */
  --serif:  "Chronicle Display", "Cormorant Garamond", "Playfair Display", "PT Serif", Georgia, serif;
  --sans:   "Söhne", "Suisse Int'l", "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:   "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Editorial display + body per Culinary reference: serif titles, sans body */
  --f-display: 700 clamp(38px, 5.2vw, 78px)/1.02 var(--serif);
  --f-h1:      600 clamp(30px, 3.6vw, 52px)/1.08 var(--serif);
  --f-h2:      600 clamp(22px, 2.4vw, 34px)/1.15 var(--serif);
  --f-h3:      600 20px/1.25 var(--serif);
  --f-eyebrow: 600 11px/1 var(--sans);   /* uppercase, tracked */
  --f-lede:    400 clamp(16px, 1.15vw, 19px)/1.55 var(--sans);
  --f-body:    400 15px/1.6 var(--sans);
  --f-meta:    500 12.5px/1.35 var(--sans);
  --f-btn:     600 13px/1 var(--sans);
  --f-num:     600 13px/1 var(--mono);

  --tracked:   0.14em;
  --tracked-s: 0.08em;

  /* --- Space (4pt) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px;

  /* --- Radius --- */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-pill: 999px;

  /* --- Shadows (used sparingly, mag-print vibe) --- */
  --sh-1: 0 1px 0 rgba(21,22,19,.04), 0 1px 3px rgba(21,22,19,.05);
  --sh-2: 0 4px 14px rgba(21,22,19,.07);
  --sh-3: 0 22px 60px -20px rgba(21,22,19,.28);

  /* --- Container --- */
  --page-max: 1360px;
  --page-pad: clamp(20px, 3vw, 40px);
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5 { margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Utility */
.page      { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }
.page-wide { max-width: 1560px;          margin: 0 auto; padding: 0 var(--page-pad); }
.eyebrow   { font: var(--f-eyebrow); letter-spacing: var(--tracked); text-transform: uppercase; color: var(--muted); }
.eyebrow.on-dark { color: var(--champagne-light); }
.rule-top  { border-top: 1px solid var(--rule); }
.rule-btm  { border-bottom: 1px solid var(--rule); }
.dark-section { background: var(--bg-dark); color: var(--fg-on-dark); }
.dark-section .eyebrow { color: var(--champagne-light); }
.dark-section hr, .dark-section .rule-top, .dark-section .rule-btm { border-color: var(--rule-dark); }

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