/* public/css/variables.css — Design Tokens */
:root {
  /* === 背景層級 === */
  --bg-deepest:   #050810;
  --bg-base:      #0a0e1a;
  --bg-surface:   #111827;
  --bg-elevated:  #1e293b;
  --bg-overlay:   rgba(15, 23, 42, 0.8);

  /* === 文字層級 === */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #0f172a;

  /* === 主題色 === */
  --primary:       #6366f1;
  --primary-hover:  #818cf8;
  --primary-active: #4f46e5;
  --primary-glow:   rgba(99, 102, 241, 0.2);

  /* === 功能色 === */
  --success:  #34d399;
  --warning:  #fbbf24;
  --error:    #f87171;
  --info:     #38bdf8;

  /* === 漸層 === */
  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  --gradient-bg:    linear-gradient(135deg, #0a0e1a 0%, #1a1040 50%, #0a0e1a 100%);

  /* === 玻璃效果 === */
  --glass-bg:      rgba(17, 24, 39, 0.6);
  --glass-border:  rgba(255, 255, 255, 0.06);
  --glass-blur:    20px;

  /* === 字型 === */
  --font-sans:  'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* === 圓角 === */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* === 陰影 === */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--primary-glow);

  /* === 動畫 === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease-out;
}