:root {
  /* Base palette */
  --color-void-black: #000000;
  --color-carbon: #181818;
  --color-graphite: #1e1f20;
  --color-iron: #333333;
  --color-slate: #807f7f;
  --color-fog: #999999;
  --color-ash: #666666;
  --color-chalk: #f1f4f4;
  --color-pure-white: #ffffff;

  /* Diagram-only chroma. Never a section background, never a button fill. */
  --color-signal-mint: #22e2a8;
  --color-deep-navy: #0a2142;
  --color-concentric-teal: #085556;

  /* Semantic aliases */
  --bg-page: var(--color-void-black);
  --bg-nav: var(--color-carbon);
  --bg-footer: var(--color-carbon);
  --bg-card: var(--color-graphite);
  --bg-inverted: var(--color-chalk);

  --text-primary: var(--color-pure-white);
  --text-muted: var(--color-slate);
  --text-disabled: var(--color-fog);
  --text-inverted: var(--color-void-black);
  --text-link: var(--color-pure-white);

  --border-hairline: var(--color-iron);
  --border-control: var(--color-pure-white);
  --border-recessed: var(--color-ash);

  --state-live: var(--color-signal-mint);
  --diagram-stroke: var(--color-concentric-teal);
  --diagram-wash: var(--color-deep-navy);

  /* Interaction washes — the only permitted translucency */
  --wash-hover: rgba(255, 255, 255, 0.08);
  --wash-active: rgba(255, 255, 255, 0.14);
}
:root {
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.24px;

  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.28px;

  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 0.4px;

  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: 0.6px;

  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: 0.8px;

  --text-heading: 36px;
  --leading-heading: 1.13;
  --tracking-heading: 0.9px;

  --text-display: 60px;
  --leading-display: 1.13;
  --tracking-display: 2.4px;
}
:root {
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-100: 100px;

  --page-max-width: 1280px;
  --page-gutter: var(--spacing-40);
  --section-gap: 80px;
  --card-padding: var(--spacing-20);
  --element-gap: var(--spacing-16);
  --nav-height: 80px;
}
:root {
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-pill: 20px;
  --radius-3xl: 30px;

  --radius-nav: 20px;
  --radius-cards: 20px;
  --radius-images: 10px;
  --radius-buttons: 20px;
  --radius-largecards: 30px;

  --border-width-hairline: 1px;

  /* The system has no shadows. Kept as a token so nobody invents one. */
  --shadow-none: none;
}