:root {
  /* ── Colors ── */
  --color-ink-black: #1a1a1a;
  --color-paper-white: #ffffff;
  --color-fog-gray: #f4f4f4;
  --color-ash-gray: #a3a3a3;
  --color-highlighter-yellow: #fbff2b;

  /* ── Font Family ── */
  --font-primary: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo,
    Monaco, Consolas, monospace;

  /* ── Type Scale ── */
  --text-caption:    14px;
  --leading-caption: 1.4;
  --tracking-caption: -0.42px;

  --text-body-sm:    16px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: -0.48px;

  --text-subheading:    20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.6px;

  --text-heading-sm:    24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.72px;

  --text-heading:    42px;
  --leading-heading: 1.1;
  --tracking-heading: -1.26px;

  /* ── Font Weights ── */
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* ── Spacing (6px base) ── */
  --spacing-unit: 6px;
  --spacing-6:    6px;
  --spacing-12:  12px;
  --spacing-16:  16px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-36:  36px;
  --spacing-48:  48px;
  --spacing-96:  96px;

  /* ── Layout ── */
  --page-max-width: 1200px;
  --section-gap:    96px;
  --card-padding:   16px;
  --element-gap:    12px;

  /* ── Border Radius ── */
  --radius-nav:     10px;
  --radius-cards:   16px;
  --radius-inputs:  10px;
  --radius-buttons: 10px;

  /* ── Surfaces ── */
  --surface-canvas:      #ffffff;
  --surface-fog-card:    #f4f4f4;
  --surface-accent-fill: #fbff2b;
}