@layer skin {

  [data-skin="base"] {
    --skin-background-primary: light-dark(var(--raw-color-neutral-0), var(--raw-color-neutral-800));
    --skin-border-primary: light-dark(var(--raw-color-neutral-400), var(--raw-color-neutral-500));
    --skin-border-secondary: light-dark(var(--raw-color-neutral-100), var(--raw-color-neutral-800));
    --skin-foreground-primary: light-dark(var(--raw-color-neutral-800), var(--raw-color-neutral-100));
    --skin-interactive-primary: light-dark(var(--raw-color-interactive-400), var(--raw-color-interactive-300));
    --skin-interactive-hover: light-dark(var(--raw-color-interactive-500), var(--raw-color-interactive-200));
    --skin-stars-primary: light-dark(var(--raw-color-stars-base), var(--raw-color-stars-base));
  }

  [data-skin="canvas"] {
    --skin-accent-primary: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-on-primary: light-dark(var(--raw-color-main-700), var(--raw-color-main-700));
    --skin-accent-primary-hover: light-dark(var(--raw-color-alt-300), var(--raw-color-alt-300));
    --skin-accent-on-primary-hover: light-dark(var(--raw-color-alt-800), var(--raw-color-alt-800));
    --skin-accent-secondary: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-on-secondary: light-dark(var(--raw-color-alt-800), var(--raw-color-alt-800));
    --skin-accent-secondary-hover: light-dark(var(--raw-color-alt-300), var(--raw-color-alt-300));
    --skin-accent-on-secondary-hover: light-dark(var(--raw-color-alt-800), var(--raw-color-alt-800));
    --skin-background-primary: light-dark(var(--raw-color-neutral-50), var(--raw-color-neutral-750));
    --skin-background-secondary: light-dark(var(--raw-color-alt-75), var(--raw-color-neutral-675));
    --skin-border-primary: light-dark(var(--raw-color-neutral-100), var(--raw-color-neutral-400));
    --skin-border-secondary: light-dark(var(--raw-color-alt-200), var(--raw-color-neutral-500));
    --skin-foreground-primary: light-dark(var(--raw-color-neutral-800), var(--raw-color-neutral-100));
    --skin-foreground-secondary: light-dark(var(--raw-color-neutral-600), var(--raw-color-neutral-200));
    --skin-interactive-primary: light-dark(var(--raw-color-alt-400), var(--raw-color-interactive-300));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-alt-500), var(--raw-color-interactive-200));
  }

  [data-skin="chrome"] {
    --skin-accent-primary: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-on-primary: light-dark(var(--raw-color-alt-700), var(--raw-color-alt-800));
    --skin-accent-primary-hover: light-dark(var(--raw-color-alt-750), var(--raw-color-alt-base));
    --skin-accent-on-primary-hover: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-secondary: light-dark(var(--raw-color-alt-300), var(--raw-color-alt-300));
    --skin-accent-on-secondary: light-dark(var(--raw-color-alt-800), var(--raw-color-alt-800));
    --skin-accent-secondary-hover: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-on-secondary-hover: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-background-primary: light-dark(var(--raw-color-alt-base), var(--raw-color-alt-800));
    --skin-background-secondary: light-dark(var(--raw-color-alt-750), var(--raw-color-alt-850));
    --skin-border-primary: light-dark(var(--raw-color-alt-400), var(--raw-color-alt-400));
    --skin-border-secondary: light-dark(var(--raw-color-main-300), var(--raw-color-main-300));
    --skin-foreground-primary: light-dark(var(--raw-color-alt-0), var(--raw-color-alt-0));
    --skin-foreground-secondary: light-dark(var(--raw-color-alt-200), var(--raw-color-alt-200));
    --skin-interactive-primary: light-dark(var(--raw-color-interactive-200), var(--raw-color-interactive-300));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-interactive-300), var(--raw-color-interactive-200));
  }

  [data-skin="elevated"] {
    --skin-accent-primary: light-dark(var(--raw-color-alt-base), var(--raw-color-alt-300));
    --skin-accent-on-primary: light-dark(var(--raw-color-alt-100), var(--raw-color-alt-700));
    --skin-accent-primary-hover: light-dark(var(--raw-color-main-300), var(--raw-color-main-300));
    --skin-accent-on-primary-hover: light-dark(var(--raw-color-main-800), var(--raw-color-main-800));
    --skin-accent-secondary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-secondary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-secondary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-secondary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-background-primary: light-dark(var(--raw-color-alt-200), var(--raw-color-neutral-500));
    --skin-border-primary: light-dark(var(--raw-color-neutral-300), var(--raw-color-neutral-500));
    --skin-border-secondary: light-dark(var(--raw-color-neutral-100), var(--raw-color-neutral-700));
    --skin-foreground-primary: light-dark(var(--raw-color-alt-700), var(--raw-color-alt-100));
    --skin-foreground-secondary: light-dark(var(--raw-color-neutral-700), var(--raw-color-neutral-250));
    --skin-interactive-primary: light-dark(var(--raw-color-interactive-500), var(--raw-color-interactive-200));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-interactive-300), var(--raw-color-interactive-300));
  }

  [data-skin="error"] {
    --skin-background-primary: light-dark(var(--raw-color-negative-100), var(--raw-color-negative-600));
    --skin-foreground-primary: light-dark(var(--raw-color-negative-800), var(--raw-color-negative-100));
    --skin-interactive-primary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-300));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-negative-400), var(--raw-color-negative-200));
  }

  [data-skin="info"] {
    --skin-background-primary: light-dark(var(--raw-color-neutral-100), var(--raw-color-neutral-600));
    --skin-foreground-primary: light-dark(var(--raw-color-neutral-800), var(--raw-color-neutral-100));
    --skin-interactive-primary: light-dark(var(--raw-color-neutral-500), var(--raw-color-neutral-300));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-neutral-400), var(--raw-color-neutral-200));
  }

  [data-skin="pullout"] {
    --skin-accent-primary: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-on-primary: light-dark(var(--raw-color-main-700), var(--raw-color-main-700));
    --skin-accent-primary-hover: light-dark(var(--raw-color-alt-300), var(--raw-color-alt-300));
    --skin-accent-on-primary-hover: light-dark(var(--raw-color-alt-800), var(--raw-color-alt-800));
    --skin-accent-secondary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-secondary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-secondary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-secondary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-background-primary: light-dark(var(--raw-color-alt-700), var(--raw-color-neutral-600));
    --skin-border-primary: light-dark(var(--raw-color-alt-400), var(--raw-color-alt-400));
    --skin-border-secondary: light-dark(var(--raw-color-main-300), var(--raw-color-main-300));
    --skin-foreground-primary: light-dark(var(--raw-color-alt-50), var(--raw-color-alt-50));
    --skin-foreground-secondary: light-dark(var(--raw-color-alt-400), var(--raw-color-alt-100));
    --skin-interactive-primary: light-dark(var(--raw-color-interactive-200), var(--raw-color-interactive-300));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-interactive-300), var(--raw-color-interactive-200));
  }

  [data-skin="success"] {
    --skin-background-primary: light-dark(var(--raw-color-positive-100), var(--raw-color-positive-600));
    --skin-foreground-primary: light-dark(var(--raw-color-positive-800), var(--raw-color-positive-100));
    --skin-interactive-primary: light-dark(var(--raw-color-positive-500), var(--raw-color-positive-300));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-positive-400), var(--raw-color-positive-200));
  }

  [data-skin="zebra"] {
    --skin-accent-primary: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-primary-hover: light-dark(var(--raw-color-main-base), var(--raw-color-main-base));
    --skin-accent-on-primary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-primary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-secondary: light-dark(var(--raw-color-alt-base), var(--raw-color-alt-300));
    --skin-accent-secondary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-secondary: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-accent-on-secondary-hover: light-dark(var(--raw-color-negative-500), var(--raw-color-negative-500));
    --skin-background-primary: light-dark(var(--raw-color-alt-75), var(--raw-color-neutral-700));
    --skin-background-secondary: light-dark(var(--raw-color-alt-100), var(--raw-color-neutral-675));
    --skin-border-primary: light-dark(var(--raw-color-neutral-100), var(--raw-color-neutral-400));
    --skin-border-secondary: light-dark(var(--raw-color-neutral-200), var(--raw-color-neutral-600));
    --skin-foreground-primary: light-dark(var(--raw-color-neutral-800), var(--raw-color-neutral-100));
    --skin-foreground-secondary: light-dark(var(--raw-color-neutral-600), var(--raw-color-neutral-200));
    --skin-interactive-primary: light-dark(var(--raw-color-interactive-400), var(--raw-color-interactive-200));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-interactive-300), var(--raw-color-interactive-300));
  }
}