:root {
  /* Color */
  --color-text-primary: #1E1E1E;
  --color-text-secondary: #757575;
  --color-text-nav-inactive: rgba(0, 0, 0, 0.5);
  --color-text-danger: #900B09;
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-secondary-active: #F0F0F0;
  --color-bg-light-yellow: #FFEBA6;
  --color-bg-light-blue: #C7E2FE;
  --color-bg-light-green: #C2EEB5;
  --color-border-subtle: #B3B3B3;

  /* Border */
  --border-default: 1px solid #D9D9D9;
  --border-active: 1.5px solid #303030;
  --border-strong: 1px solid #303030;

  /* Type */
  --font-base: 'Inter', sans-serif;
  --font-display: 'Caveat', cursive;

  --h1-size: 60px;
  --h1-weight: 700;
  --h1-line-height: 1.4;
  --h1-letter-spacing: -0.02em;

  --h2-size: 32px;
  --h2-weight: 700;
  --h2-line-height: 1.4;

  --h3-size: 24px;
  --h3-weight: 600;
  --h3-line-height: 1.4;

  --subheading-size: 20px;
  --subheading-weight: 400;
  --subheading-line-height: 1.4;

  --body-size: 16px;
  --body-weight: 400;
  --body-strong-weight: 700;
  --body-line-height: 1.4;

  --body-small-size: 14px;
  --body-small-weight: 400;
  --body-small-strong-weight: 700;
  --body-small-line-height: 1.4;

  --display-size: 24px;
  --display-weight: 400;
  --display-line-height: 1.2;

  /* Spacing */
  --space-hero: 140px;
  --space-section: 100px;
  --space-large: 60px;
  --space-medium: 40px;
  --space-medium-small: 32px;
  --space-small: 24px;
  --space-xsmall: 16px;
  --space-xxsmall: 8px;
  --space-smallest: 4px;

  /* Shadow */
  --shadow-card: 0px 4px 32px -4px rgba(0, 0, 0, 0.15);

  /* Radius */
  --radius-card: 16px;
  --radius-pill: 9999px;
  /* Not defined in tokens.md — chip/tag radius, distinct from Card (16px) and buttons (pill). Confirm against Figma. */
  --radius-chip: 8px;

  /* Layout */
  --container-max-width: 1520px;
  --side-margin-desktop: 200px;
  --side-margin-mobile: 24px;
  --grid-gutter: 24px;
  --breakpoint-mobile: 900px;
}