@layer skin {
  [data-skin="base"] {
    --skin-background-primary: light-dark(var(--raw-color-page-light-500), var(--raw-color-page-dark-500));
    --skin-background-secondary: light-dark(var(--raw-color-surface-light-500), var(--raw-color-surface-dark-500));
    --skin-foreground-primary: light-dark(var(--raw-color-text-light-500), var(--raw-color-text-dark-500));
    --skin-foreground-secondary: light-dark(var(--raw-color-muted-light-500), var(--raw-color-muted-dark-500));
    --skin-border-primary: light-dark(var(--raw-color-border-strong-light-500), var(--raw-color-border-strong-dark-500));
    --skin-border-secondary: light-dark(var(--raw-color-border-soft-light-500), var(--raw-color-border-soft-dark-500));
    --skin-accent-primary: light-dark(var(--raw-color-action-light-500), var(--raw-color-action-dark-500));
    --skin-accent-primary-hover: light-dark(var(--raw-color-action-hover-light-500), var(--raw-color-action-hover-dark-500));
    --skin-accent-on-primary: light-dark(var(--raw-color-logo-fg-dark-500), var(--raw-color-logo-fg-light-500));
    --skin-accent-on-primary-hover: light-dark(var(--raw-color-logo-fg-dark-500), var(--raw-color-logo-fg-light-500));
    --skin-interactive-primary: light-dark(var(--raw-color-action-light-500), var(--raw-color-action-dark-500));
    --skin-interactive-primary-hover: light-dark(var(--raw-color-action-hover-light-500), var(--raw-color-action-hover-dark-500));
    --skin-logo-pink-1: light-dark(var(--raw-color-pink-1-light-500), var(--raw-color-pink-1-dark-500));
    --skin-logo-pink-2: light-dark(var(--raw-color-pink-2-light-500), var(--raw-color-pink-2-dark-500));
    --skin-logo-pink-3: light-dark(var(--raw-color-pink-3-light-500), var(--raw-color-pink-3-dark-500));
    --skin-logo-foreground: light-dark(var(--raw-color-logo-fg-light-500), var(--raw-color-logo-fg-dark-500));
    --skin-key-light: light-dark(var(--raw-color-key-white-light-500), var(--raw-color-key-white-dark-500));
    --skin-key-dark: light-dark(var(--raw-color-key-black-light-500), var(--raw-color-key-black-dark-500));
    --skin-key-border: light-dark(var(--raw-color-text-light-500), var(--raw-color-key-border-dark-500));
    --skin-key-label: light-dark(var(--raw-color-text-light-500), var(--raw-color-key-black-dark-500));
    --skin-key-label-dark: light-dark(var(--raw-color-key-white-light-500), var(--raw-color-text-dark-500));
    --skin-key-label-marked: light-dark(var(--raw-color-logo-fg-light-500), var(--raw-color-text-dark-500));
    --skin-key-midi-background: light-dark(var(--raw-color-key-midi-light-500), var(--raw-color-key-midi-dark-500));
    --skin-key-midi-border: light-dark(var(--raw-color-key-midi-border-light-500), var(--raw-color-key-white-dark-500));
    --skin-key-selected-background: light-dark(var(--raw-color-pink-2-light-500), var(--raw-color-pink-1-dark-500));
    --skin-key-selected-border: light-dark(var(--raw-color-key-select-border-light-500), var(--raw-color-action-dark-500));
    --skin-key-root-marker: light-dark(var(--raw-color-action-light-500), var(--raw-color-text-dark-500));
  }
}