/* ══════════════════════════════════════════
   DESIGN TOKENS — Single source of truth
   All colors, type, timing defined here.
   Import this first in every page.
══════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --bg:          #060608;
  --bg-2:        #0a0a0c;
  --bg-3:        #0d0d10;
  --text:        rgba(255,255,255,0.88);
  --text-dim:    rgba(255,255,255,0.40);
  --text-ghost:  rgba(255,255,255,0.12);
  --border:      rgba(255,255,255,0.05);
  --border-mid:  rgba(255,255,255,0.10);

  /* ── Node / section accent colors ── */
  --col-work:        107, 159, 255;   /* blue  */
  --col-thoughts:    184, 160, 110;   /* gold  */
  --col-experiments: 220, 220, 210;   /* white */
  --col-systems:       0, 200,  50;   /* green */

  /* ── Typography ── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono:  'Space Mono', 'Courier New', monospace;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-display: 'Syne', system-ui, sans-serif;

  /* ── Easings ── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── Timing ── */
  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   520ms;
  --t-page:   640ms;   /* page transition duration */

  /* ── Layout ── */
  --side-nav-w: 80px;
  --panel-w:    50vw;
}

/* ── Global reset ── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Page transition overlay ── */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  /* controlled entirely by GSAP */
}