/* ===================================================
   Snow Control System — Design Tokens
   ===================================================
   Generated from: design-tokens.json v1.1.0
   Generated at:   2026-03-25 21:42:00
   Updated:        2026-04-01 (+ sakura / starlight / candypop themes)
   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);
}

/* -- Ice (冬夜) -- */
[data-theme="ice"] {
  --color-bg: #091a2e;
  --color-panel: #0e2440;
  --color-surface: #0b1d35;
  --color-border: #163354;
  --color-text: #ddf4ff;
  --color-text-muted: #4a8ab5;
  --color-text-hint: #2d6086;
  --color-accent: #7dd3fc;
  --color-accent-hover: #bae6fd;
  --color-success: #34d399;
  --color-danger: #fb7185;
  --color-warning: #fde68a;

  --color-accent-dim: rgba(125,211,252,0.12);
  --color-success-dim: rgba(52,211,153,0.12);
  --color-danger-dim: rgba(251,113,133,0.12);
  --color-warning-dim: rgba(253,230,138,0.08);
  --glow-success: 0 0 8px rgba(52,211,153,0.5);
  --glow-danger: 0 0 8px rgba(251,113,133,0.5);
  --glow-accent: 0 0 10px rgba(125,211,252,0.6);
  --chip-bg: rgba(0,0,0,0.2);

  --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);
}

/* -- Midnight (漆黒) -- */
[data-theme="midnight"] {
  --color-bg: #000000;
  --color-panel: #0d0d0d;
  --color-surface: #080808;
  --color-border: #1f1f1f;
  --color-text: #f0fdf4;
  --color-text-muted: #4b9e78;
  --color-text-hint: #2d5a40;
  --color-accent: #10b981;
  --color-accent-hover: #34d399;
  --color-success: #10b981;
  --color-danger: #f87171;
  --color-warning: #fbbf24;

  --color-accent-dim: rgba(16,185,129,0.12);
  --color-success-dim: rgba(16,185,129,0.12);
  --color-danger-dim: rgba(248,113,113,0.12);
  --color-warning-dim: rgba(251,191,36,0.08);
  --glow-success: 0 0 10px rgba(16,185,129,0.7);
  --glow-danger: 0 0 8px rgba(248,113,113,0.6);
  --glow-accent: 0 0 12px rgba(16,185,129,0.8);
  --chip-bg: rgba(255,255,255,0.03);

  --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);
}

/* -- Warm (暖炉) -- */
[data-theme="warm"] {
  --color-bg: #1a0a00;
  --color-panel: #2e1600;
  --color-surface: #231000;
  --color-border: #4a2200;
  --color-text: #fff7ed;
  --color-text-muted: #a16207;
  --color-text-hint: #78350f;
  --color-accent: #f59e0b;
  --color-accent-hover: #fcd34d;
  --color-success: #84cc16;
  --color-danger: #f87171;
  --color-warning: #fb923c;

  --color-accent-dim: rgba(245,158,11,0.12);
  --color-success-dim: rgba(132,204,22,0.12);
  --color-danger-dim: rgba(248,113,113,0.12);
  --color-warning-dim: rgba(251,146,60,0.10);
  --glow-success: 0 0 8px rgba(132,204,22,0.5);
  --glow-danger: 0 0 8px rgba(248,113,113,0.5);
  --glow-accent: 0 0 10px rgba(245,158,11,0.7);
  --chip-bg: rgba(0,0,0,0.2);

  --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);
}

/* -- Sakura (桜ピンク) 🌸 -- */
[data-theme="sakura"] {
  --color-bg: #fff0f5;
  --color-panel: #ffffff;
  --color-surface: #fff7fa;
  --color-border: #ffd6e7;
  --color-text: #3d1a2e;
  --color-text-muted: #b07090;
  --color-text-hint: #d4a0b8;
  --color-accent: #ff4d8d;
  --color-accent-hover: #ff8fbc;
  --color-success: #2db87a;
  --color-danger: #e03030;
  --color-warning: #e07830;

  --color-accent-dim: rgba(255,77,141,0.12);
  --color-success-dim: rgba(45,184,122,0.12);
  --color-danger-dim: rgba(224,48,48,0.12);
  --color-warning-dim: rgba(224,120,48,0.08);
  --glow-success: 0 0 8px rgba(45,184,122,0.4);
  --glow-danger: 0 0 8px rgba(224,48,48,0.4);
  --glow-accent: 0 0 12px rgba(255,77,141,0.5);
  --chip-bg: rgba(255,77,141,0.06);

  --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);
}

/* 桜テーマ: 落下花びらアニメーション */
[data-theme="sakura"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,143,188,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(255,112,166,0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* -- Starlight (星空パープル) ✨ -- */
[data-theme="starlight"] {
  --color-bg: #0e0825;
  --color-panel: #160f36;
  --color-surface: #120b2e;
  --color-border: #2a1872;
  --color-text: #f0eaff;
  --color-text-muted: #7060a0;
  --color-text-hint: #4a3878;
  --color-accent: #9b6fff;
  --color-accent-hover: #c4a3ff;
  --color-success: #4de8c4;
  --color-danger: #fb6090;
  --color-warning: #ffd166;

  --color-accent-dim: rgba(155,111,255,0.15);
  --color-success-dim: rgba(77,232,196,0.12);
  --color-danger-dim: rgba(251,96,144,0.12);
  --color-warning-dim: rgba(255,209,102,0.10);
  --glow-success: 0 0 10px rgba(77,232,196,0.5);
  --glow-danger: 0 0 8px rgba(251,96,144,0.5);
  --glow-accent: 0 0 14px rgba(155,111,255,0.6);
  --chip-bg: rgba(155,111,255,0.08);

  --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);
}

/* 星空テーマ: 流れ星エフェクト */
[data-theme="starlight"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(155,111,255,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(77,232,196,0.10) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* -- Candy Pop (ビビッドポップ) 🍬 -- */
[data-theme="candypop"] {
  --color-bg: #fffdf4;
  --color-panel: #ffffff;
  --color-surface: #fffcf0;
  --color-border: #1e1022;
  --color-text: #1e1022;
  --color-text-muted: #9a80b0;
  --color-text-hint: #c4b0d8;
  --color-accent: #4da6ff;
  --color-accent-hover: #7dc0ff;
  --color-success: #4ecb71;
  --color-danger: #ff5757;
  --color-warning: #ff9f3f;

  --color-accent-dim: rgba(77,166,255,0.12);
  --color-success-dim: rgba(78,203,113,0.12);
  --color-danger-dim: rgba(255,87,87,0.12);
  --color-warning-dim: rgba(255,159,63,0.10);
  --glow-success: 0 0 8px rgba(78,203,113,0.5);
  --glow-danger: 0 0 8px rgba(255,87,87,0.5);
  --glow-accent: 0 0 10px rgba(77,166,255,0.5);
  --chip-bg: rgba(0,0,0,0.04);

  --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);
}

/* キャンディポップ: レインボーアクセントライン */
[data-theme="candypop"] header {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,#ff5757,#ff9f3f,#ffe83f,#4ecb71,#4da6ff,#c966ff,#ff6eb5) 1;
}

[data-theme="candypop"] .stat-card,
[data-theme="candypop"] .panel {
  border: 2px solid var(--color-border) !important;
  box-shadow: 3px 3px 0 var(--color-border);
}

/* -- 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;
}