/* ===================================================
   Snow Control System — Design Tokens
   ===================================================
   Generated from: design-tokens.json v1.1.0
   Generated at:   2026-03-25 21:42:00
   DO NOT EDIT — edit design-tokens.json instead
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* -- Dark mode (default) -- */
:root {
  --color-bg: #0a0e17;
  --color-panel: #111827;
  --color-surface: #0d1220;
  --color-border: #1e293b;
  --color-text: #e2e8f0;
  --color-text-muted: #64748b;
  --color-text-hint: #475569;
  --color-accent: #38bdf8;
  --color-accent-hover: #7dd3fc;
  --color-success: #4ade80;
  --color-danger: #f87171;
  --color-warning: #fbbf24;

  --color-accent-dim: rgba(56,189,248,0.15);
  --color-success-dim: rgba(74,222,128,0.15);
  --color-danger-dim: rgba(248,113,113,0.15);
  --color-warning-dim: rgba(251,191,36,0.10);

  --glow-success: 0 0 8px rgba(74,222,128,0.6);
  --glow-danger: 0 0 8px rgba(248,113,113,0.6);
  --glow-accent: 0 0 8px rgba(56,189,248,0.5);
  --chip-bg: rgba(0,0,0,0.15);

  --bg: var(--color-bg);
  --panel: var(--color-panel);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --green: var(--color-success);
  --red: var(--color-danger);
  --yellow: var(--color-warning);
  --muted: var(--color-text-muted);
  --text: var(--color-text);
  --mono: var(--font-mono);
}

/* -- Light mode -- */
[data-theme="light"] {
  --color-bg: #f0f2f5;
  --color-panel: #ffffff;
  --color-surface: #f8f9fa;
  --color-border: #d1d5db;
  --color-text: #1e293b;
  --color-text-muted: #6b7280;
  --color-text-hint: #9ca3af;
  --color-accent: #0284c7;
  --color-accent-hover: #0369a1;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;

  --color-accent-dim: rgba(2,132,199,0.10);
  --color-success-dim: rgba(22,163,74,0.10);
  --color-danger-dim: rgba(220,38,38,0.10);
  --color-warning-dim: rgba(217,119,6,0.08);
  --glow-success: 0 0 6px rgba(22,163,74,0.4);
  --glow-danger: 0 0 6px rgba(220,38,38,0.4);
  --glow-accent: 0 0 6px rgba(2,132,199,0.4);
  --chip-bg: rgba(0,0,0,0.05);

  --bg: var(--color-bg);
  --panel: var(--color-panel);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --green: var(--color-success);
  --red: var(--color-danger);
  --yellow: var(--color-warning);
  --muted: var(--color-text-muted);
  --text: var(--color-text);
  --mono: var(--font-mono);
}

/* -- Typography -- */
:root {
  --font-mono: 'Share Tech Mono', monospace;
  --font-sans: system-ui, -apple-system, sans-serif;
  --text-xs: 9px;
  --text-sm: 10px;
  --text-md: 11px;
  --text-base: 12px;
  --text-lg: 13px;
  --text-xl: 14px;
  --text-2xl: 16px;
  --text-stat: 28px;
  --tracking-tight: 0.3px;
  --tracking-normal: 0.5px;
  --tracking-wide: 1px;
  --tracking-wider: 2px;

  --leading-tight: 1.1;
  --leading-normal: 1.4;
  --leading-relaxed: 1.7;
}

/* -- Spacing -- */
:root {
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;

  --gap-panel: 12px;
  --gap-grid: 10px;
  --gap-chip: 6px;
  --gap-control: 12px;
  --padding-panel: 14px;
  --padding-card: 14px 12px;
  --padding-header: 6px 16px;
  --padding-chip: 3px 8px;
  --padding-btn: 10px 20px;
}

/* -- Border -- */
:root {
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 9999px;
  --width: 1px;
}

/* -- Effects -- */
:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --content-max-width: 1200px;
}