@theme {
  --color-sz-primary-base: #3b82f6;
  
  --color-sz-primary-50: color-mix(in srgb, var(--color-sz-primary-base) 5%, white);
  --color-sz-primary-100: color-mix(in srgb, var(--color-sz-primary-base) 10%, white);
  --color-sz-primary-200: color-mix(in srgb, var(--color-sz-primary-base) 30%, white);
  --color-sz-primary-300: color-mix(in srgb, var(--color-sz-primary-base) 50%, white);
  --color-sz-primary-400: color-mix(in srgb, var(--color-sz-primary-base) 70%, white);
  --color-sz-primary-500: var(--color-sz-primary-base);
  --color-sz-primary-600: color-mix(in srgb, var(--color-sz-primary-base) 90%, black);
  --color-sz-primary-700: color-mix(in srgb, var(--color-sz-primary-base) 70%, black);
  --color-sz-primary-800: color-mix(in srgb, var(--color-sz-primary-base) 50%, black);
  --color-sz-primary-900: color-mix(in srgb, var(--color-sz-primary-base) 30%, black);
  --color-sz-primary-950: color-mix(in srgb, var(--color-sz-primary-base) 20%, black);

  --color-sz-secondary-base: #f59e0b;

  --color-sz-secondary-50: color-mix(in srgb, var(--color-sz-secondary-base) 5%, white);
  --color-sz-secondary-100: color-mix(in srgb, var(--color-sz-secondary-base) 10%, white);
  --color-sz-secondary-200: color-mix(in srgb, var(--color-sz-secondary-base) 30%, white);
  --color-sz-secondary-300: color-mix(in srgb, var(--color-sz-secondary-base) 50%, white);
  --color-sz-secondary-400: color-mix(in srgb, var(--color-sz-secondary-base) 70%, white);
  --color-sz-secondary-500: var(--color-sz-secondary-base);
  --color-sz-secondary-600: color-mix(in srgb, var(--color-sz-secondary-base) 90%, black);
  --color-sz-secondary-700: color-mix(in srgb, var(--color-sz-secondary-base) 70%, black);
  --color-sz-secondary-800: color-mix(in srgb, var(--color-sz-secondary-base) 50%, black);
  --color-sz-secondary-900: color-mix(in srgb, var(--color-sz-secondary-base) 30%, black);
  --color-sz-secondary-950: color-mix(in srgb, var(--color-sz-secondary-base) 20%, black);

  --color-sz-background-base: #ffffff;

  --color-sz-background-50: color-mix(in srgb, var(--color-sz-background-base) 5%, white);
  --color-sz-background-100: color-mix(in srgb, var(--color-sz-background-base) 10%, white);
  --color-sz-background-200: color-mix(in srgb, var(--color-sz-background-base) 30%, white);
  --color-sz-background-300: color-mix(in srgb, var(--color-sz-background-base) 50%, white);
  --color-sz-background-400: color-mix(in srgb, var(--color-sz-background-base) 70%, white);
  --color-sz-background-500: var(--color-sz-background-base);
  --color-sz-background-600: color-mix(in srgb, var(--color-sz-background-base) 90%, black);
  --color-sz-background-700: color-mix(in srgb, var(--color-sz-background-base) 70%, black);
  --color-sz-background-800: color-mix(in srgb, var(--color-sz-background-base) 50%, black);
  --color-sz-background-900: color-mix(in srgb, var(--color-sz-background-base) 30%, black);
  --color-sz-background-950: color-mix(in srgb, var(--color-sz-background-base) 20%, black);
}