:root {
  --xh-space-1: 4px;
  --xh-space-2: 8px;
  --xh-space-3: 12px;
  --xh-space-4: 16px;
  --xh-space-5: 24px;
  --xh-space-6: 32px;
  --xh-gap-local: var(--xh-space-2);
  --xh-gap-group: var(--xh-space-4);
  --xh-gap-section: var(--xh-space-6);
  --xh-pad-control: var(--xh-space-2) var(--xh-space-3);
  --xh-pad-container: var(--xh-space-4);
  --xh-pad-page: var(--xh-space-4);

  --xh-text-caption: 12px;
  --xh-text-small: 13px;
  --xh-text-body: 14px;
  --xh-text-large: 16px;
  --xh-text-title: 18px;
  --xh-text-heading: 22px;
  --xh-text-display: 28px;
  --xh-text-hero: 36px;
  --xh-text-input: 16px;
  --xh-leading-tight: 1.25;
  --xh-leading-body: 1.5;
  --xh-weight-regular: 400;
  --xh-weight-medium: 500;
  --xh-weight-bold: 700;
  --xh-font-sans: var(--ui-sans);
  --xh-font-mono: var(--ui-mono);

  --xh-radius-inner: 2px;
  --xh-radius-control: 4px;
  --xh-radius-container: 8px;
  --xh-radius-card: 16px;
  --xh-radius-full: 999px;

  --xh-surface-page: var(--tone-page);
  --xh-surface-panel: var(--tone-panel);
  --xh-surface-raised: var(--tone-raised);
  --xh-surface-hover: var(--tone-hover);
  --xh-text: var(--tone-ink);
  --xh-text-secondary: var(--tone-secondary);
  --xh-text-muted: var(--tone-muted);
  --xh-border: color-mix(in srgb, var(--tone-ink) 10%, transparent);
  --xh-border-strong: color-mix(in srgb, var(--tone-ink) 22%, transparent);
  --xh-accent: var(--tone-mint);
  --xh-accent-hover: var(--tone-mint-hover);
  --xh-accent-active: var(--tone-mint-active);
  --xh-on-accent: var(--tone-page);
  --xh-status-success: var(--tone-mint);
  --xh-status-warning: #E0A43A;
  --xh-status-danger: #E06A4F;
  --xh-status-info: #6FA8DC;
  --xh-focus-ring: 0 0 0 2px var(--tone-page), 0 0 0 4px var(--tone-mint);

  --xh-shadow-floating: 0 8px 24px color-mix(in srgb, #000 28%, transparent);
  --xh-shadow-overlay: 0 16px 48px color-mix(in srgb, #000 40%, transparent);

  --xh-bp-tablet: 640px;
  --xh-bp-desktop: 960px;

  --xh-duration-fast: 120ms;
  --xh-duration-base: 200ms;
  --xh-duration-slow: 320ms;
  --xh-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

html[data-theme="light"] {
  --xh-status-warning: #B26A00;
  --xh-status-danger: #B3361C;
  --xh-status-info: #2F6FA8;
  --xh-shadow-floating: 0 8px 24px color-mix(in srgb, #000 10%, transparent);
  --xh-shadow-overlay: 0 16px 48px color-mix(in srgb, #000 16%, transparent);
}