@layer base {
  :root,
  [data-theme] {
    /* Compute full color values from HSL channels */
    --color-primary: hsl(var(--color-primary-hsl));
    --color-secondary: hsl(var(--color-secondary-hsl));
    --color-accent: hsl(var(--color-accent-hsl));
    --color-neutral: hsl(var(--color-neutral-hsl));
    --color-base-100: hsl(var(--color-base-100-hsl));
    --color-base-200: hsl(var(--color-base-200-hsl));
    --color-base-300: hsl(var(--color-base-300-hsl));
    --color-info: hsl(var(--color-info-hsl));
    --color-success: hsl(var(--color-success-hsl));
    --color-warning: hsl(var(--color-warning-hsl));
    --color-error: hsl(var(--color-error-hsl));
    --color-soft: hsl(var(--color-soft-hsl));
    --color-notice: hsl(var(--color-notice-hsl));
    --color-notice-text: hsl(var(--color-notice-text-hsl));
  }
}