:root {
  --theme-font-family: var(--font-humanist);

  --measure: 60ch;

  --dark-base: var(--neutral-12);
  --dark-base-on: var(--neutral-12-on);

  --dark-primary: var(--primary-3);
  --dark-primary-on: var(--primary-3-on);
  --dark-primary-dim: var(--primary-3-dim);

  --dark-secondary: var(--secondary-5);
  --dark-secondary-on: var(--secondary-5-on);
  --dark-secondary-dim: var(--secondary-5-dim);

  --dark-error: var(--error-3);
  --dark-error-on: var(--error-3-on);
  --dark-error-dim: var(--error-3-dim);

  --dark-surface: var(--neutral-variant-10);
  --dark-surface-on: var(--neutral-variant-10-on);

  --light-base: var(--neutral-1);
  --light-base-on: var(--neutral-1-on);

  --light-primary: var(--primary-8);
  --light-primary-on: var(--primary-8-on);
  --light-primary-dim: var(--primary-8-dim);

  --light-secondary: var(--secondary-6);
  --light-secondary-on: var(--secondary-6-on);
  --light-secondary-dim: var(--secondary-6-dim);

  --light-error: var(--error-8);
  --light-error-on: var(--error-8-on);
  --light-error-dim: var(--error-8-dim);

  --light-surface: var(--neutral-variant-1);
  --light-surface-on: var(--neutral-variant-1-on);
}

[data-theme="system"] {
  @media (prefers-color-scheme: light) {
    --theme-base: var(--light-base);
    --theme-base-on: var(--light-base-on);

    --theme-primary: var(--light-primary);
    --theme-primary-on: var(--light-primary-on);
    --theme-primary-dim: var(--light-primary-dim);

    --theme-secondary: var(--light-secondary);
    --theme-secondary-on: var(--light-secondary-on);
    --theme-secondary-dim: var(--light-secondary-dim);

    --theme-error: var(--light-error);
    --theme-error-on: var(--light-error-on);
    --theme-error-dim: var(--light-error-dim);

    --theme-surface: var(--light-surface);
    --theme-surface-on: var(--light-surface-on);
  }

  @media (prefers-color-scheme: dark) {
    --theme-base: var(--dark-base);
    --theme-base-on: var(--dark-base-on);

    --theme-primary: var(--dark-primary);
    --theme-primary-on: var(--dark-primary-on);
    --theme-primary-dim: var(--dark-primary-dim);

    --theme-secondary: var(--dark-secondary);
    --theme-secondary-on: var(--dark-secondary-on);
    --theme-secondary-dim: var(--dark-secondary-dim);

    --theme-error: var(--dark-error);
    --theme-error-on: var(--dark-error-on);
    --theme-error-dim: var(--dark-error-dim);

    --theme-surface: var(--dark-surface);
    --theme-surface-on: var(--dark-surface-on);
  }
}

[data-theme="light"] {
  --theme-base: var(--light-base);
  --theme-base-on: var(--light-base-on);

  --theme-primary: var(--light-primary);
  --theme-primary-on: var(--light-primary-on);
  --theme-primary-dim: var(--light-primary-dim);

  --theme-secondary: var(--light-secondary);
  --theme-secondary-on: var(--light-secondary-on);
  --theme-secondary-dim: var(--light-secondary-dim);

  --theme-error: var(--light-error);
  --theme-error-on: var(--light-error-on);
  --theme-error-dim: var(--light-error-dim);

  --theme-surface: var(--light-surface);
  --theme-surface-on: var(--light-surface-on);
}

[data-theme="dark"] {
  --theme-base: var(--dark-base);
  --theme-base-on: var(--dark-base-on);

  --theme-primary: var(--dark-primary);
  --theme-primary-on: var(--dark-primary-on);
  --theme-primary-dim: var(--dark-primary-dim);

  --theme-secondary: var(--dark-secondary);
  --theme-secondary-on: var(--dark-secondary-on);
  --theme-secondary-dim: var(--dark-secondary-dim);

  --theme-error: var(--dark-error);
  --theme-error-on: var(--dark-error-on);
  --theme-error-dim: var(--dark-error-dim);

  --theme-surface: var(--dark-surface);
  --theme-surface-on: var(--dark-surface-on);
}