:root {
  /* Primitive palette */
  --color-forest-950: #13312B;
  --color-forest-900: #203D35;
  --color-forest-800: #2B4B42;
  --color-sage-600: #5B8775;
  --color-sage-400: #8FB8A5;
  --color-mint-200: #B8D4C7;
  --color-mint-100: #D0E4DA;
  --color-ink-900: #202A35;
  --color-ink-700: #56635F;
  --color-paper-100: #FDFDF9;
  --color-paper-200: #E1E1DB;
  --color-danger-600: #9B6658;

  /* Semantic color roles */
  --color-page: var(--color-paper-100);
  --color-surface-muted: var(--color-paper-200);
  --color-surface-strong: var(--color-forest-950);
  --color-surface-hero: var(--color-forest-950);
  --color-content: var(--color-ink-900);
  --color-content-strong: var(--color-forest-950);
  --color-content-muted: #64716D;
  --color-content-on-strong: var(--color-paper-100);
  --color-accent: var(--color-sage-600);
  --color-accent-soft: var(--color-mint-200);
  --color-border: rgba(19, 49, 43, 0.16);
  --color-border-strong: rgba(91, 135, 117, 0.55);
  --color-focus: var(--color-sage-600);
  --color-content-subtle: #64716D;
  --color-content-on-accent: var(--color-forest-950);
  --color-content-on-accent-strong: #F4FBF7;
  --color-content-danger: var(--color-danger-600);

  /* Translucent surfaces and effects */
  --surface-glass: rgba(255, 255, 255, 0.24);
  --surface-glass-dark: rgba(255, 255, 255, 0.025);
  --surface-accent: rgba(91, 135, 117, 0.09);
  --surface-note: rgba(19, 49, 43, 0.045);
  --surface-on-strong: rgba(253, 253, 249, 0.08);
  --line-on-strong: rgba(253, 253, 249, 0.42);
  --ring: rgba(184, 212, 199, 0.36);
  --ring-strong: rgba(184, 212, 199, 0.62);
  --overlay-accent: rgba(91, 135, 117, 0.08);
  --overlay-strong: rgba(253, 253, 249, 0.82);

  /* Layout */
  --page-width: 1180px;
  --page-gutter: 48px;
  --layout-hero-gap: 56px;
  --layout-section-gap: 40px;
  --layout-section-space: 72px;
  --layout-content-measure: 60ch;
  --layout-copy-measure: 54ch;
  --layout-hero-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  --layout-hero-min-height: 420px;
  --layout-table-min-width: 620px;
  --radius-large: 30px;
  --radius-medium: 18px;
  --radius-small: 12px;
  --radius-pill: 999px;

  /* Type and motion */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: 700 clamp(42px, 5.4vw, 72px) / 1 var(--font-sans);
  --text-display-tracking: -0.045em;
  --text-display-brand: 700 clamp(40px, 5.2vw, 68px) / 1.04 var(--font-sans);
  --text-display-brand-tracking: -0.04em;
  --text-heading-lg: 700 clamp(30px, 3.4vw, 46px) / 1.08 var(--font-sans);
  --text-heading-lg-tracking: -0.04em;
  --text-heading-md: 650 clamp(30px, 3.4vw, 46px) / 1.08 var(--font-sans);
  --text-heading-md-tracking: -0.035em;
  --text-heading-sm: 650 18px / 1.25 var(--font-sans);
  --text-heading-sm-tracking: -0.015em;
  --text-body-lg: 400 17px / 1.8 var(--font-sans);
  --line-height-body-lg: 1.8;
  --text-body-md: 400 15px / 1.75 var(--font-sans);
  --line-height-body-md: 1.75;
  --text-body-sm: 400 13px / 1.7 var(--font-sans);
  --line-height-body-sm: 1.7;
  --text-caption: 400 11px / 1.6 var(--font-sans);
  --text-label: 800 11px / 1.3 var(--font-sans);
  --text-label-tracking: 0.14em;
  --text-label-tight-tracking: 0.12em;
  --text-label-loose-tracking: 0.15em;
  --text-nav: 700 12px / 1.3 var(--font-sans);
  --text-nav-brand: 600 13px / 1.3 var(--font-sans);
  --text-button: 800 12px / 1.3 var(--font-sans);
  --text-button-brand: 700 13px / 1.3 var(--font-sans);
  --text-hero-copy-brand: 400 17px / 1.75 var(--font-sans);
  --text-card-number: 800 12px / 1.3 var(--font-sans);
  --text-card-body-brand: 400 14px / 1.75 var(--font-sans);
  --text-pill: 600 12px / 1.3 var(--font-sans);
  --text-swatch: 700 11px / 1.3 var(--font-sans);
  --text-swatch-meta: 500 11px / 1.3 var(--font-sans);
  --text-type-label: 800 11px / 1.3 var(--font-sans);
  --text-code-meta: 700 11px / 1.3 var(--font-sans);
  --text-table-heading: 700 10px / 1.3 var(--font-sans);
  --text-table-body: 700 13px / 1.7 var(--font-sans);
  --text-mobile-display: 800 clamp(46px, 14vw, 70px) / 0.96 var(--font-sans);
  --text-mobile-body: 400 14px / 1.8 var(--font-sans);
  --text-size-compact: 10px;
  --text-size-table-compact: 12px;
  --text-step-number: 800 32px / 1 var(--font-sans);
  --text-type-display: 750 32px / 1 var(--font-sans);
  --text-type-display-tracking: -0.05em;
  --text-type-heading: 700 24px / 1.1 var(--font-sans);
  --text-type-heading-tracking: -0.035em;
  --text-type-body: 400 15px / 1.55 var(--font-sans);
  --text-code-small: 500 11px / 1.5 var(--font-mono);
  --text-emphasis: 700 13px / 1.7 var(--font-sans);
  --tracking-nav: -0.01em;
  --tracking-code: 0.06em;
  --text-mono: 500 12px / 1.8 var(--font-mono);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 0.2s;
  --shadow-panel: 0 24px 70px rgba(19, 49, 43, 0.08);
  --shadow-hover: 0 14px 36px rgba(19, 49, 43, 0.08);

  /* Brand showcase swatches */
  --swatch-forest: var(--color-forest-950);
  --swatch-sage: var(--color-sage-600);
  --swatch-mint: var(--color-mint-200);
  --swatch-ink: var(--color-ink-900);
  --swatch-paper: var(--color-paper-200);
  --swatch-ivory: var(--color-paper-100);

  /* Compatibility names used by the page styles */
  --green: var(--color-content-strong);
  --sage: var(--color-accent);
  --mint: var(--color-accent-soft);
  --charcoal: var(--color-content);
  --warm-gray: var(--color-surface-muted);
  --ivory: var(--color-page);
  --line: var(--color-border);
  --muted: var(--color-content-muted);
  --shadow: var(--shadow-panel);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-forest-950: #B8D4C7;
    --color-sage-600: #8FB8A5;
    --color-mint-200: #2B4B42;
    --color-ink-900: #E8ECE8;
    --color-paper-100: #101A17;
    --color-paper-200: #E1E1DB;
    --color-surface-muted: var(--color-paper-200);
    --color-content-muted: #AABAB3;
    --color-content-subtle: #AABAB3;
    --color-content-on-accent: #10221C;
    --color-content-on-accent-strong: #E8F5EE;
    --color-surface-hero: var(--color-forest-900);
    --color-border: rgba(184, 212, 199, 0.14);
    --surface-glass: rgba(255, 255, 255, 0.025);
    --surface-note: rgba(184, 212, 199, 0.08);
    --overlay-accent: rgba(184, 212, 199, 0.12);
    --overlay-strong: rgba(253, 253, 249, 0.86);
    --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.22);
    --shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.18);
  }
}