:root {
  --color-bg: #fbfcfe;
  --color-bg-soft: #f3f6fa;
  --color-surface: #ffffff;
  --color-surface-tint: #edf4fb;
  --color-text: #172033;
  --color-muted: #5d6878;
  --color-primary: #0f2747;
  --color-accent: #2563eb;
  --color-link: #1d4ed8;
  --color-border: #dbe3ec;
  --color-focus: #2563eb;
  --color-success: #1f7a4d;
  --color-warning: #9a6700;
  --color-danger: #b42318;

  --font-sans: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --font-size-h2: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  --font-size-h1: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --line-height-body: 1.7;
  --line-height-heading: 1.25;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --shadow-sm: 0 1px 3px rgb(15 39 71 / 0.08);
  --shadow-card: 0 0.9rem 2.4rem rgb(15 39 71 / 0.08);

  --container-max: 75rem;
  --content-max: 48rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --focus-ring: 0 0 0 3px rgb(37 99 235 / 0.28);
}