@layer theme {
  :root,
  :host {
    --ui-color-primary-50: var(--color-green-50, oklch(98.2% 0.018 155.826));
    --ui-color-primary-100: var(--color-green-100, oklch(96.2% 0.044 156.743));
    --ui-color-primary-200: var(--color-green-200, oklch(92.5% 0.084 155.995));
    --ui-color-primary-300: var(--color-green-300, oklch(87.1% 0.15 154.449));
    --ui-color-primary-400: var(--color-green-400, oklch(79.2% 0.209 151.711));
    --ui-color-primary-500: var(--color-green-500, oklch(72.3% 0.219 149.579));
    --ui-color-primary-600: var(--color-green-600, oklch(62.7% 0.194 149.214));
    --ui-color-primary-700: var(--color-green-700, oklch(52.7% 0.154 150.069));
    --ui-color-primary-800: var(--color-green-800, oklch(44.8% 0.119 151.328));
    --ui-color-primary-900: var(--color-green-900, oklch(39.3% 0.095 152.535));
    --ui-color-primary-950: var(--color-green-950, oklch(26.6% 0.065 152.934));
    --ui-color-neutral-50: var(--color-slate-50, oklch(98.4% 0.003 247.858));
    --ui-color-neutral-100: var(--color-slate-100, oklch(96.8% 0.007 247.896));
    --ui-color-neutral-200: var(--color-slate-200, oklch(92.9% 0.013 255.508));
    --ui-color-neutral-300: var(--color-slate-300, oklch(86.9% 0.022 252.894));
    --ui-color-neutral-400: var(--color-slate-400, oklch(70.4% 0.04 256.788));
    --ui-color-neutral-500: var(--color-slate-500, oklch(55.4% 0.046 257.417));
    --ui-color-neutral-600: var(--color-slate-600, oklch(44.6% 0.043 257.281));
    --ui-color-neutral-700: var(--color-slate-700, oklch(37.2% 0.044 257.287));
    --ui-color-neutral-800: var(--color-slate-800, oklch(27.9% 0.041 260.031));
    --ui-color-neutral-900: var(--color-slate-900, oklch(20.8% 0.042 265.755));
    --ui-color-neutral-950: var(--color-slate-950, oklch(12.9% 0.042 264.695));
  }

  :root,
  :host,
  .light {
    --ui-primary: var(--ui-color-primary-500);
  }

  .dark {
    --ui-primary: var(--ui-color-primary-400);
  }
}