/* ═══════════════════════════════════════════
   ARA Labs · Design Tokens
   ═══════════════════════════════════════════ */

/* Fonts are self-hosted (/fonts, SIL OFL 1.1 — see fonts/OFL.txt).
   Previously loaded from fonts.googleapis.com, which shipped every
   visitor's IP to Google on each pageload — the pattern German courts
   held to violate GDPR (LG München, 2022) and the site's only
   third-party request. Self-hosting removes it entirely: zero
   third-party requests, zero cookies, no consent banner required. */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Italic-var.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

html { font-size: 16px; }

:root {
  --bg-deep:       #060f0f;
  --bg-mid:        #0d2020;
  --bg-surface:    #0f2626;
  --accent:        #40c8a8;
  --accent-dim:    rgba(64,200,168,0.45);
  --accent-faint:  rgba(64,200,168,0.07);
  --accent-border: rgba(64,200,168,0.14);
  --accent-border2:rgba(64,200,168,0.26);
  --text-primary:  #e8f5f2;
  --text-secondary:rgba(200,235,228,0.82);
  --text-muted:    rgba(200,235,228,0.68);
  --text-dim:      rgba(200,235,228,0.42); /* decorative only — dates, copyright, borders */
  --font-sans:  'Syne', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-serif: 'Libre Baskerville', serif;
  --nav-h:  64px;
  --max-w:  1080px;
  --page-px:2.5rem;
  --r:      2px;

  /* ── Type scale ──────────────────────────────────── */
  /* Every font-size on the site should reference one of these — no
     one-off values. 12px is the accessibility floor; nothing renders smaller. */
  --text-2xs:  0.75rem;   /* 12px · tags, badges, fine print (floor)  */
  --text-xs:   0.8125rem; /* 13px · captions, meta, secondary labels  */
  --text-sm:   0.875rem;  /* 14px · code, instructions, secondary body*/
  --text-base: 0.9375rem; /* 15px · primary body text                 */
  --text-md:   1rem;      /* 16px · emphasized/lead body               */
  --lh-tight:  1.35;
  --lh-base:   1.7;
  --lh-loose:  1.85;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  font-family: var(--font-sans);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--accent-border2); border-radius: 2px; }
::selection { background: rgba(64,200,168,0.2); color: var(--text-primary); }