/* Shared design tokens; breakpoint values match the approved design. */
:root {
  --color-white: #fff;
  --color-text: #102139;
  --color-text-muted: #59687d;
  --color-brand: #0a5bd6;
  --color-brand-hover: #0646ad;
  --color-surface-tinted: #eff5ff;
  --color-border: #dce3ed;
  --color-text-on-dark-muted: #dce3ed;
  --color-surface-dark: #0c1c32;
  --font-body: 'IBM Plex Sans','IBM Plex Sans JP',sans-serif;
  --font-mono: 'IBM Plex Mono',monospace;
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --radius-small: 3px;
}

:root {
  --content-max-width: 1200px;
  --page-gutter: 40px;
  --section-padding-block: 112px;
  --font-size-hero-heading: clamp(3rem,5.7vw,5.125rem);
  --font-size-section-heading: clamp(2rem,3.7vw,3rem);
  --header-fallback-height: 96px;
  --hero-padding-block: clamp(16px,2svh,28px);
}

@media (max-width:800px) {
  :root {
    --header-fallback-height: 80px;
  }

  :root {
    --page-gutter: 24px;
    --section-padding-block: 64px;
  }
}

@media (max-width:480px) {
  :root {
    --header-fallback-height: 76px;
    --hero-padding-block: 28px;
  }

  :root {
    --page-gutter: 20px;
  }
}