:root{
  /* ── Surfaces ─────────────────────── */
  --bg:       #f0ede8;
  --surface:  #e8e4de;
  --surface-2:#dcd7d0;
  --panel:    #ffffff;

  /* ── Text ─────────────────────────── */
  --text:      #0f0f0f;
  --text-mid:  #3a3a3a;
  --text-light:#8a8782;

  /* ── Lines ────────────────────────── */
  --line:        rgba(15,15,15,0.10);
  --line-strong: rgba(15,15,15,0.18);

  /* ── Division accents ─────────────── */
  --poolcast:   #e02b1d;
  --pooltracks: #0d8f6a;
  --poolzine:   #e8e044;
  --plo:        #1e50d4;
  --accent:     #0f0f0f;

  /* ── Type ─────────────────────────── */
  --font-display: 'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:    'DM Sans','Helvetica Neue',sans-serif;
  --font-mono:    'JetBrains Mono',monospace;
  --font-serif:   'Instrument Serif',serif;

  /* ── Metrics ──────────────────────── */
  --nav-h: 56px;
  --max:   1280px;
  --gap:   clamp(20px, 3vw, 36px);
}

/* Per-page accent switch */
.page-poolcast   { --accent: var(--poolcast); }
.page-pooltracks { --accent: var(--pooltracks); }
.page-poolzine   { --accent: var(--poolzine); }
.page-plo        { --accent: var(--plo); }

/* ── Reset ────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; scroll-behavior:smooth }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:400; line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
img{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
input,textarea,select{ font:inherit; color:inherit }