/* Celorus Design System v3 — foundation paste-block (GENERATED). */
/* Drop into any single-file HTML collateral. Includes tokens, a minimal
   reset, body/type baseline, and a legacy-alias bridge so existing files
   using the old v2 variable names keep rendering unchanged. */

/* Fonts (import in <head>):
   @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); */

:root {
  /* primitive · color */
  --primitive-color-petrol-200: #5FBACD;
  --primitive-color-petrol-300: #3FA6BB;
  --primitive-color-petrol-400: #1A728A;
  --primitive-color-petrol-500: #567981;
  --primitive-color-petrol-600: #155A6B;
  --primitive-color-petrol-700: #0E4D5E;
  --primitive-color-petrol-800: #0E3F4B;
  --primitive-color-petrol-tint-soft: #EEF2F2;
  --primitive-color-petrol-tint-line: #DAE2E3;
  --primitive-color-orange-400: #E8823C;
  --primitive-color-orange-500: #DA6925;
  --primitive-color-orange-600: #C75D18;
  --primitive-color-orange-700: #AD4F0D;
  --primitive-color-orange-tint-soft: #FBEBDA;
  --primitive-color-orange-tint-line: #F0D3B4;
  --primitive-color-tan-base: #C99963;
  --primitive-color-blue-base: #568ABE;
  --primitive-color-blue-strong: #3A6FA0;
  --primitive-color-mist-100: #CFDADA;
  --primitive-color-mist-300: #95C4C1;
  --primitive-color-cream-0: #FFFFFF;
  --primitive-color-cream-50: #F5F9F5;
  --primitive-color-cream-100: #EEF3EF;
  --primitive-color-cream-150: #ECF2ED;
  --primitive-color-cream-200: #EBF1EC;
  --primitive-color-cream-300: #DDE6DD;
  --primitive-color-cream-400: #C3CEC3;
  --primitive-color-deep-teal-850: #131C1C;
  --primitive-color-deep-teal-900: #0A1818;
  --primitive-color-deep-teal-950: #051212;
  --primitive-color-ink-300: #868379;
  --primitive-color-ink-400: #6C675B;
  --primitive-color-ink-500: #686866;
  --primitive-color-ink-700: #4A4A48;
  --primitive-color-ink-900: #111111;
  --primitive-color-dark-ink-0: #F0F4F1;
  --primitive-color-dark-ink-100: #D2DAD6;
  --primitive-color-dark-ink-200: #A6B3AE;
  --primitive-color-dark-ink-300: #86928D;
  --primitive-color-dark-ink-400: #55605C;
  --primitive-color-good-base: #2E7D5C;
  --primitive-color-good-strong: #2A7355;
  --primitive-color-good-tint: #DCEFE6;
  --primitive-color-warn-base: #C18821;
  --primitive-color-warn-strong: #7A5A10;
  --primitive-color-warn-tint: #F4E8C9;
  --primitive-color-bad-base: #B83A2E;
  --primitive-color-bad-strong: #AA352A;
  --primitive-color-bad-tint: #F2DCD8;
  --primitive-color-white: #FFFFFF;
  --primitive-color-traffic-red: #FF5F57;
  --primitive-color-traffic-amber: #FFBD2E;
  --primitive-color-traffic-green: #28CA41;
  /* primitive · font */
  --primitive-font-serif: "Source Serif 4", Georgia, serif;
  --primitive-font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --primitive-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* primitive · fontWeight */
  --primitive-fontWeight-light: 300;
  --primitive-fontWeight-regular: 400;
  --primitive-fontWeight-medium: 500;
  --primitive-fontWeight-semibold: 600;
  --primitive-fontWeight-bold: 700;
  /* primitive · fontSize */
  --primitive-fontSize-3xs: 10px;
  --primitive-fontSize-2xs: 10.5px;
  --primitive-fontSize-xs: 11px;
  --primitive-fontSize-sm: 12.5px;
  --primitive-fontSize-md: 13px;
  --primitive-fontSize-base: 14px;
  --primitive-fontSize-lg: 15.5px;
  --primitive-fontSize-xl: 17.5px;
  --primitive-fontSize-2xl: 19px;
  --primitive-fontSize-3xl: 26px;
  --primitive-fontSize-4xl: 30px;
  --primitive-fontSize-5xl: 34px;
  --primitive-fontSize-6xl: 38px;
  --primitive-fontSize-7xl: 42px;
  --primitive-fontSize-8xl: 50px;
  /* primitive · lineHeight */
  --primitive-lineHeight-none: 1;
  --primitive-lineHeight-tight: 1.06;
  --primitive-lineHeight-snug: 1.1;
  --primitive-lineHeight-heading: 1.18;
  --primitive-lineHeight-h3: 1.3;
  --primitive-lineHeight-normal: 1.5;
  --primitive-lineHeight-body: 1.6;
  --primitive-lineHeight-relaxed: 1.72;
  /* primitive · letterSpacing */
  --primitive-letterSpacing-hero: -0.03em;
  --primitive-letterSpacing-h1: -0.022em;
  --primitive-letterSpacing-h2: -0.018em;
  --primitive-letterSpacing-tight: -0.02em;
  --primitive-letterSpacing-normal: 0em;
  --primitive-letterSpacing-label: 0.01em;
  --primitive-letterSpacing-wide: 0.05em;
  --primitive-letterSpacing-wider: 0.12em;
  --primitive-letterSpacing-eyebrow: 0.17em;
  --primitive-letterSpacing-widest: 0.18em;
  /* primitive · space */
  --primitive-space-0: 0px;
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-7: 28px;
  --primitive-space-9: 36px;
  --primitive-space-10: 40px;
  --primitive-space-12: 48px;
  --primitive-space-13: 52px;
  --primitive-space-15: 60px;
  --primitive-space-16: 64px;
  --primitive-space-18: 74px;
  --primitive-space-20: 80px;
  --primitive-space-0-5: 2px;
  --primitive-space-1-5: 6px;
  --primitive-space-2-5: 10px;
  --primitive-space-3-5: 14px;
  --primitive-space-5-5: 22px;
  --primitive-space-6-5: 26px;
  --primitive-space-7-5: 30px;
  /* primitive · radius */
  --primitive-radius-none: 0px;
  --primitive-radius-sm: 6px;
  --primitive-radius-md: 11px;
  --primitive-radius-lg: 13px;
  --primitive-radius-xl: 16px;
  --primitive-radius-pill: 999px;
  /* primitive · shadow */
  --primitive-shadow-none: none;
  --primitive-shadow-sm: 0px 1px 2px 0px rgba(5,18,18,0.06);
  --primitive-shadow-md: 0px 6px 28px 0px rgba(0,0,0,0.07);
  --primitive-shadow-lg: 0px 12px 40px 0px rgba(0,0,0,0.12);
  /* primitive · zIndex */
  --primitive-zIndex-base: 0;
  --primitive-zIndex-sticky: 40;
  --primitive-zIndex-overlay: 50;
  --primitive-zIndex-modal: 55;
  --primitive-zIndex-progress: 60;
  --primitive-zIndex-toast: 70;
  /* primitive · duration */
  --primitive-duration-instant: 0ms;
  --primitive-duration-fast: 80ms;
  --primitive-duration-quick: 120ms;
  --primitive-duration-base: 200ms;
  --primitive-duration-slow: 320ms;
  /* primitive · easing */
  --primitive-easing-linear: cubic-bezier(0, 0, 1, 1);
  --primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --primitive-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --primitive-easing-in: cubic-bezier(0.4, 0, 1, 1);
  /* primitive · breakpoint */
  --primitive-breakpoint-sm: 560px;
  --primitive-breakpoint-md: 820px;
  --primitive-breakpoint-lg: 1100px;
  --primitive-breakpoint-container: 1000px;
  /* semantic · color */
  --semantic-color-bg-canvas: #EBF1EC;
  --semantic-color-bg-sheet: #F5F9F5;
  --semantic-color-bg-paper: #FFFFFF;
  --semantic-color-bg-panel: #EEF3EF;
  --semantic-color-bg-well: #ECF2ED;
  --semantic-color-bg-inverse: #051212;
  --semantic-color-bg-inverse-raised: #0A1818;
  --semantic-color-fg-strong: #111111;
  --semantic-color-fg-default: #4A4A48;
  --semantic-color-fg-muted: #686866;
  --semantic-color-fg-subtle: #6C675B;
  --semantic-color-fg-faint: #868379;
  --semantic-color-fg-on-accent: #FFFFFF;
  --semantic-color-fg-on-inverse: #F0F4F1;
  --semantic-color-fg-on-inverse-muted: #D2DAD6;
  --semantic-color-fg-on-inverse-faint: #86928D;
  --semantic-color-border-default: #DDE6DD;
  --semantic-color-border-strong: #C3CEC3;
  --semantic-color-border-inverse: rgba(255,255,255,0.08);
  --semantic-color-border-inverse-strong: rgba(255,255,255,0.16);
  --semantic-color-accent-default: #155A6B;
  --semantic-color-accent-hover: #0E4D5E;
  --semantic-color-accent-deep: #0E3F4B;
  --semantic-color-accent-on-tint: #0E4D5E;
  --semantic-color-accent-fg-on-tint: #155A6B;
  --semantic-color-accent-soft: #EEF2F2;
  --semantic-color-accent-soft-border: #DAE2E3;
  --semantic-color-accent-on-inverse: #3FA6BB;
  --semantic-color-accent2-default: #DA6925;
  --semantic-color-accent2-hover: #C75D18;
  --semantic-color-accent2-text: #AD4F0D;
  --semantic-color-accent2-on-tint: #AD4F0D;
  --semantic-color-accent2-soft: #FBEBDA;
  --semantic-color-accent2-soft-border: #F0D3B4;
  --semantic-color-accent2-on-inverse: #E8823C;
  --semantic-color-highlight-tan: #C99963;
  --semantic-color-highlight-blue: #568ABE;
  --semantic-color-highlight-blue-strong: #3A6FA0;
  --semantic-color-block-muted: #CFDADA;
  --semantic-color-block-muted-fg: #0E4D5E;
  --semantic-color-block-attention: #95C4C1;
  --semantic-color-block-attention-fg: #051212;
  --semantic-color-status-good: #2E7D5C;
  --semantic-color-status-good-text: #2A7355;
  --semantic-color-status-good-bg: #DCEFE6;
  --semantic-color-status-warn: #C18821;
  --semantic-color-status-warn-text: #7A5A10;
  --semantic-color-status-warn-on-solid: #051212;
  --semantic-color-status-warn-bg: #F4E8C9;
  --semantic-color-status-bad: #B83A2E;
  --semantic-color-status-bad-text: #AA352A;
  --semantic-color-status-bad-bg: #F2DCD8;
  --semantic-color-focus-ring: #155A6B;
  /* semantic · font */
  --semantic-font-heading: "Source Serif 4", Georgia, serif;
  --semantic-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --semantic-font-data: "IBM Plex Mono", ui-monospace, monospace;
  /* semantic · text */
  --semantic-text-hero: 50px;
  --semantic-text-h1: 42px;
  --semantic-text-h2: 30px;
  --semantic-text-h3: 19px;
  --semantic-text-h4: 13px;
  --semantic-text-xl: 17.5px;
  --semantic-text-lede: 15.5px;
  --semantic-text-body: 14px;
  --semantic-text-body-sm: 12.5px;
  --semantic-text-label: 10.5px;
  --semantic-text-caption: 11px;
  --semantic-text-eyebrow: 10.5px;
  /* semantic · space */
  --semantic-space-gutter: 52px;
  --semantic-space-section: 60px;
  --semantic-space-section-lg: 74px;
  --semantic-space-component: 24px;
  --semantic-space-component-sm: 16px;
  --semantic-space-component-lg: 28px;
  --semantic-space-stack: 14px;
  --semantic-space-inline: 10px;
  --semantic-space-grid-gap: 16px;
  /* semantic · radius */
  --semantic-radius-control: 6px;
  --semantic-radius-card: 11px;
  --semantic-radius-card-lg: 13px;
  --semantic-radius-container: 16px;
  --semantic-radius-pill: 999px;
  /* semantic · shadow */
  --semantic-shadow-card: 0px 1px 2px 0px rgba(5,18,18,0.06);
  --semantic-shadow-raised: 0px 6px 28px 0px rgba(0,0,0,0.07);
  --semantic-shadow-overlay: 0px 12px 40px 0px rgba(0,0,0,0.12);
  /* semantic · motion */
  --semantic-motion-duration-fast: 80ms;
  --semantic-motion-duration-quick: 120ms;
  --semantic-motion-duration-base: 200ms;
  --semantic-motion-duration-slow: 320ms;
  --semantic-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --semantic-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --semantic-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  /* component · button */
  --component-button-primary-bg: #155A6B;
  --component-button-primary-bg-hover: #0E4D5E;
  --component-button-primary-bg-active: #0E3F4B;
  --component-button-primary-fg: #FFFFFF;
  --component-button-secondary-bg: #FFFFFF;
  --component-button-secondary-bg-hover: #ECF2ED;
  --component-button-secondary-fg: #4A4A48;
  --component-button-secondary-border: #C3CEC3;
  --component-button-ghost-fg: #686866;
  --component-button-ghost-fg-hover: #111111;
  --component-button-ghost-bg-hover: #ECF2ED;
  --component-button-danger-bg: #B83A2E;
  --component-button-danger-bg-hover: #AA352A;
  --component-button-danger-fg: #FFFFFF;
  --component-button-radius: 6px;
  --component-button-padding-x: 14px;
  --component-button-padding-y: 6px;
  --component-button-font-size: 12.5px;
  --component-button-font-weight: 600;
  /* component · input */
  --component-input-bg: #FFFFFF;
  --component-input-fg: #111111;
  --component-input-border: #C3CEC3;
  --component-input-placeholder: #686866;
  --component-input-focus-border: #155A6B;
  --component-input-focus-ring: #155A6B;
  --component-input-error-border: #B83A2E;
  --component-input-error-fg: #AA352A;
  --component-input-disabled-bg: #EEF3EF;
  --component-input-disabled-fg: #868379;
  --component-input-radius: 11px;
  --component-input-padding-x: 12px;
  --component-input-padding-y: 10px;
  --component-input-font-size: 14px;
  /* component · card */
  --component-card-bg: #FFFFFF;
  --component-card-fg: #4A4A48;
  --component-card-border: #DDE6DD;
  --component-card-bg-active: #EEF2F2;
  --component-card-border-active: #DAE2E3;
  --component-card-bg-inactive: #EEF3EF;
  --component-card-shadow: 0px 1px 2px 0px rgba(5,18,18,0.06);
  --component-card-radius: 11px;
  --component-card-padding: 24px;
  /* component · table */
  --component-table-header-bg: #F5F9F5;
  --component-table-header-fg: #686866;
  --component-table-row-bg: #FFFFFF;
  --component-table-row-bg-hover: #ECF2ED;
  --component-table-row-fg: #4A4A48;
  --component-table-border: #DDE6DD;
  --component-table-cell-padding-x: 16px;
  --component-table-cell-padding-y: 12px;
  /* component · modal */
  --component-modal-overlay-bg: rgba(5,18,18,0.5);
  --component-modal-bg: #FFFFFF;
  --component-modal-fg: #4A4A48;
  --component-modal-border: #DDE6DD;
  --component-modal-shadow: 0px 12px 40px 0px rgba(0,0,0,0.12);
  --component-modal-radius: 13px;
  --component-modal-padding: 24px;
  --component-modal-max-width: 512px;
  /* component · nav */
  --component-nav-bg: rgba(245,249,245,0.96);
  --component-nav-border: #DDE6DD;
  --component-nav-link-fg: #686866;
  --component-nav-link-fg-hover: #111111;
  --component-nav-link-bg-hover: #ECF2ED;
  --component-nav-link-fg-active: #155A6B;
  --component-nav-link-radius: 6px;
  --component-nav-topbar-bg: #051212;
  --component-nav-topbar-fg: #F0F4F1;
  --component-nav-topbar-accent: #3FA6BB;
  /* component · tab */
  --component-tab-fg: #686866;
  --component-tab-fg-active: #155A6B;
  --component-tab-fg-hover: #111111;
  --component-tab-border-active: #155A6B;
  --component-tab-border: #DDE6DD;
  /* component · toast */
  --component-toast-bg: #051212;
  --component-toast-fg: #F0F4F1;
  --component-toast-border: rgba(255,255,255,0.08);
  --component-toast-accent: #3FA6BB;
  --component-toast-shadow: 0px 12px 40px 0px rgba(0,0,0,0.12);
  --component-toast-radius: 11px;
  --component-toast-padding: 16px;
  /* component · chip */
  --component-chip-solid-bg: #155A6B;
  --component-chip-solid-fg: #FFFFFF;
  --component-chip-soft-bg: #EEF2F2;
  --component-chip-soft-fg: #0E4D5E;
  --component-chip-soft-border: #DAE2E3;
  --component-chip-outline-bg: #FFFFFF;
  --component-chip-outline-fg: #4A4A48;
  --component-chip-outline-border: #C3CEC3;
  --component-chip-radius: 999px;
  --component-chip-padding-x: 14px;
  --component-chip-padding-y: 6px;
  /* component · focus */
  --component-focus-ring-color: #155A6B;
  --component-focus-ring-width: 2px;
  --component-focus-ring-offset: 2px;
  --component-focus-ring-style: solid;
  /* component · link */
  --component-link-underline-offset: 0.18em;

  /* ============================================================ */
  /* LEGACY ALIASES (DEPRECATED) — map old v2 names to new tokens */
  /* so every existing Celorus HTML file keeps rendering. Prefer  */
  /* the systematic tokens above in all new work.                 */
  /* ============================================================ */
  --canvas: var(--semantic-color-bg-canvas);
  --sheet: var(--semantic-color-bg-sheet);
  --paper: var(--semantic-color-bg-paper);
  --panel: var(--semantic-color-bg-panel);
  --well: var(--semantic-color-bg-well);
  --ink: var(--semantic-color-fg-strong);
  --ink-2: var(--semantic-color-fg-default);
  --muted: var(--semantic-color-fg-muted);
  --faint: var(--semantic-color-fg-faint);
  --line: var(--semantic-color-border-default);
  --line-2: var(--semantic-color-border-strong);
  --brand: var(--semantic-color-accent-default);
  --brand-700: var(--semantic-color-accent-hover);
  --brand-deep: var(--semantic-color-accent-deep);
  --brand-light: var(--primitive-color-petrol-400);
  --accent: var(--semantic-color-accent-hover);
  --accent-soft: var(--semantic-color-accent-soft);
  --accent-line: var(--semantic-color-accent-soft-border);
  --good: var(--semantic-color-status-good);
  --good-tint: var(--semantic-color-status-good-bg);
  --warn: var(--semantic-color-status-warn);
  --warn-tint: var(--semantic-color-status-warn-bg);
  --bad: var(--semantic-color-status-bad);
  --bad-tint: var(--semantic-color-status-bad-bg);
  --radius: var(--semantic-radius-card);
  --serif: var(--semantic-font-heading);
  --sans: var(--semantic-font-body);
  --mono: var(--semantic-font-data);

  /* DEPRECATED bone aliases — renamed to cream (palette adoption, 2026-09-28). */
  --primitive-color-bone-0: var(--primitive-color-cream-0);
  --primitive-color-bone-50: var(--primitive-color-cream-50);
  --primitive-color-bone-100: var(--primitive-color-cream-100);
  --primitive-color-bone-150: var(--primitive-color-cream-150);
  --primitive-color-bone-200: var(--primitive-color-cream-200);
  --primitive-color-bone-300: var(--primitive-color-cream-300);
  --primitive-color-bone-400: var(--primitive-color-cream-400);
  /* DEPRECATED charcoal aliases — renamed to deep-teal (palette adoption, 2026-09-28). */
  --primitive-color-charcoal-850: var(--primitive-color-deep-teal-850);
  --primitive-color-charcoal-900: var(--primitive-color-deep-teal-900);
  --primitive-color-charcoal-950: var(--primitive-color-deep-teal-950);
}

