:root {
  /* Brand colours */
  --color-primary: #123f6d;
  --color-primary-dark: #0a2846;
  --color-primary-light: #1f5c97;
  --color-primary-tint: #e8eff7;
  --color-accent: #b8955a;
  --color-accent-dark: #96773f;
  --color-accent-tint: #f6f0e4;
  --color-whatsapp: #1f9d55;

  /* Neutrals */
  --color-text: #1d2733;
  --color-text-muted: #5a6675;
  --color-heading: #0f2a47;
  --color-border: #dfe5ec;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f7fb;
  --color-bg-dark: #0b2238;
  --color-white: #ffffff;
  --color-error: #c0392b;
  --color-success: #1e8449;

  /* Typography */
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --lh-tight: 1.3;
  --lh-base: 1.8;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --tracking-wide: 0.08em;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 860px;
  --container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-top-h: 130px;
  --header-top-h-scrolled: 64px;
  --nav-h: 54px;
  --sidebar-w: 320px;

  /* Shape & depth */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(15, 42, 71, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 42, 71, 0.1);
  --shadow-lg: 0 18px 48px rgba(15, 42, 71, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 700ms;

  /* Layers */
  --z-header: 100;
  --z-backdrop: 150;
  --z-drawer: 200;
  --z-float: 90;
}