/* ============================================
   variables.css — Design tokens & CSS variables
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Background layers */
  --navy:        #0a0e1a;
  --navy2:       #0f1526;
  --navy3:       #141c30;
  --card-bg:     #131b2e;
  --card-border: rgba(255, 255, 255, 0.07);

  /* Brand colors */
  --blue:        #3b82f6;
  --blue-light:  #60a5fa;
  --blue-glow:   rgba(59, 130, 246, 0.18);
  --purple:      #7c3aed;
  --green:       #10b981;
  --orange:      #f97316;
  --teal:        #06b6d4;

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* Fonts */
  --font: 'Noto Sans TC', 'PingFang HK', 'Microsoft JhengHei', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}