[data-theme="dark"] {
  --semantic-color-bg-canvas: #051212;
  --semantic-color-bg-sheet: #0A1818;
  --semantic-color-bg-paper: #131C1C;
  --semantic-color-bg-panel: #0A1818;
  --semantic-color-bg-well: rgba(255,255,255,0.04);
  --semantic-color-bg-inverse: #EBF1EC;
  --semantic-color-bg-inverse-raised: #FFFFFF;
  --semantic-color-fg-strong: #F0F4F1;
  --semantic-color-fg-default: #D2DAD6;
  --semantic-color-fg-muted: #A6B3AE;
  --semantic-color-fg-subtle: #A6B3AE;
  --semantic-color-fg-faint: #86928D;
  --semantic-color-fg-on-accent: #051212;
  --semantic-color-fg-on-inverse: #111111;
  --semantic-color-fg-on-inverse-muted: #4A4A48;
  --semantic-color-fg-on-inverse-faint: #686866;
  --semantic-color-border-default: rgba(255,255,255,0.08);
  --semantic-color-border-strong: rgba(255,255,255,0.16);
  --semantic-color-border-inverse: #DDE6DD;
  --semantic-color-border-inverse-strong: #C3CEC3;
  --semantic-color-accent-default: #3FA6BB;
  --semantic-color-accent-hover: #5FBACD;
  --semantic-color-accent-deep: #155A6B;
  --semantic-color-accent-on-tint: #3FA6BB;
  --semantic-color-accent-fg-on-tint: #3FA6BB;
  --semantic-color-accent-soft: rgba(63,166,187,0.12);
  --semantic-color-accent-soft-border: rgba(63,166,187,0.32);
  --semantic-color-accent-on-inverse: #155A6B;
  --semantic-color-accent2-default: #E8823C;
  --semantic-color-accent2-hover: #DA6925;
  --semantic-color-accent2-text: #E8823C;
  --semantic-color-accent2-on-tint: #E8823C;
  --semantic-color-accent2-soft: rgba(218,105,37,0.16);
  --semantic-color-accent2-soft-border: rgba(218,105,37,0.34);
  --semantic-color-accent2-on-inverse: #AD4F0D;
  --semantic-color-highlight-blue-strong: #568ABE;
  --semantic-color-block-muted: rgba(207,218,218,0.16);
  --semantic-color-block-muted-fg: #5FBACD;
  --semantic-color-status-good-text: #7FD1AE;
  --semantic-color-status-good-bg: rgba(46,125,92,0.18);
  --semantic-color-status-warn-text: #E3B463;
  --semantic-color-status-warn-bg: rgba(193,136,33,0.18);
  --semantic-color-status-bad-text: #E88B7F;
  --semantic-color-status-bad-bg: rgba(184,58,46,0.20);
  --semantic-color-focus-ring: #3FA6BB;
  --component-button-primary-bg: #3FA6BB;
  --component-button-primary-bg-hover: #5FBACD;
  --component-button-primary-bg-active: #155A6B;
  --component-button-primary-fg: #051212;
  --component-button-secondary-bg: #131C1C;
  --component-button-secondary-bg-hover: rgba(255,255,255,0.04);
  --component-button-secondary-fg: #D2DAD6;
  --component-button-secondary-border: rgba(255,255,255,0.16);
  --component-button-ghost-fg: #A6B3AE;
  --component-button-ghost-fg-hover: #F0F4F1;
  --component-button-ghost-bg-hover: rgba(255,255,255,0.04);
  --component-input-bg: #131C1C;
  --component-input-fg: #F0F4F1;
  --component-input-border: rgba(255,255,255,0.16);
  --component-input-placeholder: #A6B3AE;
  --component-input-focus-border: #3FA6BB;
  --component-input-focus-ring: #3FA6BB;
  --component-input-disabled-bg: #0A1818;
  --component-input-disabled-fg: #86928D;
  --component-card-bg: #131C1C;
  --component-card-fg: #D2DAD6;
  --component-card-border: rgba(255,255,255,0.08);
  --component-card-bg-active: rgba(63,166,187,0.12);
  --component-card-border-active: rgba(63,166,187,0.32);
  --component-card-bg-inactive: #0A1818;
  --component-table-header-bg: #0A1818;
  --component-table-header-fg: #A6B3AE;
  --component-table-row-bg: #131C1C;
  --component-table-row-bg-hover: rgba(255,255,255,0.04);
  --component-table-row-fg: #D2DAD6;
  --component-table-border: rgba(255,255,255,0.08);
  --component-modal-bg: #131C1C;
  --component-modal-fg: #D2DAD6;
  --component-modal-border: rgba(255,255,255,0.08);
  --component-nav-bg: rgba(10,24,24,0.96);
  --component-nav-border: rgba(255,255,255,0.08);
  --component-nav-link-fg: #A6B3AE;
  --component-nav-link-fg-hover: #F0F4F1;
  --component-nav-link-bg-hover: rgba(255,255,255,0.04);
  --component-nav-link-fg-active: #3FA6BB;
  --component-nav-topbar-bg: #EBF1EC;
  --component-nav-topbar-fg: #111111;
  --component-nav-topbar-accent: #155A6B;
  --component-tab-fg: #A6B3AE;
  --component-tab-fg-active: #3FA6BB;
  --component-tab-fg-hover: #F0F4F1;
  --component-tab-border-active: #3FA6BB;
  --component-tab-border: rgba(255,255,255,0.08);
  --component-toast-bg: #EBF1EC;
  --component-toast-fg: #111111;
  --component-toast-border: #DDE6DD;
  --component-toast-accent: #155A6B;
  --component-chip-solid-bg: #3FA6BB;
  --component-chip-solid-fg: #051212;
  --component-chip-soft-bg: rgba(63,166,187,0.12);
  --component-chip-soft-fg: #3FA6BB;
  --component-chip-soft-border: rgba(63,166,187,0.32);
  --component-chip-outline-bg: #131C1C;
  --component-chip-outline-fg: #D2DAD6;
  --component-chip-outline-border: rgba(255,255,255,0.16);
  --component-focus-ring-color: #3FA6BB;
}

