:root {
  /* Brand */
  --color-teal: #43b9ac;
  --color-teal-dark: #379e93;
  --color-teal-soft: #e8f7f5;
  --color-navy: #2a4f6d;
  --color-navy-deep: #091f33;
  --color-navy-deeps: #0c2d49;
  --color-navy-mid: #0c314e;
  --color-blue: #2f6bff;
  --color-blue-soft: #e8f1fa;
  --color-orange: #f4a261;
  --color-orange-dark: #e8914a;
  --color-orange-soft: #fef3e8;
  --color-gold: #c9a227;

  /* Neutrals */
  --color-white: #ffffff;
  --color-bg: #f2f8fa;
  --color-bg-alt: #eef5f8;
  --color-text: #2a4f6d;
  --color-text-secondary: #5a6b7a;
  --color-text-muted: #8a97a5;
  --color-border: #e2e8ee;
  --color-border-light: #edf1f5;

  /* Typography */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 56px;
  --fs-5xl: 60px;
  --fs-6xl: 60px;
  --lh-tight: 1.25;
  --lh-base: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Layout */
  --container: 1440px;
  --page-pad: 80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 12px;
  --shadow-card: 0 8px 28px rgba(12, 45, 73, 0.08);
  --shadow-float: 0 12px 40px rgba(12, 45, 73, 0.12);
  --header-h: 80px;
  --topbar-h: 36px;
  --transition: 0.2s ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-enter: 0.7s;
  --dur-reveal: 0.65s;
  --shadow-card-hover: 0 14px 36px rgba(12, 45, 73, 0.14);
}

@media (max-width: 768px) {
  :root {
    --page-pad: 20px;
    --fs-5xl: 40px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fs-2xl: 24px;
  }
}