/* @mctlhq/css 0.7.0 — raw tokens + semantic theme layer. */
:root {
  --mctl-color-ink: #0a0b0d;
  --mctl-color-ink2: #0f1114;
  --mctl-color-ink3: #15181d;
  --mctl-color-line: #1f242b;
  --mctl-color-line2: #2a313a;
  --mctl-color-fg: #e6e7e9;
  --mctl-color-fg2: #a4a8ae;
  --mctl-color-fg3: #7d828b;
  --mctl-color-paper: #f1ede4;
  --mctl-color-paper-elevated: #f7f4ec;
  --mctl-color-paper-card: #fffdf8;
  --mctl-color-paper-ink: #15181d;
  --mctl-color-paper-fg: #3a3f47;
  --mctl-color-paper-line: #d8d2c4;
  --mctl-color-paper-line-strong: #c4bcae;
  --mctl-color-paper-fg-subtle: #656a73;
  --mctl-color-terracotta: #e25a3c;
  --mctl-color-terracotta-highlight: #ff8a6a;
  --mctl-color-terracotta-deep: #b83d28;
  --mctl-color-terracotta-deeper: #9a3220;
  --mctl-color-terracotta-soft: #f6e4dc;
  --mctl-color-terracotta-soft-dark: #241512;
  --mctl-color-terracotta-fg-light: #fff8f3;
  --mctl-color-cyan: #1ab3c7;
  --mctl-color-cyan-highlight: #5ed4e0;
  --mctl-color-cyan-deep: #017585;
  --mctl-color-cyan-deeper: #0a5c68;
  --mctl-color-cyan-soft: #d4f4f7;
  --mctl-color-cyan-soft-dark: #0c1f23;
  --mctl-color-lime: #bdf24a;
  --mctl-color-lime-highlight: #dcff8c;
  --mctl-color-lime-deep: #527400;
  --mctl-color-lime-deeper: #3e5e00;
  --mctl-color-lime-soft: #f0f8d4;
  --mctl-color-lime-soft-dark: #202714;
  --mctl-color-lime-fg-light: #f7fce8;
  --mctl-color-lilac: #b07aff;
  --mctl-color-lilac-highlight: #d6b3ff;
  --mctl-color-lilac-deep: #6b3cc4;
  --mctl-color-lilac-deeper: #552e9e;
  --mctl-color-lilac-soft: #efe4ff;
  --mctl-color-lilac-soft-dark: #1e192a;
  --mctl-color-lilac-fg-light: #f8f4ff;
  --mctl-color-vermilion: #e25a3c;
  --mctl-color-vermilion-highlight: #ff8a6a;
  --mctl-color-ok: #7cf2a4;
  --mctl-color-warn: #f5a524;
  --mctl-color-bad: #ff6b6b;
  --mctl-color-ok-deep: #2a7846;
  --mctl-color-warn-deep: #ae4e00;
  --mctl-color-bad-deep: #c23b3b;
  --mctl-color-syntax-key: #7ec8c8;
  --mctl-color-syntax-string: #c4a35a;
  --mctl-color-syntax-number: #e08b5a;
  --mctl-color-syntax-keyword: #8b7ec8;
  --mctl-color-syntax-punctuation: #7d828b;
  --mctl-color-syntax-key-deep: #287576;
  --mctl-color-syntax-string-deep: #856515;
  --mctl-color-syntax-number-deep: #a45521;
  --mctl-color-syntax-keyword-deep: #6e60a8;
  --mctl-hue-terracotta-50: #fdf1ee;
  --mctl-hue-terracotta-100: #f6e4dc;
  --mctl-hue-terracotta-200: #f5c4b4;
  --mctl-hue-terracotta-300: #f09a82;
  --mctl-hue-terracotta-400: #ff8a6a;
  --mctl-hue-terracotta-500: #e25a3c;
  --mctl-hue-terracotta-600: #b83d28;
  --mctl-hue-terracotta-700: #9a3220;
  --mctl-hue-terracotta-800: #7a2719;
  --mctl-hue-terracotta-900: #4f1810;
  --mctl-hue-cyan-50: #eef9fb;
  --mctl-hue-cyan-100: #d4f4f7;
  --mctl-hue-cyan-200: #a8e8ee;
  --mctl-hue-cyan-300: #5ed4e0;
  --mctl-hue-cyan-400: #2ec4d4;
  --mctl-hue-cyan-500: #1ab3c7;
  --mctl-hue-cyan-600: #0e7a8a;
  --mctl-hue-cyan-700: #0a5c68;
  --mctl-hue-cyan-800: #084850;
  --mctl-hue-cyan-900: #052e34;
  --mctl-hue-lime-50: #f7fce8;
  --mctl-hue-lime-100: #f0f8d4;
  --mctl-hue-lime-200: #dcff8c;
  --mctl-hue-lime-300: #c8f86a;
  --mctl-hue-lime-400: #bdf24a;
  --mctl-hue-lime-500: #9ad42a;
  --mctl-hue-lime-600: #6b8f14;
  --mctl-hue-lime-700: #547110;
  --mctl-hue-lime-800: #3d520c;
  --mctl-hue-lime-900: #283608;
  --mctl-hue-lilac-50: #f7f2ff;
  --mctl-hue-lilac-100: #efe4ff;
  --mctl-hue-lilac-200: #d6b3ff;
  --mctl-hue-lilac-300: #c496ff;
  --mctl-hue-lilac-400: #b07aff;
  --mctl-hue-lilac-500: #8f52e8;
  --mctl-hue-lilac-600: #6b3cc4;
  --mctl-hue-lilac-700: #552e9e;
  --mctl-hue-lilac-800: #3f2276;
  --mctl-hue-lilac-900: #2a1750;
  --mctl-surface-dark-bg: #0a0b0d;
  --mctl-surface-dark-elevated: #0f1114;
  --mctl-surface-dark-card: #15181d;
  --mctl-surface-dark-line: #1f242b;
  --mctl-surface-dark-line-strong: #2a313a;
  --mctl-surface-dark-fg: #e6e7e9;
  --mctl-surface-dark-fg-muted: #a4a8ae;
  --mctl-surface-dark-fg-subtle: #7d828b;
  --mctl-surface-light-bg: #f1ede4;
  --mctl-surface-light-elevated: #f7f4ec;
  --mctl-surface-light-card: #fffdf8;
  --mctl-surface-light-line: #d8d2c4;
  --mctl-surface-light-line-strong: #c4bcae;
  --mctl-surface-light-fg: #15181d;
  --mctl-surface-light-fg-muted: #3a3f47;
  --mctl-surface-light-fg-subtle: #656a73;
  --mctl-accent-terracotta-dark-primary: #e25a3c;
  --mctl-accent-terracotta-dark-highlight: #ff8a6a;
  --mctl-accent-terracotta-dark-fg: #0a0b0d;
  --mctl-accent-terracotta-dark-soft: #241512;
  --mctl-accent-terracotta-light-primary: #b83d28;
  --mctl-accent-terracotta-light-highlight: #9a3220;
  --mctl-accent-terracotta-light-fg: #fff8f3;
  --mctl-accent-terracotta-light-soft: #f6e4dc;
  --mctl-accent-vermilion-dark-primary: #e25a3c;
  --mctl-accent-vermilion-dark-highlight: #ff8a6a;
  --mctl-accent-vermilion-dark-fg: #0a0b0d;
  --mctl-accent-vermilion-dark-soft: #241512;
  --mctl-accent-vermilion-light-primary: #b83d28;
  --mctl-accent-vermilion-light-highlight: #9a3220;
  --mctl-accent-vermilion-light-fg: #fff8f3;
  --mctl-accent-vermilion-light-soft: #f6e4dc;
  --mctl-accent-cyan-dark-primary: #1ab3c7;
  --mctl-accent-cyan-dark-highlight: #5ed4e0;
  --mctl-accent-cyan-dark-fg: #0a0b0d;
  --mctl-accent-cyan-dark-soft: #0c1f23;
  --mctl-accent-cyan-light-primary: #017585;
  --mctl-accent-cyan-light-highlight: #0a5c68;
  --mctl-accent-cyan-light-fg: #f1ede4;
  --mctl-accent-cyan-light-soft: #d4f4f7;
  --mctl-accent-lime-dark-primary: #bdf24a;
  --mctl-accent-lime-dark-highlight: #dcff8c;
  --mctl-accent-lime-dark-fg: #0a0b0d;
  --mctl-accent-lime-dark-soft: #202714;
  --mctl-accent-lime-light-primary: #527400;
  --mctl-accent-lime-light-highlight: #3e5e00;
  --mctl-accent-lime-light-fg: #f7fce8;
  --mctl-accent-lime-light-soft: #f0f8d4;
  --mctl-accent-lilac-dark-primary: #b07aff;
  --mctl-accent-lilac-dark-highlight: #d6b3ff;
  --mctl-accent-lilac-dark-fg: #0a0b0d;
  --mctl-accent-lilac-dark-soft: #1e192a;
  --mctl-accent-lilac-light-primary: #6b3cc4;
  --mctl-accent-lilac-light-highlight: #552e9e;
  --mctl-accent-lilac-light-fg: #f8f4ff;
  --mctl-accent-lilac-light-soft: #efe4ff;
  --mctl-status-dark-ok: #7cf2a4;
  --mctl-status-dark-warn: #f5a524;
  --mctl-status-dark-bad: #ff6b6b;
  --mctl-status-light-ok: #2a7846;
  --mctl-status-light-warn: #ae4e00;
  --mctl-status-light-bad: #c23b3b;
  --mctl-syntax-dark-key: #7ec8c8;
  --mctl-syntax-dark-string: #c4a35a;
  --mctl-syntax-dark-number: #e08b5a;
  --mctl-syntax-dark-keyword: #8b7ec8;
  --mctl-syntax-dark-punctuation: #7d828b;
  --mctl-syntax-dark-comment: #7d828b;
  --mctl-syntax-light-key: #287576;
  --mctl-syntax-light-string: #856515;
  --mctl-syntax-light-number: #a45521;
  --mctl-syntax-light-keyword: #6e60a8;
  --mctl-syntax-light-punctuation: #656a73;
  --mctl-syntax-light-comment: #656a73;
  --mctl-typography-public-text-hero-size: clamp(35.2px, 4.5vw, 68px);
  --mctl-typography-public-text-hero-weight: 800;
  --mctl-typography-public-text-hero-leading: 1.1;
  --mctl-typography-public-text-hero-tracking: -0.02em;
  --mctl-typography-public-text-docs-hero-size: clamp(32px, 4.5vw, 56px);
  --mctl-typography-public-text-docs-hero-weight: 800;
  --mctl-typography-public-text-docs-hero-leading: 1.15;
  --mctl-typography-public-text-docs-hero-tracking: -0.02em;
  --mctl-typography-public-text-section-size: clamp(28px, 4vw, 48px);
  --mctl-typography-public-text-section-weight: 800;
  --mctl-typography-public-text-section-leading: 1.2;
  --mctl-typography-public-text-section-tracking: -0.02em;
  --mctl-typography-public-text-title-size: 24px;
  --mctl-typography-public-text-title-weight: 700;
  --mctl-typography-public-text-title-leading: 1.3;
  --mctl-typography-public-text-title-tracking: 0;
  --mctl-typography-public-text-subtitle-size: clamp(18px, 1.7vw, 24px);
  --mctl-typography-public-text-subtitle-weight: 400;
  --mctl-typography-public-text-subtitle-leading: 1.6;
  --mctl-typography-public-text-subtitle-tracking: 0;
  --mctl-typography-public-text-body-size: 16px;
  --mctl-typography-public-text-body-weight: 400;
  --mctl-typography-public-text-body-leading: 1.6;
  --mctl-typography-public-text-body-tracking: 0;
  --mctl-typography-public-text-small-size: 14px;
  --mctl-typography-public-text-small-weight: 400;
  --mctl-typography-public-text-small-leading: 1.6;
  --mctl-typography-public-text-small-tracking: 0;
  --mctl-typography-public-text-caption-size: 13px;
  --mctl-typography-public-text-caption-weight: 400;
  --mctl-typography-public-text-caption-leading: 1.5;
  --mctl-typography-public-text-caption-tracking: 0;
  --mctl-typography-public-text-micro-size: 12px;
  --mctl-typography-public-text-micro-weight: 400;
  --mctl-typography-public-text-micro-leading: 1.4;
  --mctl-typography-public-text-micro-tracking: 0;
  --mctl-typography-public-text-label-size: 15.2px;
  --mctl-typography-public-text-label-weight: 500;
  --mctl-typography-public-text-label-leading: 1.6;
  --mctl-typography-public-text-label-tracking: 0;
  --mctl-typography-public-text-marker-size: 13px;
  --mctl-typography-public-text-marker-weight: 500;
  --mctl-typography-public-text-marker-leading: 1.4;
  --mctl-typography-public-text-marker-tracking: 0.12em;
  --mctl-typography-public-text-code-size: 14px;
  --mctl-typography-public-text-code-weight: 400;
  --mctl-typography-public-text-code-leading: 1.6;
  --mctl-typography-public-text-code-tracking: 0;
  --mctl-typography-public-text-prose-size: 16px;
  --mctl-typography-public-text-prose-weight: 400;
  --mctl-typography-public-text-prose-leading: 1.75;
  --mctl-typography-public-text-prose-tracking: 0;
  --mctl-typography-public-text-prose-title-size: 32px;
  --mctl-typography-public-text-prose-title-weight: 800;
  --mctl-typography-public-text-prose-title-leading: 1.25;
  --mctl-typography-public-text-prose-title-tracking: -0.02em;
  --mctl-typography-public-text-prose-section-size: 24px;
  --mctl-typography-public-text-prose-section-weight: 700;
  --mctl-typography-public-text-prose-section-leading: 1.4;
  --mctl-typography-public-text-prose-section-tracking: -0.02em;
  --mctl-typography-public-text-prose-subsection-size: 20px;
  --mctl-typography-public-text-prose-subsection-weight: 600;
  --mctl-typography-public-text-prose-subsection-leading: 1.4;
  --mctl-typography-public-text-prose-subsection-tracking: 0;
  --mctl-typography-font-family-display: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --mctl-typography-font-family-editorial: 'Instrument Serif', Georgia, serif;
  --mctl-typography-font-weight-light: 300;
  --mctl-typography-font-weight-regular: 400;
  --mctl-typography-font-weight-medium: 500;
  --mctl-typography-font-weight-semibold: 600;
  --mctl-typography-font-weight-bold: 700;
  --mctl-typography-font-weight-extrabold: 800;
  --mctl-typography-font-size-marker: clamp(11px, 0.78vw, 12px);
  --mctl-typography-font-size-body: clamp(15px, 1.05vw, 16px);
  --mctl-typography-font-size-lede: clamp(18px, 1.4vw, 20px);
  --mctl-typography-font-size-stat: clamp(40px, 4vw, 56px);
  --mctl-typography-font-size-section-title: clamp(28px, 3.6vw, 56px);
  --mctl-typography-font-size-hero: clamp(48px, 8.4vw, 132px);
  --mctl-typography-font-size-xs: 12px;
  --mctl-typography-font-size-sm: 13px;
  --mctl-typography-font-size-base: 15px;
  --mctl-typography-font-size-md: 16px;
  --mctl-typography-font-size-lg: 18px;
  --mctl-typography-font-size-xl: 20px;
  --mctl-typography-font-size-2xl: 24px;
  --mctl-typography-font-size-3xl: 32px;
  --mctl-typography-line-height-hero: 0.92;
  --mctl-typography-line-height-section-title: 1.05;
  --mctl-typography-line-height-lede: 1.55;
  --mctl-typography-line-height-body: 1.5;
  --mctl-typography-line-height-caption: 1.4;
  --mctl-typography-line-height-tight: 1.2;
  --mctl-typography-line-height-none: 1;
  --mctl-typography-letter-spacing-hero: -0.02em;
  --mctl-typography-letter-spacing-marker: 0.12em;
  --mctl-typography-letter-spacing-normal: 0;
  --mctl-typography-text-hero-family: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-text-hero-size: clamp(48px, 8.4vw, 132px);
  --mctl-typography-text-hero-weight: 600;
  --mctl-typography-text-hero-line-height: 0.92;
  --mctl-typography-text-hero-letter-spacing: -0.02em;
  --mctl-typography-text-title-family: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-text-title-size: 32px;
  --mctl-typography-text-title-weight: 600;
  --mctl-typography-text-title-line-height: 1.05;
  --mctl-typography-text-title-letter-spacing: -0.02em;
  --mctl-typography-text-section-family: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-text-section-size: clamp(28px, 3.6vw, 56px);
  --mctl-typography-text-section-weight: 600;
  --mctl-typography-text-section-line-height: 1.05;
  --mctl-typography-text-section-letter-spacing: -0.02em;
  --mctl-typography-text-lede-family: 'Instrument Serif', Georgia, serif;
  --mctl-typography-text-lede-size: clamp(18px, 1.4vw, 20px);
  --mctl-typography-text-lede-weight: 400;
  --mctl-typography-text-lede-line-height: 1.55;
  --mctl-typography-text-lede-letter-spacing: 0;
  --mctl-typography-text-body-family: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-text-body-size: clamp(15px, 1.05vw, 16px);
  --mctl-typography-text-body-weight: 400;
  --mctl-typography-text-body-line-height: 1.5;
  --mctl-typography-text-body-letter-spacing: 0;
  --mctl-typography-text-body-muted-family: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-text-body-muted-size: clamp(15px, 1.05vw, 16px);
  --mctl-typography-text-body-muted-weight: 400;
  --mctl-typography-text-body-muted-line-height: 1.5;
  --mctl-typography-text-body-muted-letter-spacing: 0;
  --mctl-typography-text-caption-family: 'Onest', system-ui, -apple-system, sans-serif;
  --mctl-typography-text-caption-size: 13px;
  --mctl-typography-text-caption-weight: 400;
  --mctl-typography-text-caption-line-height: 1.4;
  --mctl-typography-text-caption-letter-spacing: 0;
  --mctl-typography-text-marker-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --mctl-typography-text-marker-size: clamp(11px, 0.78vw, 12px);
  --mctl-typography-text-marker-weight: 500;
  --mctl-typography-text-marker-line-height: 1.2;
  --mctl-typography-text-marker-letter-spacing: 0.12em;
  --mctl-typography-text-code-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --mctl-typography-text-code-size: 13px;
  --mctl-typography-text-code-weight: 400;
  --mctl-typography-text-code-line-height: 1.5;
  --mctl-typography-text-code-letter-spacing: 0;
  --mctl-typography-text-stat-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --mctl-typography-text-stat-size: clamp(40px, 4vw, 56px);
  --mctl-typography-text-stat-weight: 400;
  --mctl-typography-text-stat-line-height: 1;
  --mctl-typography-text-stat-letter-spacing: 0;
  --mctl-space-0: 0;
  --mctl-space-1: 4px;
  --mctl-space-2: 8px;
  --mctl-space-3: 12px;
  --mctl-space-4: 16px;
  --mctl-space-5: 24px;
  --mctl-space-6: 32px;
  --mctl-space-7: 48px;
  --mctl-space-8: 64px;
  --mctl-space-9: 96px;
  --mctl-space-10: 132px;
  --mctl-space-20: 20px;
  --mctl-space-40: 40px;
  --mctl-space-80: 80px;
  --mctl-layout-page-padding: clamp(20px, 4vw, 56px);
  --mctl-layout-section-padding: clamp(72px, 9vw, 132px);
  --mctl-layout-gutter: 20px;
  --mctl-layout-stack: 24px;
  --mctl-layout-prose-width: 720px;
  --mctl-layout-page-width: 1400px;
  --mctl-layout-site-header-height: 80px;
  --mctl-layout-site-header-blur: 12px;
  --mctl-layout-site-wordmark-size: 24px;
  --mctl-layout-site-wordmark-weight: 800;
  --mctl-layout-site-wordmark-tracking: 2px;
  --mctl-layout-site-wordmark-accent-gap: 2px;
  --mctl-layout-site-nav-size: 0.95rem;
  --mctl-layout-site-nav-weight: 500;
  --mctl-radius-none: 0;
  --mctl-radius-sm: 2px;
  --mctl-radius-md: 4px;
  --mctl-radius-lg: 8px;
  --mctl-radius-xl: 12px;
  --mctl-radius-2xl: 16px;
  --mctl-radius-pill: 999px;
  --mctl-shadow-dark-none: none;
  --mctl-shadow-dark-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --mctl-shadow-dark-md: 0 8px 24px rgba(0, 0, 0, 0.36);
  --mctl-shadow-dark-overlay: 0 16px 48px rgba(0, 0, 0, 0.48);
  --mctl-shadow-light-none: none;
  --mctl-shadow-light-sm: 0 2px 8px rgba(40, 32, 24, 0.06);
  --mctl-shadow-light-md: 0 8px 24px rgba(40, 32, 24, 0.08);
  --mctl-shadow-light-overlay: 0 16px 40px rgba(40, 32, 24, 0.12);
  --mctl-z-index-base: 0;
  --mctl-z-index-sticky: 100;
  --mctl-z-index-nav: 200;
  --mctl-z-index-dropdown: 400;
  --mctl-z-index-overlay: 800;
  --mctl-z-index-modal: 900;
  --mctl-z-index-toast: 1000;
  --mctl-motion-duration-instant: 0ms;
  --mctl-motion-duration-fast: 120ms;
  --mctl-motion-duration-base: 200ms;
  --mctl-motion-duration-slow: 320ms;
  --mctl-motion-duration-emphasis: 480ms;
  --mctl-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mctl-motion-easing-entrance: cubic-bezier(0, 0, 0, 1);
  --mctl-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --mctl-border-width-none: 0;
  --mctl-border-width-hairline: 1px;
  --mctl-border-width-thick: 2px;
  --mctl-breakpoint-sm: 640px;
  --mctl-breakpoint-md: 768px;
  --mctl-breakpoint-lg: 1024px;
  --mctl-breakpoint-xl: 1280px;
  --mctl-breakpoint-2xl: 1440px;
  --mctl-icon-xs: 12px;
  --mctl-icon-sm: 16px;
  --mctl-icon-md: 20px;
  --mctl-icon-lg: 24px;
  --mctl-icon-xl: 32px;
  --mctl-opacity-hover: 0.08;
  --mctl-opacity-disabled: 0.45;
  --mctl-opacity-scrim: 0.56;
  --mctl-focus-ring-width: 2px;
  --mctl-focus-ring-offset: 2px;
  --mctl-control-height-sm: 32px;
  --mctl-control-height-md: 40px;
  --mctl-control-height-lg: 48px;
}