/* Minimal reset + type baseline (guide §2 equivalent). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--semantic-color-bg-canvas);
  color: var(--semantic-color-fg-strong);
  font-family: var(--semantic-font-body);
  font-size: var(--semantic-text-body);
  line-height: var(--primitive-lineHeight-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--semantic-font-heading); font-weight: var(--primitive-fontWeight-semibold); }
h1 { font-size: var(--semantic-text-h1); line-height: var(--primitive-lineHeight-snug); letter-spacing: var(--primitive-letterSpacing-h1); }
h2 { font-size: var(--semantic-text-h2); line-height: var(--primitive-lineHeight-heading); letter-spacing: var(--primitive-letterSpacing-h2); margin-bottom: var(--primitive-space-2); }
h3 { font-size: var(--semantic-text-h3); line-height: var(--primitive-lineHeight-h3); margin-bottom: var(--primitive-space-1-5); }
p { color: var(--semantic-color-fg-default); line-height: var(--primitive-lineHeight-relaxed); margin-bottom: var(--primitive-space-3); }
strong { color: var(--semantic-color-fg-strong); font-weight: var(--primitive-fontWeight-semibold); }
a { color: var(--semantic-color-accent-default); text-underline-offset: var(--component-link-underline-offset); }
:focus-visible {
  outline: var(--component-focus-ring-width) var(--component-focus-ring-style) var(--component-focus-ring-color);
  outline-offset: var(--component-focus-ring-offset);
}
/* The browser's own parts (COMPOSITION rule 11, D46). Each colour pair is in the contrast gate, both themes. */
::selection { background: var(--semantic-color-accent-default); color: var(--semantic-color-fg-on-accent); }
html { scrollbar-color: var(--semantic-color-fg-faint) transparent; caret-color: var(--semantic-color-accent-default); }
table { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}