:root {
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: var(--font-family-base);

  --color-background: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-muted: #eaebed;
  --color-surface-strong: #111518;
  --color-text: #111518;
  --color-text-muted: #687379;
  --color-border: #eaebed;
  --color-border-strong: #687379;
  --color-accent: #ff6210;
  --color-accent-strong: #ff7b4a;
  --color-accent-contrast: #ffffff;
  --color-focus: #ff6210;

  --font-size-0: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.125rem;
  --font-size-3: 1.375rem;
  --font-size-4: 1.75rem;
  --font-size-5: 2.25rem;
  --font-size-6: 3rem;

  --line-height-tight: 1.15;
  --line-height-base: 1.6;
  --line-height-loose: 1.75;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --container-inline: min(calc(100% - 2rem), 80.625rem);
  --measure: 42rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --shadow-soft: 0 1rem 2rem color-mix(in srgb, var(--color-surface-strong) 8%, transparent);
  --duration-fast: 160ms;
  --duration-base: 220ms;


  /* Semantic aliases */
  --color-canvas: var(--color-background);
  --color-panel: var(--color-surface);
  --color-panel-muted: var(--color-surface-muted);
  --color-panel-inverse: var(--color-surface-strong);
  --color-brand: var(--color-accent);
  --color-brand-strong: var(--color-accent-strong);
  --color-on-brand: var(--color-accent-contrast);
  --color-on-dark: var(--color-accent-contrast);
  --color-on-dark-muted: color-mix(in srgb, var(--color-accent-contrast) 78%, transparent);
  --color-on-dark-subtle: color-mix(in srgb, var(--color-accent-contrast) 68%, transparent);
  --color-focus-ring: var(--color-focus);

  /* Glass surfaces */
  --surface-glass: color-mix(in srgb, var(--color-surface-strong) 38%, transparent);
  --surface-glass-strong: color-mix(in srgb, var(--color-surface-strong) 52%, transparent);
  --surface-glass-muted: color-mix(in srgb, var(--color-surface-strong) 30%, transparent);
  --surface-glass-active: color-mix(in srgb, var(--color-surface-strong) 42%, transparent);
  --border-glass: color-mix(in srgb, var(--color-accent-contrast) 18%, transparent);
  --border-glass-strong: color-mix(in srgb, var(--color-accent-contrast) 24%, transparent);
  --border-glass-muted: color-mix(in srgb, var(--color-accent-contrast) 16%, transparent);

  /* Campaign theme */
  --campaign-gold: #c8a24a;
  --campaign-gold-strong: #d9b866;
  --campaign-black: #080808;
  --campaign-panel: rgba(10, 13, 15, 0.76);
  --campaign-panel-strong: rgba(10, 13, 15, 0.88);
  --campaign-panel-soft: rgba(10, 13, 15, 0.62);
  --campaign-panel-kofi: rgba(10, 13, 15, 0.70);
  --campaign-border: rgba(200, 162, 74, 0.42);
  --campaign-border-soft: rgba(255, 255, 255, 0.16);
  --campaign-border-kofi: rgba(255, 255, 255, 0.18);
  --campaign-text: #ffffff;
  --campaign-text-soft: rgba(255, 255, 255, 0.82);
  --campaign-text-muted: rgba(255, 255, 255, 0.68);
  --campaign-hero-surface: color-mix(in srgb, var(--color-surface-strong) 72%, transparent);
  --campaign-final-surface: #0d1111;
}