/*
 * Semantic theme layer. Maps raw --mctl-* tokens (inlined above this block
 * by the build) onto stable, theme-aware variables.
 *
 *   data-theme  = "dark" (default) | "light"   — surface flip
 *   data-accent = "terracotta" (default) | "cyan" | "lime" | "lilac" | "vermilion"
 *                 vermilion is a public alias of terracotta.
 */
:root,
[data-theme='dark'] {
  /* Surface — dark "Engineering" is the default. */
  --surface-bg: var(--mctl-surface-dark-bg);
  --surface-elevated: var(--mctl-surface-dark-elevated);
  --surface-card: var(--mctl-surface-dark-card);
  --surface-line: var(--mctl-surface-dark-line);
  --surface-line-strong: var(--mctl-surface-dark-line-strong);
  --surface-fg: var(--mctl-surface-dark-fg);
  --surface-fg-muted: var(--mctl-surface-dark-fg-muted);
  --surface-fg-subtle: var(--mctl-surface-dark-fg-subtle);

  /* Accent — terracotta is the default. */
  --accent: var(--mctl-accent-terracotta-dark-primary);
  --accent-highlight: var(--mctl-accent-terracotta-dark-highlight);
  --accent-fg: var(--mctl-accent-terracotta-dark-fg);
  --accent-soft: var(--mctl-accent-terracotta-dark-soft);

  /* Named accent primaries for Tailwind swatches (bg-accent-cyan, etc.). */
  --accent-terracotta: var(--mctl-accent-terracotta-dark-primary);
  --accent-cyan: var(--mctl-accent-cyan-dark-primary);
  --accent-lime: var(--mctl-accent-lime-dark-primary);
  --accent-lilac: var(--mctl-accent-lilac-dark-primary);

  /* Status. */
  --status-ok: var(--mctl-status-dark-ok);
  --status-warn: var(--mctl-status-dark-warn);
  --status-bad: var(--mctl-status-dark-bad);

  /* Syntax. */
  --syntax-key: var(--mctl-syntax-dark-key);
  --syntax-string: var(--mctl-syntax-dark-string);
  --syntax-number: var(--mctl-syntax-dark-number);
  --syntax-keyword: var(--mctl-syntax-dark-keyword);
  --syntax-punctuation: var(--mctl-syntax-dark-punctuation);
  --syntax-comment: var(--mctl-syntax-dark-comment);

  /* Elevation. */
  --shadow-sm: var(--mctl-shadow-dark-sm);
  --shadow-md: var(--mctl-shadow-dark-md);
  --shadow-overlay: var(--mctl-shadow-dark-overlay);

  /* Focus ring follows the active accent. */
  --focus-ring: var(--accent);
  --focus-ring-width: var(--mctl-focus-ring-width);
  --focus-ring-offset: var(--mctl-focus-ring-offset);

  /* Public site shell: shared by the landing site and documentation adapters. */
  --site-header-height: var(--mctl-layout-site-header-height);
  --site-header-bg: color-mix(in srgb, var(--surface-bg) 80%, transparent);
  --site-header-blur: var(--mctl-layout-site-header-blur);
  --site-header-border: var(--surface-line);
  --site-content-width: var(--mctl-layout-page-width);
  --site-gutter: var(--mctl-layout-gutter);
  --site-wordmark-size: var(--mctl-layout-site-wordmark-size);
  --site-wordmark-weight: var(--mctl-layout-site-wordmark-weight);
  --site-wordmark-tracking: var(--mctl-layout-site-wordmark-tracking);
  --site-wordmark-accent-gap: var(--mctl-layout-site-wordmark-accent-gap);
  --site-nav-size: var(--mctl-layout-site-nav-size);
  --site-nav-weight: var(--mctl-layout-site-nav-weight);

  /* Type families. */
  --font-display: var(--mctl-typography-font-family-display);
  --font-mono: var(--mctl-typography-font-family-mono);
  --font-editorial: var(--mctl-typography-font-family-editorial);
}

