/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — Intelligent City Platform
   Single source of truth for all visual properties.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ── */
  --bg-primary: #0a0e17;
  --bg-secondary: #111827;
  --bg-card: #1a2235;
  --bg-card-hover: #1f2a40;
  --border: #2a3550;
  --border-accent: #3b82f6;

  --text-primary: #e8ecf4;
  --text-secondary: #8b95a8;
  --text-muted: #5a6478;

  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-violet: #8b5cf6;

  --gradient-glow: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);

  /* ── Shadows ── */
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

  /* ── Radii ── */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* ── Typography ── */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
}