/* ═══════════════════════════════════════════════════════════════
   Design Tokens — Single source of truth for all repeated values
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-primary: #ff0037;
  --color-primary-hover: #c5001a;
  --color-primary-dark: #e9001e;
  --color-primary-shadow: rgba(255, 0, 55, 0.3);

  --color-text: #333;
  --color-text-dark: #212121;
  --color-text-light: #636363;
  --color-text-muted: #999;
  --color-text-body: #444;

  --color-white: #fff;
  --color-black: #1a1a1a;

  --color-bg-dark: #0c1220;
  --color-bg-dark-alt: #1a212b;
  --color-bg-light: #f5f8fc;
  --color-bg-lighter: #f6f6f6;
  --color-bg-card: #eef2f7;

  --color-border: #ddd;
  --color-border-light: #eee;

  /* ── Typography ── */
  --font-primary: 'Ubuntu', 'Open Sans', sans-serif;
  --font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;

  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing ── */
  --space-section: 80px;
  --space-section-mobile: 50px;
  --space-container: 24px;

  /* ── Layout ── */
  --max-w-content: 1200px;
  --max-w-wide: 1500px;
  --max-w-narrow: 900px;
  --max-w-hero: 860px;

  /* ── Shadows ── */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --shadow-btn: 0 4px 12px rgba(233, 0, 30, 0.3);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slide: 0.4s ease;

  /* ── Border Radius ── */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
}