[data-theme='light'] {
  --site-header-bg: color-mix(in srgb, var(--surface-bg) 80%, transparent);
  --site-header-border: var(--surface-line);
  --surface-bg: var(--mctl-surface-light-bg);
  --surface-elevated: var(--mctl-surface-light-elevated);
  --surface-card: var(--mctl-surface-light-card);
  --surface-line: var(--mctl-surface-light-line);
  --surface-line-strong: var(--mctl-surface-light-line-strong);
  --surface-fg: var(--mctl-surface-light-fg);
  --surface-fg-muted: var(--mctl-surface-light-fg-muted);
  --surface-fg-subtle: var(--mctl-surface-light-fg-subtle);

  --accent: var(--mctl-accent-terracotta-light-primary);
  --accent-highlight: var(--mctl-accent-terracotta-light-highlight);
  --accent-fg: var(--mctl-accent-terracotta-light-fg);
  --accent-soft: var(--mctl-accent-terracotta-light-soft);

  --accent-terracotta: var(--mctl-accent-terracotta-light-primary);
  --accent-cyan: var(--mctl-accent-cyan-light-primary);
  --accent-lime: var(--mctl-accent-lime-light-primary);
  --accent-lilac: var(--mctl-accent-lilac-light-primary);

  --status-ok: var(--mctl-status-light-ok);
  --status-warn: var(--mctl-status-light-warn);
  --status-bad: var(--mctl-status-light-bad);

  --syntax-key: var(--mctl-syntax-light-key);
  --syntax-string: var(--mctl-syntax-light-string);
  --syntax-number: var(--mctl-syntax-light-number);
  --syntax-keyword: var(--mctl-syntax-light-keyword);
  --syntax-punctuation: var(--mctl-syntax-light-punctuation);
  --syntax-comment: var(--mctl-syntax-light-comment);

  --shadow-sm: var(--mctl-shadow-light-sm);
  --shadow-md: var(--mctl-shadow-light-md);
  --shadow-overlay: var(--mctl-shadow-light-overlay);
}

