/* =============================================
   VDB FAMILY — SHARED FOUNDATION
   Tokens, reset, and base element styles.
   Every page on vdbfam.com links this first,
   then layers a page-specific stylesheet on top.
   ============================================= */

/* =============================================
   DESIGN TOKENS — RACK UNIT
   ============================================= */
:root {
  --bg: #0a0b10;
  --bg-deep: #06070c;
  --surface-0: #0e0f17;
  --surface-1: #13151e;
  --surface-2: #191c27;
  --surface-3: #232736;

  --line: #1d2030;
  --line-bright: #2b3044;
  --line-hot: rgba(255,181,71,0.45);

  --amber: #ffb547;
  --amber-hi: #ffc872;
  --amber-dim: rgba(255,181,71,0.6);
  --amber-low: rgba(255,181,71,0.12);
  --amber-glow: rgba(255,181,71,0.22);

  --ok: #4ef19a;
  --ok-low: rgba(78,241,154,0.12);
  --ok-glow: rgba(78,241,154,0.22);
  --alert: #ff5f56;
  --warn: #febc2d;

  --text: #edeef5;
  --text-dim: #a8acc0;
  --text-muted: #686d84;
  --text-faint: #3d4257;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;

  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--bg); }

/* =============================================
   PAGE CONTAINER
   Neutral centered column — pages layer their
   own decoration on top.
   ============================================= */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 48px 96px;
  position: relative;
  z-index: 1;
}

/* =============================================
   REDUCED MOTION (global)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}