/* ─────────────────────────────────────────
   tokens.css — Design tokens for Nyxwatch
   ───────────────────────────────────────── */

:root {
  /* Colors */
  --color-bg:           #05050a;
  --color-surface:      #0b0b12;
  --color-surface-2:    #111119;
  --color-border:       rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.14);

  --color-text:         #e4e4ec;
  --color-text-muted:   #565668;
  --color-text-dim:     #28283a;

  /* Accent — ice blue */
  --color-accent:       #6eb5d4;
  --color-accent-dim:   rgba(110, 181, 212, 0.10);
  --color-accent-glow:  rgba(110, 181, 212, 0.04);

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing scale */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32: 128px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --duration-s: 180ms;
  --duration-m: 320ms;
  --duration-l: 600ms;
}