[data-accent='terracotta'],
[data-accent='vermilion'] {
  --accent: var(--mctl-accent-terracotta-dark-primary);
  --accent-highlight: var(--mctl-accent-terracotta-dark-highlight);
  --accent-fg: var(--mctl-accent-terracotta-dark-fg);
  --accent-soft: var(--mctl-accent-terracotta-dark-soft);
}

[data-theme='light'][data-accent='terracotta'],
[data-theme='light'][data-accent='vermilion'] {
  --accent: var(--mctl-accent-terracotta-light-primary);
  --accent-highlight: var(--mctl-accent-terracotta-light-highlight);
  --accent-fg: var(--mctl-accent-terracotta-light-fg);
  --accent-soft: var(--mctl-accent-terracotta-light-soft);
}

[data-accent='cyan'] {
  --accent: var(--mctl-accent-cyan-dark-primary);
  --accent-highlight: var(--mctl-accent-cyan-dark-highlight);
  --accent-fg: var(--mctl-accent-cyan-dark-fg);
  --accent-soft: var(--mctl-accent-cyan-dark-soft);
}

[data-theme='light'][data-accent='cyan'] {
  --accent: var(--mctl-accent-cyan-light-primary);
  --accent-highlight: var(--mctl-accent-cyan-light-highlight);
  --accent-fg: var(--mctl-accent-cyan-light-fg);
  --accent-soft: var(--mctl-accent-cyan-light-soft);
}

