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

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

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

: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;
}

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); }