/* ============================================
   DESIGN TOKENS
   All CSS custom properties. Single source of truth.
   ============================================ */

:root {
  /* Colors — dark theme (default) */
  --bg: #07090C;
  --bg-elevated: #0E1217;
  --bg-subtle: #151A21;
  --border: #1F262F;
  --text: #EEF2F6;
  --text-muted: #9AA5B1;
  --text-faint: #5F6B78;
  --accent: #4CC9F0;
  --accent-hover: #7DDBF7;
  --accent-ink: #06121A;
  --accent-soft: rgba(76, 201, 240, 0.10);
  --success: #3DDC97;
  --danger: #FF6B6B;

  /* Typography */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing & layout */
  --container: 1180px;
  --gap: 24px;

  /* Radii */
  --radius-card: 20px;
  --radius-input: 14px;
  --radius-img: 16px;
  --radius-pill: 999px;
  --radius-device: 36px;
  --radius-panel: 28px;

  /* Shadows */
  --shadow-device: 0 24px 60px -24px rgba(0, 0, 0, 0.7);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 400ms;
  --duration-slow: 700ms;
}