[data-accent='lime'] {
  --accent: var(--mctl-accent-lime-dark-primary);
  --accent-highlight: var(--mctl-accent-lime-dark-highlight);
  --accent-fg: var(--mctl-accent-lime-dark-fg);
  --accent-soft: var(--mctl-accent-lime-dark-soft);
}

[data-theme='light'][data-accent='lime'] {
  --accent: var(--mctl-accent-lime-light-primary);
  --accent-highlight: var(--mctl-accent-lime-light-highlight);
  --accent-fg: var(--mctl-accent-lime-light-fg);
  --accent-soft: var(--mctl-accent-lime-light-soft);
}

[data-accent='lilac'] {
  --accent: var(--mctl-accent-lilac-dark-primary);
  --accent-highlight: var(--mctl-accent-lilac-dark-highlight);
  --accent-fg: var(--mctl-accent-lilac-dark-fg);
  --accent-soft: var(--mctl-accent-lilac-dark-soft);
}

[data-theme='light'][data-accent='lilac'] {
  --accent: var(--mctl-accent-lilac-light-primary);
  --accent-highlight: var(--mctl-accent-lilac-light-highlight);
  --accent-fg: var(--mctl-accent-lilac-light-fg);
  --accent-soft: var(--mctl-accent-lilac-light-soft);
}

