/* ==========================================================================
   ATLAS — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, and motion.
   Every other stylesheet should reference these variables rather than
   hardcoding raw values. Keeping tokens centralized is what lets Atlas
   grow for years without a redesign (Principle 09 — Build for the Future).
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #0a0b0e;         /* deep background, comfortable for long reading */
  --color-surface: #111217;    /* nav, large containers */
  --color-card: #16181d;       /* project / status cards */
  --color-border: #24262d;     /* hairline separation, not heavy borders */
  --color-border-strong: #33353d;

  /* ---- Color: text ---- */
  --color-text: #f2f3f5;
  --color-text-dim: #9ba0ac;
  --color-text-faint: #6b6f7a;

  /* ---- Color: accents (used sparingly, never decorative) ---- */
  --color-accent: #5b8def;       /* primary: buttons, links, focus */
  --color-accent-hover: #7aa3f2;
  --color-accent-2: #8b7ff5;     /* secondary: rare emphasis only */
  --color-success: #34d399;      /* completed / live status */
  --color-warning: #f0a93b;      /* in progress */
  --color-error: #ef4a5f;        /* validation / critical only */

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- Spacing (8pt system) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Shadow (soft, never dominant) ---- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 80px rgba(91, 141, 239, 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 500ms;

  /* ---- Layout ---- */
  --content-max-width: 1200px;
  --header-height: 76px;
}