:root {

  /* ── Backgrounds ─────────────────────── */
  --ink:   #06060a;
  --ink-2: #0d0d14;
  --ink-3: #12121c;

  /* ── Surfaces ────────────────────────── */
  --surface:   rgba(255,255,255,0.03);
  --surface-h: rgba(255,255,255,0.055);

  /* ── Borders ─────────────────────────── */
  --bd:   rgba(255,255,255,0.07);
  --bd-h: rgba(255,255,255,0.15);

  /* ── Accent palette ──────────────────── */
  --accent-a: #4af4c8;   /* teal  — primary  */
  --accent-b: #a78bfa;   /* violet            */
  --accent-c: #60a5fa;   /* blue              */

  /* ── Accent α variants ───────────────── */
  --accent-a-10: rgba(74,244,200,0.10);
  --accent-a-20: rgba(74,244,200,0.20);
  --accent-b-20: rgba(167,139,250,0.20);
  --accent-c-15: rgba(96,165,250,0.15);

  /* ── Text alpha ramp ─────────────────── */
  --t1: rgba(255,255,255,0.92);
  --t2: rgba(255,255,255,0.50);
  --t3: rgba(255,255,255,0.25);

  /* ── Typography ──────────────────────── */
  --font-sans:  'Noto Sans SC',  sans-serif;
  --font-serif: 'Noto Serif SC', serif;
  --font-mono:  'DM Mono',       monospace;

  /* ── Layout ──────────────────────────── */
  --max-w:  1280px;
  --sec-v:  120px;   /* vertical section padding */
  --sec-h:  32px;    /* horizontal gutter        */

  /* ── Radii ───────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* ── Motion ──────────────────────────── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur:      0.65s;
  --dur-fast: 0.22s;
}

@media (max-width: 768px) {
  :root {
    --sec-v: 72px;
    --sec-h: 20px;
  }
}