/* Public typography is shared; adapters own document structure and spacing. */
:root {
  --text-hero-size: var(--mctl-typography-public-text-hero-size);
  --text-hero-weight: var(--mctl-typography-public-text-hero-weight);
  --text-hero-leading: var(--mctl-typography-public-text-hero-leading);
  --text-hero-tracking: var(--mctl-typography-public-text-hero-tracking);
  --text-docs-hero-size: var(--mctl-typography-public-text-docs-hero-size);
  --text-docs-hero-weight: var(--mctl-typography-public-text-docs-hero-weight);
  --text-docs-hero-leading: var(--mctl-typography-public-text-docs-hero-leading);
  --text-docs-hero-tracking: var(--mctl-typography-public-text-docs-hero-tracking);
  --text-section-size: var(--mctl-typography-public-text-section-size);
  --text-section-weight: var(--mctl-typography-public-text-section-weight);
  --text-section-leading: var(--mctl-typography-public-text-section-leading);
  --text-section-tracking: var(--mctl-typography-public-text-section-tracking);
  --text-title-size: var(--mctl-typography-public-text-title-size);
  --text-title-weight: var(--mctl-typography-public-text-title-weight);
  --text-title-leading: var(--mctl-typography-public-text-title-leading);
  --text-title-tracking: var(--mctl-typography-public-text-title-tracking);
  --text-subtitle-size: var(--mctl-typography-public-text-subtitle-size);
  --text-subtitle-weight: var(--mctl-typography-public-text-subtitle-weight);
  --text-subtitle-leading: var(--mctl-typography-public-text-subtitle-leading);
  --text-subtitle-tracking: var(--mctl-typography-public-text-subtitle-tracking);
  --text-body-size: var(--mctl-typography-public-text-body-size);
  --text-body-weight: var(--mctl-typography-public-text-body-weight);
  --text-body-leading: var(--mctl-typography-public-text-body-leading);
  --text-body-tracking: var(--mctl-typography-public-text-body-tracking);
  --text-small-size: var(--mctl-typography-public-text-small-size);
  --text-small-weight: var(--mctl-typography-public-text-small-weight);
  --text-small-leading: var(--mctl-typography-public-text-small-leading);
  --text-small-tracking: var(--mctl-typography-public-text-small-tracking);
  --text-caption-size: var(--mctl-typography-public-text-caption-size);
  --text-caption-weight: var(--mctl-typography-public-text-caption-weight);
  --text-caption-leading: var(--mctl-typography-public-text-caption-leading);
  --text-caption-tracking: var(--mctl-typography-public-text-caption-tracking);
  --text-micro-size: var(--mctl-typography-public-text-micro-size);
  --text-micro-weight: var(--mctl-typography-public-text-micro-weight);
  --text-micro-leading: var(--mctl-typography-public-text-micro-leading);
  --text-micro-tracking: var(--mctl-typography-public-text-micro-tracking);
  --text-label-size: var(--mctl-typography-public-text-label-size);
  --text-label-weight: var(--mctl-typography-public-text-label-weight);
  --text-label-leading: var(--mctl-typography-public-text-label-leading);
  --text-label-tracking: var(--mctl-typography-public-text-label-tracking);
  --text-marker-size: var(--mctl-typography-public-text-marker-size);
  --text-marker-weight: var(--mctl-typography-public-text-marker-weight);
  --text-marker-leading: var(--mctl-typography-public-text-marker-leading);
  --text-marker-tracking: var(--mctl-typography-public-text-marker-tracking);
  --text-code-size: var(--mctl-typography-public-text-code-size);
  --text-code-weight: var(--mctl-typography-public-text-code-weight);
  --text-code-leading: var(--mctl-typography-public-text-code-leading);
  --text-code-tracking: var(--mctl-typography-public-text-code-tracking);
  --text-prose-size: var(--mctl-typography-public-text-prose-size);
  --text-prose-weight: var(--mctl-typography-public-text-prose-weight);
  --text-prose-leading: var(--mctl-typography-public-text-prose-leading);
  --text-prose-tracking: var(--mctl-typography-public-text-prose-tracking);
  --text-prose-title-size: var(--mctl-typography-public-text-prose-title-size);
  --text-prose-title-weight: var(--mctl-typography-public-text-prose-title-weight);
  --text-prose-title-leading: var(--mctl-typography-public-text-prose-title-leading);
  --text-prose-title-tracking: var(--mctl-typography-public-text-prose-title-tracking);
  --text-prose-section-size: var(--mctl-typography-public-text-prose-section-size);
  --text-prose-section-weight: var(--mctl-typography-public-text-prose-section-weight);
  --text-prose-section-leading: var(--mctl-typography-public-text-prose-section-leading);
  --text-prose-section-tracking: var(--mctl-typography-public-text-prose-section-tracking);
  --text-prose-subsection-size: var(--mctl-typography-public-text-prose-subsection-size);
  --text-prose-subsection-weight: var(--mctl-typography-public-text-prose-subsection-weight);
  --text-prose-subsection-leading: var(--mctl-typography-public-text-prose-subsection-leading);
  --text-prose-subsection-tracking: var(--mctl-typography-public-text-prose-subsection-tracking);
}

/* Recompute derived colors at scoped theme/accent boundaries as well as root. */
:root,
[data-theme],
[data-accent] {
  --focus-ring: var(--accent);
  --control-bg: var(--surface-bg);
  --control-disabled-bg: var(--surface-elevated);
  --control-border: var(--surface-line-strong);
  --control-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  --status-ok-soft: color-mix(in srgb, var(--status-ok) 10%, transparent);
  --status-warn-soft: color-mix(in srgb, var(--status-warn) 10%, transparent);
  --status-bad-soft: color-mix(in srgb, var(--status-bad) 10%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --overlay-scrim: color-mix(in srgb, var(--surface-bg) 84%, transparent);
  --surface-translucent: color-mix(in srgb, var(--surface-card) 85%, transparent);
  --site-grid-line: color-mix(in srgb, var(--surface-fg) 2%, transparent);
  --site-header-bg: color-mix(in srgb, var(--surface-bg) 80%, transparent);
  --site-header-border: var(--surface-line);
}