:root {
  /* color roles */
  --bg: #ffffff;
  --surface: #f3f6fb;
  --surface-2: #e9eff8;
  --border: #dce4ef;
  --border-input: #8494a8;
  --text: #0c1a2b;
  --text-muted: #55677d;
  --text-on-dark: #e9f0f8;
  --text-muted-dark: #a9b8cb;
  --accent: #c42b24;
  --accent-hover: #a52019;
  --accent-soft: #fbeae8;
  --on-accent: #ffffff;
  --danger: #b3261e;
  --success: #14735a;
  --warning: #9a6400;
  --bg-dark: #071426;
  --surface-dark: #0d2036;
  --border-dark: #213a56;
  --footer: #0a1a2e;

  /* type */
  --font-sans: "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-hero: 52px;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-card: 0 2px 6px rgba(7, 20, 38, .05), 0 12px 32px rgba(7, 20, 38, .06);
  --shadow-pop: 0 18px 48px rgba(7, 20, 38, .16);
  --shadow-glow: 0 18px 60px rgba(196, 43, 36, .28);

  /* motion */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 600ms;
  --ease: cubic-bezier(.16, .8, .24, 1);

  /* layout */
  --container: 1200px;
  --container-wide: 1320px;
  --header-h: 76px;
  --section-y: 104px;
}