:root {
  --color-ink: #111111;
  --color-ink-soft: #1a1a1a;
  --color-charcoal: #1e222d;
  --color-paper: #f7f7f7;
  --color-white: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #5c5c5c;
  --color-line: rgba(17, 17, 17, 0.12);
  --color-line-light: rgba(255, 255, 255, 0.14);
  --color-overlay: rgba(10, 10, 12, 0.62);
  --color-accent: #2b5aed;
  --color-accent-hover: #1f46c7;
  --color-accent-soft: #e8eefc;

  --font-display: "Syne", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.85rem, 3.2vw, 2.5rem);
  --text-4xl: clamp(2.15rem, 4.4vw, 3.4rem);
  --text-hero: clamp(2.7rem, 7vw, 5.4rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7.5rem;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 2px;
  --shadow-soft: 0 18px 40px rgba(17, 17, 17, 0.1);
  --shadow-lift: 0 8px 24px rgba(17, 17, 17, 0.16);
  --header-height: 88px;
  --header-height-scrolled: 68px;
  --container: 1120px;
  --container-wide: 1280px;
  --z-header: 900;
  --z-mobile: 1400;
  --z-fab: 1100;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 900px) {
  :root {
    --header-height: 72px;
    --header-height-scrolled: 64px;
  }
}