:root {
  /* surface */
  --bg: #ffffff;
  --bg-muted: #f5f7f9;
  --bg-dark: #0f0f0f;
  --bg-dark-2: #1a1a1a;

  /* text */
  --fg: #1a1a1a;
  --fg-on-dark: #ffffff;
  --muted: #6c7480;
  --muted-on-dark: #a8afb8;

  /* line */
  --border: #e6e8ec;
  --border-on-dark: #262626;

  /* accents (decorative — icon backgrounds, highlights) */
  --accent-1: rgb(225, 212, 252); /* lavender */
  --accent-2: rgb(244, 220, 253); /* pink */
  --accent-3: rgb(246, 247, 191); /* citron */

  /* type */
  --font-sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-xsmall: 0.5rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.10em;

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-body: 1.6;

  /* spacing scale — base × multiplier. Use these for all padding/margin/gap. */
  --space-base: 0.25rem;
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 3);
  --space-4: calc(var(--space-base) * 4);
  --space-6: calc(var(--space-base) * 6);
  --space-8: calc(var(--space-base) * 8);
  --space-12: calc(var(--space-base) * 12);
  --space-16: calc(var(--space-base) * 16);
  --space-24: calc(var(--space-base) * 24);
  --space-32: calc(var(--space-base) * 32);

  /* layout (responsive containers, distinct from spacing scale) */
  --nav-h: 68px;
  --space-section: clamp(4rem, 6vw, 7.5rem);
  --container: 1280px;
  --container-narrow: 48rem;
  --measure: 30rem;
  --gutter: clamp(1rem, 3vw, 1.5rem);
  --card-inset: clamp(1rem, 2vw, 1.5rem);

  /* breakpoints — reference values; @media can't read custom properties,
     so these document the canonical thresholds used across the CSS */
  --bp-nav: 720px;
  --bp-stands: 880px;
  --bp-how: 920px;

  /* radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 50%;

  /* avatar */
  --avatar-md: 72px;

  /* motion */
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --marquee-speed: 4.5s;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-sans: "Inter var", "Inter", system-ui, sans-serif;
  }
}