/**
 * Quark Website — Design Tokens
 * ===============================
 * Single source of truth for colors, fonts, and spacing.
 * Import in every page: <link rel="stylesheet" href="/css/design-tokens.css">
 *
 * Pages can override individual tokens after this import if needed.
 */

:root {
  /* Background hierarchy */
  --bg-primary: #0a0a0f;
  --bg-card: #0e0e14;
  --bg-card-hover: #131319;
  --bg-elevated: #17171f;

  /* Border hierarchy */
  --border: #1e1e2a;
  --border-subtle: #16161f;

  /* Text hierarchy */
  --text-primary: #c8ccd4;
  --text-bright: #e8eaf0;
  --text-secondary: #888e9a;
  --text-dim: #505568;

  /* Brand accents */
  --accent-primary: #6b2150;
  --accent-secondary: #9b3a6e;
  --accent-gold: #d4a044;

  /* Semantic colors */
  --accent-green: #4ade80;
  --accent-red: #ef4444;
  --accent-orange: #f59e0b;

  /* Glows & gradients */
  --glow-primary: rgba(107, 33, 80, 0.15);
  --glow-green: rgba(74, 222, 128, 0.12);
  --gradient-accent: linear-gradient(135deg, #6b2150, #9b3a6e);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Layout */
  --max-width: 1200px;
}