:host,
.sl-theme-viur-light {
  --ignt-theme-name: "viur-light";
  --ignt-color-scheme: light;

  --ignt-mix-color-down: hsla(0 0% 100% / 100%);
  --ignt-mix-color-up: hsla(0 0% 0% / 100%);

  --ignt-color-neutral-1000: hsla(0 0% 0% / 100%);
  --ignt-color-neutral-0: hsla(0 0% 100% / 100%);
}

@layer foundation, themes, elements, utilities;

@layer foundation.color {
  :root,
  :host {
    --ignt-color-gray-50: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-down) 95%
    );
    --ignt-color-gray-100: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-down) 90%
    );
    --ignt-color-gray-200: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-down) 75%
    );
    --ignt-color-gray-300: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-down) 60%
    );
    --ignt-color-gray-400: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-down) 25%
    );
    --ignt-color-gray-500: var(--ignt-color-gray);
    --ignt-color-gray-600: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-gray-700: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-up) 40%
    );
    --ignt-color-gray-800: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-up) 60%
    );
    --ignt-color-gray-900: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-up) 70%
    );
    --ignt-color-gray-950: color-mix(
      in srgb,
      var(--ignt-color-gray),
      var(--ignt-mix-color-up) 80%
    );

    --ignt-color-red-50: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-red-100: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-red-200: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-down) 55%
    );
    --ignt-color-red-300: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-red-400: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-red-500: hsl(0 84.2% 60.2%);
    --ignt-color-red-600: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-red-700: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-red-800: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-up) 55%
    );
    --ignt-color-red-900: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-red-950: color-mix(
      in srgb,
      var(--ignt-color-red-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-orange-50: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-orange-100: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-orange-200: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-down) 55%
    );
    --ignt-color-orange-300: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-orange-400: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-orange-500: hsl(25 95% 53.1%);
    --ignt-color-orange-600: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-orange-700: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-orange-800: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-up) 55%
    );
    --ignt-color-orange-900: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-orange-950: color-mix(
      in srgb,
      var(--ignt-color-orange-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-amber-50: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-amber-100: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-amber-200: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-down) 55%
    );
    --ignt-color-amber-300: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-amber-400: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-amber-500: hsl(38 92.1% 50.2%);
    --ignt-color-amber-600: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-amber-700: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-amber-800: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-up) 55%
    );
    --ignt-color-amber-900: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-amber-950: color-mix(
      in srgb,
      var(--ignt-color-amber-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-yellow-50: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-yellow-100: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-yellow-200: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-down) 55%
    );
    --ignt-color-yellow-300: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-yellow-400: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-yellow-500: hsl(45 93.4% 47.5%);
    --ignt-color-yellow-600: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-yellow-700: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-yellow-800: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-up) 55%
    );
    --ignt-color-yellow-900: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-yellow-950: color-mix(
      in srgb,
      var(--ignt-color-yellow-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-lime-50: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-lime-100: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-lime-200: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-down) 55%
    );
    --ignt-color-lime-300: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-lime-400: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-lime-500: hsl(83.7 80.5% 44.3%);
    --ignt-color-lime-600: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-lime-700: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-lime-800: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-lime-900: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-lime-950: color-mix(
      in srgb,
      var(--ignt-color-lime-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-green-50: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-green-100: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-green-200: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-green-300: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-green-400: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-green-500: hsl(142.1 70.6% 45.3%);
    --ignt-color-green-600: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-green-700: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-green-800: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-green-900: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-green-950: color-mix(
      in srgb,
      var(--ignt-color-green-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-emerald-50: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-emerald-100: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-emerald-200: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-emerald-300: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-emerald-400: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-emerald-500: hsl(160.1 84.1% 39.4%);
    --ignt-color-emerald-600: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-emerald-700: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-emerald-800: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-emerald-900: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-emerald-950: color-mix(
      in srgb,
      var(--ignt-color-emerald-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-teal-50: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-teal-100: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-teal-200: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-teal-300: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-teal-400: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-teal-500: hsl(173.4 80.4% 40%);
    --ignt-color-teal-600: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-teal-700: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-teal-800: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-teal-900: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-teal-950: color-mix(
      in srgb,
      var(--ignt-color-teal-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-cyan-50: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-cyan-100: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-cyan-200: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-cyan-300: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-cyan-400: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-cyan-500: hsl(188.7 94.5% 42.7%);
    --ignt-color-cyan-600: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-cyan-700: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-cyan-800: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-cyan-900: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-cyan-950: color-mix(
      in srgb,
      var(--ignt-color-cyan-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-sky-50: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-sky-100: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-sky-200: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-sky-300: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-sky-400: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-sky-500: hsl(198.6 88.7% 48.4%);
    --ignt-color-sky-600: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-sky-700: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-sky-800: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-sky-900: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-sky-950: color-mix(
      in srgb,
      var(--ignt-color-sky-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-blue-50: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-blue-100: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-blue-200: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-blue-300: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-blue-400: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-blue-500: hsl(217.2 91.2% 59.8%);
    --ignt-color-blue-600: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-blue-700: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-blue-800: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-blue-900: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-blue-950: color-mix(
      in srgb,
      var(--ignt-color-blue-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-indigo-50: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-indigo-100: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-indigo-200: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-indigo-300: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-indigo-400: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-indigo-500: hsl(240 83.5% 66.7%);
    --ignt-color-indigo-600: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-indigo-700: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-indigo-800: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-indigo-900: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-indigo-950: color-mix(
      in srgb,
      var(--ignt-color-indigo-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-violet-50: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-violet-100: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-violet-200: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-violet-300: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-violet-400: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-violet-500: hsl(260 89.5% 66.3%);
    --ignt-color-violet-600: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-violet-700: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-violet-800: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-violet-900: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-violet-950: color-mix(
      in srgb,
      var(--ignt-color-violet-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-purple-50: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-purple-100: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-purple-200: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-purple-300: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-purple-400: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-purple-500: hsl(270 91% 65.1%);
    --ignt-color-purple-600: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-purple-700: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-purple-800: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-purple-900: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-purple-950: color-mix(
      in srgb,
      var(--ignt-color-purple-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-fuchsia-50: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-fuchsia-100: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-fuchsia-200: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-fuchsia-300: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-fuchsia-400: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-fuchsia-500: hsl(292 84.1% 60.6%);
    --ignt-color-fuchsia-600: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-fuchsia-700: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-fuchsia-800: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-fuchsia-900: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-fuchsia-950: color-mix(
      in srgb,
      var(--ignt-color-fuchsia-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-pink-50: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-pink-100: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-pink-200: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-pink-300: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-pink-400: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-pink-500: hsl(330.4 81.2% 60.4%);
    --ignt-color-pink-600: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-pink-700: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-pink-800: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-pink-900: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-pink-950: color-mix(
      in srgb,
      var(--ignt-color-pink-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-rose-50: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-rose-100: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-rose-200: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-rose-300: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-rose-400: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-rose-500: hsl(349.7 89.2% 60.2%);
    --ignt-color-rose-600: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-rose-700: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-rose-800: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-rose-900: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-rose-950: color-mix(
      in srgb,
      var(--ignt-color-rose-500),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-primary-50: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-primary-100: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-primary-200: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-primary-300: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-primary-400: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-primary-500: var(--ignt-color-primary);
    --ignt-color-primary-600: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-primary-700: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-primary-800: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-primary-900: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-primary-950: color-mix(
      in srgb,
      var(--ignt-color-primary),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-secondary-50: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-secondary-100: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-secondary-200: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-secondary-300: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-secondary-400: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-secondary-500: var(--ignt-color-secondary);
    --ignt-color-secondary-600: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-secondary-700: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-secondary-800: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-secondary-900: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-secondary-950: color-mix(
      in srgb,
      var(--ignt-color-secondary),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-success-50: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-success-100: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-success-200: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-success-300: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-success-400: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-success-500: var(--ignt-color-success);
    --ignt-color-success-600: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-success-700: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-success-800: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-success-900: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-success-950: color-mix(
      in srgb,
      var(--ignt-color-success),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-warning-50: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-warning-100: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-warning-200: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-warning-300: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-warning-400: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-warning-500: var(--ignt-color-warning);
    --ignt-color-warning-600: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-warning-700: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-warning-800: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-warning-900: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-warning-950: color-mix(
      in srgb,
      var(--ignt-color-warning),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-danger-50: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-danger-100: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-danger-200: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-danger-300: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-danger-400: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-danger-500: var(--ignt-color-danger);
    --ignt-color-danger-600: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-danger-700: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-danger-800: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-danger-900: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-danger-950: color-mix(
      in srgb,
      var(--ignt-color-danger),
      var(--ignt-mix-color-up) 70%
    );

    --ignt-color-info-50: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-down) 70%
    );
    --ignt-color-info-100: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-down) 65%
    );
    --ignt-color-info-200: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-down) 50%
    );
    --ignt-color-info-300: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-down) 35%
    );
    --ignt-color-info-400: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-down) 15%
    );
    --ignt-color-info-500: var(--ignt-color-info);
    --ignt-color-info-600: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-up) 15%
    );
    --ignt-color-info-700: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-up) 35%
    );
    --ignt-color-info-800: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-up) 50%
    );
    --ignt-color-info-900: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-up) 65%
    );
    --ignt-color-info-950: color-mix(
      in srgb,
      var(--ignt-color-info),
      var(--ignt-mix-color-up) 70%
    );
  }
}

@layer foundation.config {
  :root,
  :host {
    --ignt-theme-name: "viur";
    --ignt-color-scheme: normal;
    color-scheme: var(--ignt-color-scheme);

    --ignt-color-primary: hsla(356 87% 44% / 100%);

    --ignt-color-secondary: hsla(0 0% 20% / 100%);

    --ignt-color-gray: hsla(240 4% 46% / 100%);

    --ignt-color-neutral-1000: hsla(0 0% 0% / 100%);
    --ignt-color-neutral-0: hsla(0 0% 100% / 100%);

    --ignt-mix-color-up: hsla(0 0% 0% / 100%);
    --ignt-mix-color-down: hsla(0 0% 100% / 100%);

    --ignt-color-success: color-mix(
      in oklch,
      var(--ignt-color-primary),
      hsla(130 45% 47% / 100%) 90%
    );
    --ignt-color-warning: color-mix(
      in oklch,
      var(--ignt-color-primary),
      hsla(40 90% 60% / 100%) 90%
    );
    --ignt-color-danger: color-mix(
      in oklch,
      var(--ignt-color-primary),
      hsla(4 90% 58% / 100%) 90%
    );
    --ignt-color-info: color-mix(
      in oklch,
      var(--ignt-color-primary),
      hsla(198 77% 49% / 100%) 90%
    );

    --ignt-surface-default: var(--ignt-color-gray-100);
    --ignt-surface-alt: var(--ignt-color-neutral-0);

    --ignt-color-text-default: var(--ignt-color-gray-800);
    --ignt-color-text-inverted: var(--ignt-color-gray-100);
    --ignt-color-link-default: var(--ignt-color-primary-700);
    --ignt-color-hover-default: var(--ignt-color-primary-500);

    --ignt-border-radius-default: 0.4rem;
    --ignt-border-radius-small: calc(var(--ignt-border-radius-default) / 2);
    --ignt-border-radius-medium: var(--ignt-border-radius-default);
    --ignt-border-radius-large: calc(var(--ignt-border-radius-default) * 1.5);
    --ignt-border-radius-x-large: calc(var(--ignt-border-radius-default) * 2);
    --ignt-border-radius-circle: 50%;
    --ignt-border-radius-pill: 9999px;

    --ignt-border-width-default: 1px;
    --ignt-border-width-small: calc(var(--ignt-border-width-default) / 2);
    --ignt-border-width-medium: var(--ignt-border-width-default);
    --ignt-border-width-large: calc(var(--ignt-border-width-default) * 1.5);

    --ignt-shadow-default: var(--ignt-shadow-none);
    --ignt-shadow-hover-default: var(--ignt-shadow-x-small);

    --ignt-color-shadow: var(--ignt-color-neutral-1000);
    --ignt-shadow-none: none;

    --ignt-shadow-x-small: 0 1px 3px color-mix(in oklch, var(--ignt-color-shadow) 12%, transparent),
    0 1px 2px color-mix(in oklch, var(--ignt-color-shadow) 24%, transparent);

    --ignt-shadow-small: 0 3px 6px color-mix(in oklch, var(--ignt-color-shadow) 16%, transparent),
    0 3px 6px color-mix(in oklch, var(--ignt-color-shadow) 23%, transparent);

    --ignt-shadow-medium: 0 10px 20px color-mix(in oklch, var(--ignt-color-shadow) 19%, transparent),
    0 6px 6px color-mix(in oklch, var(--ignt-color-shadow) 23%, transparent);

    --ignt-shadow-large: 0 14px 28px color-mix(in oklch, var(--ignt-color-shadow) 25%, transparent),
    0 10px 10px color-mix(in oklch, var(--ignt-color-shadow) 22%, transparent);

    --ignt-shadow-x-large: 0 19px 38px color-mix(in oklch, var(--ignt-color-shadow) 30%, transparent),
    0 15px 12px color-mix(in oklch, var(--ignt-color-shadow) 22%, transparent);

    --ignt-spacing-3x-small: 0.125rem;
    --ignt-spacing-2x-small: 0.25rem;
    --ignt-spacing-x-small: 0.5rem;
    --ignt-spacing-small: 0.75rem;
    --ignt-spacing-medium: 1rem;
    --ignt-spacing-large: 1.25rem;
    --ignt-spacing-x-large: 1.75rem;
    --ignt-spacing-2x-large: 2.25rem;
    --ignt-spacing-3x-large: 3rem;
    --ignt-spacing-4x-large: 4.5rem;

    --ignt-transition-x-slow: 1000ms;
    --ignt-transition-slow: 500ms;
    --ignt-transition-medium: 300ms;
    --ignt-transition-fast: 150ms;
    --ignt-transition-x-fast: 50ms;

    --ignt-font-sans: "Source Sans Pro", "Open Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --ignt-font-serif: Georgia, "Times New Roman", serif;

    --ignt-head-font-sans: "Source Sans Pro", "Open Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --ignt-head-font-serif: Georgia, "Times New Roman", serif;

    --ignt-font-mono: "Source Code Pro", Courier, monospace;

    --ignt-font-size-3x-small: 0.3em;
    --ignt-font-size-2x-small: 0.625em;
    --ignt-font-size-x-small: 0.75em;
    --ignt-font-size-small: 0.875em;
    --ignt-font-size-medium: 1em;
    --ignt-font-size-large: 1.25em;
    --ignt-font-size-x-large: 1.5em;
    --ignt-font-size-2x-large: 2.25em;
    --ignt-font-size-3x-large: 3em;
    --ignt-font-size-4x-large: 4.5em;

    --ignt-font-weight-light: 300;
    --ignt-font-weight-normal: 400;
    --ignt-font-weight-semibold: 500;
    --ignt-font-weight-bold: 700;

    --ignt-letter-spacing-denser: -0.03em;
    --ignt-letter-spacing-dense: -0.015em;
    --ignt-letter-spacing-normal: normal;
    --ignt-letter-spacing-loose: 0.075em;
    --ignt-letter-spacing-looser: 0.15em;

    --ignt-line-height-default: 1.5;
    --ignt-line-height-denser: calc(var(--ignt-line-height-default) - 0.75);
    --ignt-line-height-dense: calc(var(--ignt-line-height-default) - 0.5);
    --ignt-line-height-normal: var(--ignt-line-height-default);
    --ignt-line-height-loose: calc(var(--ignt-line-height-default) + 0.5);
    --ignt-line-height-looser: calc(var(--ignt-line-height-default) + 0.75);

    --ignt-page-width-default: 1400px;
    --ignt-paragraph-width-default: 77ch;
    --ignt-input-height-small: 1.25rem;
    --ignt-input-height-medium: 1.75rem;
    --ignt-input-height-large: 2rem;

    --ignt-z-index-drawer: 0;
    --ignt-z-index-content: 100;
    --ignt-z-index-dialog: 200;
    --ignt-z-index-dropdown: 300;
    --ignt-z-index-toast: 400;
    --ignt-z-index-tooltip: 500;
    --ignt-z-index-dev: 600;

    --ignt-order-header: 0;
    --ignt-order-body: 100;
    --ignt-order-footer: 200;

    --ignt-break-2x-small: 23em;
    --ignt-break-x-small: 40em;
    --ignt-break-small: 65em;
    --ignt-break-medium: 75em;
    --ignt-break-large: 93.75em;
    --ignt-break-x-large: 112.5em;
    --ignt-break-2x-large: 225em;

    --ignt-break-hdpi: 2;
    --ignt-break-print: print;
  }
}

@layer foundation.shoelace {
  :root,
  :host {
    --sl-theme-name: var(--ignt-theme-name);
    --sl-color-scheme: var(--ignt-color-scheme);

    --sl-color-gray-50: var(--ignt-color-gray-50);
    --sl-color-gray-100: var(--ignt-color-gray-100);
    --sl-color-gray-200: var(--ignt-color-gray-200);
    --sl-color-gray-300: var(--ignt-color-gray-300);
    --sl-color-gray-400: var(--ignt-color-gray-400);
    --sl-color-gray-500: var(--ignt-color-gray-500);
    --sl-color-gray-600: var(--ignt-color-gray-600);
    --sl-color-gray-700: var(--ignt-color-gray-700);
    --sl-color-gray-800: var(--ignt-color-gray-800);
    --sl-color-gray-900: var(--ignt-color-gray-900);
    --sl-color-gray-950: var(--ignt-color-gray-950);

    --sl-color-red-50: var(--ignt-color-red-50);
    --sl-color-red-100: var(--ignt-color-red-100);
    --sl-color-red-200: var(--ignt-color-red-200);
    --sl-color-red-300: var(--ignt-color-red-300);
    --sl-color-red-400: var(--ignt-color-red-400);
    --sl-color-red-500: var(--ignt-color-red-500);
    --sl-color-red-600: var(--ignt-color-red-600);
    --sl-color-red-700: var(--ignt-color-red-700);
    --sl-color-red-800: var(--ignt-color-red-800);
    --sl-color-red-900: var(--ignt-color-red-900);
    --sl-color-red-950: var(--ignt-color-red-950);

    --sl-color-orange-50: var(--ignt-color-orange-50);
    --sl-color-orange-100: var(--ignt-color-orange-100);
    --sl-color-orange-200: var(--ignt-color-orange-200);
    --sl-color-orange-300: var(--ignt-color-orange-300);
    --sl-color-orange-400: var(--ignt-color-orange-400);
    --sl-color-orange-500: var(--ignt-color-orange-500);
    --sl-color-orange-600: var(--ignt-color-orange-600);
    --sl-color-orange-700: var(--ignt-color-orange-700);
    --sl-color-orange-800: var(--ignt-color-orange-800);
    --sl-color-orange-900: var(--ignt-color-orange-900);
    --sl-color-orange-950: var(--ignt-color-orange-950);

    --sl-color-amber-50: var(--ignt-color-amber-50);
    --sl-color-amber-100: var(--ignt-color-amber-100);
    --sl-color-amber-200: var(--ignt-color-amber-200);
    --sl-color-amber-300: var(--ignt-color-amber-300);
    --sl-color-amber-400: var(--ignt-color-amber-400);
    --sl-color-amber-500: var(--ignt-color-amber-500);
    --sl-color-amber-600: var(--ignt-color-amber-600);
    --sl-color-amber-700: var(--ignt-color-amber-700);
    --sl-color-amber-800: var(--ignt-color-amber-800);
    --sl-color-amber-900: var(--ignt-color-amber-900);
    --sl-color-amber-950: var(--ignt-color-amber-950);

    --sl-color-yellow-50: var(--ignt-color-yellow-50);
    --sl-color-yellow-100: var(--ignt-color-yellow-100);
    --sl-color-yellow-200: var(--ignt-color-yellow-200);
    --sl-color-yellow-300: var(--ignt-color-yellow-300);
    --sl-color-yellow-400: var(--ignt-color-yellow-400);
    --sl-color-yellow-500: var(--ignt-color-yellow-500);
    --sl-color-yellow-600: var(--ignt-color-yellow-600);
    --sl-color-yellow-700: var(--ignt-color-yellow-700);
    --sl-color-yellow-800: var(--ignt-color-yellow-800);
    --sl-color-yellow-900: var(--ignt-color-yellow-900);
    --sl-color-yellow-950: var(--ignt-color-yellow-950);

    --sl-color-lime-50: var(--ignt-color-lime-50);
    --sl-color-lime-100: var(--ignt-color-lime-100);
    --sl-color-lime-200: var(--ignt-color-lime-200);
    --sl-color-lime-300: var(--ignt-color-lime-300);
    --sl-color-lime-400: var(--ignt-color-lime-400);
    --sl-color-lime-500: var(--ignt-color-lime-500);
    --sl-color-lime-600: var(--ignt-color-lime-600);
    --sl-color-lime-700: var(--ignt-color-lime-700);
    --sl-color-lime-800: var(--ignt-color-lime-800);
    --sl-color-lime-900: var(--ignt-color-lime-900);
    --sl-color-lime-950: var(--ignt-color-lime-950);

    --sl-color-green-50: var(--ignt-color-green-50);
    --sl-color-green-100: var(--ignt-color-green-100);
    --sl-color-green-200: var(--ignt-color-green-200);
    --sl-color-green-300: var(--ignt-color-green-300);
    --sl-color-green-400: var(--ignt-color-green-400);
    --sl-color-green-500: var(--ignt-color-green-500);
    --sl-color-green-600: var(--ignt-color-green-600);
    --sl-color-green-700: var(--ignt-color-green-700);
    --sl-color-green-800: var(--ignt-color-green-800);
    --sl-color-green-900: var(--ignt-color-green-900);
    --sl-color-green-950: var(--ignt-color-green-950);

    --sl-color-emerald-50: var(--ignt-color-emerald-50);
    --sl-color-emerald-100: var(--ignt-color-emerald-100);
    --sl-color-emerald-200: var(--ignt-color-emerald-200);
    --sl-color-emerald-300: var(--ignt-color-emerald-300);
    --sl-color-emerald-400: var(--ignt-color-emerald-400);
    --sl-color-emerald-500: var(--ignt-color-emerald-500);
    --sl-color-emerald-600: var(--ignt-color-emerald-600);
    --sl-color-emerald-700: var(--ignt-color-emerald-700);
    --sl-color-emerald-800: var(--ignt-color-emerald-800);
    --sl-color-emerald-900: var(--ignt-color-emerald-900);
    --sl-color-emerald-950: var(--ignt-color-emerald-950);

    --sl-color-teal-50: var(--ignt-color-teal-50);
    --sl-color-teal-100: var(--ignt-color-teal-100);
    --sl-color-teal-200: var(--ignt-color-teal-200);
    --sl-color-teal-300: var(--ignt-color-teal-300);
    --sl-color-teal-400: var(--ignt-color-teal-400);
    --sl-color-teal-500: var(--ignt-color-teal-500);
    --sl-color-teal-600: var(--ignt-color-teal-600);
    --sl-color-teal-700: var(--ignt-color-teal-700);
    --sl-color-teal-800: var(--ignt-color-teal-800);
    --sl-color-teal-900: var(--ignt-color-teal-900);
    --sl-color-teal-950: var(--ignt-color-teal-950);

    --sl-color-cyan-50: var(--ignt-color-cyan-50);
    --sl-color-cyan-100: var(--ignt-color-cyan-100);
    --sl-color-cyan-200: var(--ignt-color-cyan-200);
    --sl-color-cyan-300: var(--ignt-color-cyan-300);
    --sl-color-cyan-400: var(--ignt-color-cyan-400);
    --sl-color-cyan-500: var(--ignt-color-cyan-500);
    --sl-color-cyan-600: var(--ignt-color-cyan-600);
    --sl-color-cyan-700: var(--ignt-color-cyan-700);
    --sl-color-cyan-800: var(--ignt-color-cyan-800);
    --sl-color-cyan-900: var(--ignt-color-cyan-900);
    --sl-color-cyan-950: var(--ignt-color-cyan-950);

    --sl-color-sky-50: var(--ignt-color-sky-50);
    --sl-color-sky-100: var(--ignt-color-sky-100);
    --sl-color-sky-200: var(--ignt-color-sky-200);
    --sl-color-sky-300: var(--ignt-color-sky-300);
    --sl-color-sky-400: var(--ignt-color-sky-400);
    --sl-color-sky-500: var(--ignt-color-sky-500);
    --sl-color-sky-600: var(--ignt-color-sky-600);
    --sl-color-sky-700: var(--ignt-color-sky-700);
    --sl-color-sky-800: var(--ignt-color-sky-800);
    --sl-color-sky-900: var(--ignt-color-sky-900);
    --sl-color-sky-950: var(--ignt-color-sky-950);

    --sl-color-blue-50: var(--ignt-color-blue-50);
    --sl-color-blue-100: var(--ignt-color-blue-100);
    --sl-color-blue-200: var(--ignt-color-blue-200);
    --sl-color-blue-300: var(--ignt-color-blue-300);
    --sl-color-blue-400: var(--ignt-color-blue-400);
    --sl-color-blue-500: var(--ignt-color-blue-500);
    --sl-color-blue-600: var(--ignt-color-blue-600);
    --sl-color-blue-700: var(--ignt-color-blue-700);
    --sl-color-blue-800: var(--ignt-color-blue-800);
    --sl-color-blue-900: var(--ignt-color-blue-900);
    --sl-color-blue-950: var(--ignt-color-blue-950);

    --sl-color-indigo-50: var(--ignt-color-indigo-50);
    --sl-color-indigo-100: var(--ignt-color-indigo-100);
    --sl-color-indigo-200: var(--ignt-color-indigo-200);
    --sl-color-indigo-300: var(--ignt-color-indigo-300);
    --sl-color-indigo-400: var(--ignt-color-indigo-400);
    --sl-color-indigo-500: var(--ignt-color-indigo-500);
    --sl-color-indigo-600: var(--ignt-color-indigo-600);
    --sl-color-indigo-700: var(--ignt-color-indigo-700);
    --sl-color-indigo-800: var(--ignt-color-indigo-800);
    --sl-color-indigo-900: var(--ignt-color-indigo-900);
    --sl-color-indigo-950: var(--ignt-color-indigo-950);

    --sl-color-violet-50: var(--ignt-color-violet-50);
    --sl-color-violet-100: var(--ignt-color-violet-100);
    --sl-color-violet-200: var(--ignt-color-violet-200);
    --sl-color-violet-300: var(--ignt-color-violet-300);
    --sl-color-violet-400: var(--ignt-color-violet-400);
    --sl-color-violet-500: var(--ignt-color-violet-500);
    --sl-color-violet-600: var(--ignt-color-violet-600);
    --sl-color-violet-700: var(--ignt-color-violet-700);
    --sl-color-violet-800: var(--ignt-color-violet-800);
    --sl-color-violet-900: var(--ignt-color-violet-900);
    --sl-color-violet-950: var(--ignt-color-violet-950);

    --sl-color-purple-50: var(--ignt-color-purple-50);
    --sl-color-purple-100: var(--ignt-color-purple-100);
    --sl-color-purple-200: var(--ignt-color-purple-200);
    --sl-color-purple-300: var(--ignt-color-purple-300);
    --sl-color-purple-400: var(--ignt-color-purple-400);
    --sl-color-purple-500: var(--ignt-color-purple-500);
    --sl-color-purple-600: var(--ignt-color-purple-600);
    --sl-color-purple-700: var(--ignt-color-purple-700);
    --sl-color-purple-800: var(--ignt-color-purple-800);
    --sl-color-purple-900: var(--ignt-color-purple-900);
    --sl-color-purple-950: var(--ignt-color-purple-950);

    --sl-color-fuchsia-50: var(--ignt-color-fuchsia-50);
    --sl-color-fuchsia-100: var(--ignt-color-fuchsia-100);
    --sl-color-fuchsia-200: var(--ignt-color-fuchsia-200);
    --sl-color-fuchsia-300: var(--ignt-color-fuchsia-300);
    --sl-color-fuchsia-400: var(--ignt-color-fuchsia-400);
    --sl-color-fuchsia-500: var(--ignt-color-fuchsia-500);
    --sl-color-fuchsia-600: var(--ignt-color-fuchsia-600);
    --sl-color-fuchsia-700: var(--ignt-color-fuchsia-700);
    --sl-color-fuchsia-800: var(--ignt-color-fuchsia-800);
    --sl-color-fuchsia-900: var(--ignt-color-fuchsia-900);
    --sl-color-fuchsia-950: var(--ignt-color-fuchsia-950);

    --sl-color-pink-50: var(--ignt-color-pink-50);
    --sl-color-pink-100: var(--ignt-color-pink-100);
    --sl-color-pink-200: var(--ignt-color-pink-200);
    --sl-color-pink-300: var(--ignt-color-pink-300);
    --sl-color-pink-400: var(--ignt-color-pink-400);
    --sl-color-pink-500: var(--ignt-color-pink-500);
    --sl-color-pink-600: var(--ignt-color-pink-600);
    --sl-color-pink-700: var(--ignt-color-pink-700);
    --sl-color-pink-800: var(--ignt-color-pink-800);
    --sl-color-pink-900: var(--ignt-color-pink-900);
    --sl-color-pink-950: var(--ignt-color-pink-950);

    --sl-color-rose-50: var(--ignt-color-rose-50);
    --sl-color-rose-100: var(--ignt-color-rose-100);
    --sl-color-rose-200: var(--ignt-color-rose-200);
    --sl-color-rose-300: var(--ignt-color-rose-300);
    --sl-color-rose-400: var(--ignt-color-rose-400);
    --sl-color-rose-500: var(--ignt-color-rose-500);
    --sl-color-rose-600: var(--ignt-color-rose-600);
    --sl-color-rose-700: var(--ignt-color-rose-700);
    --sl-color-rose-800: var(--ignt-color-rose-800);
    --sl-color-rose-900: var(--ignt-color-rose-900);
    --sl-color-rose-950: var(--ignt-color-rose-950);

    --sl-color-primary-50: var(--ignt-color-primary-50);
    --sl-color-primary-100: var(--ignt-color-primary-100);
    --sl-color-primary-200: var(--ignt-color-primary-200);
    --sl-color-primary-300: var(--ignt-color-primary-300);
    --sl-color-primary-400: var(--ignt-color-primary-400);
    --sl-color-primary-500: var(--ignt-color-primary-500);
    --sl-color-primary-600: var(--ignt-color-primary-600);
    --sl-color-primary-700: var(--ignt-color-primary-700);
    --sl-color-primary-800: var(--ignt-color-primary-800);
    --sl-color-primary-900: var(--ignt-color-primary-900);
    --sl-color-primary-950: var(--ignt-color-primary-950);

    --sl-color-success-50: var(--ignt-color-success-50);
    --sl-color-success-100: var(--ignt-color-success-100);
    --sl-color-success-200: var(--ignt-color-success-200);
    --sl-color-success-300: var(--ignt-color-success-300);
    --sl-color-success-400: var(--ignt-color-success-400);
    --sl-color-success-500: var(--ignt-color-success-500);
    --sl-color-success-600: var(--ignt-color-success-600);
    --sl-color-success-700: var(--ignt-color-success-700);
    --sl-color-success-800: var(--ignt-color-success-800);
    --sl-color-success-900: var(--ignt-color-success-900);
    --sl-color-success-950: var(--ignt-color-success-950);

    --sl-color-warning-50: var(--ignt-color-warning-50);
    --sl-color-warning-100: var(--ignt-color-warning-100);
    --sl-color-warning-200: var(--ignt-color-warning-200);
    --sl-color-warning-300: var(--ignt-color-warning-300);
    --sl-color-warning-400: var(--ignt-color-warning-400);
    --sl-color-warning-500: var(--ignt-color-warning-500);
    --sl-color-warning-600: var(--ignt-color-warning-600);
    --sl-color-warning-700: var(--ignt-color-warning-700);
    --sl-color-warning-800: var(--ignt-color-warning-800);
    --sl-color-warning-900: var(--ignt-color-warning-900);
    --sl-color-warning-950: var(--ignt-color-warning-950);

    --sl-color-danger-50: var(--ignt-color-danger-50);
    --sl-color-danger-100: var(--ignt-color-danger-100);
    --sl-color-danger-200: var(--ignt-color-danger-200);
    --sl-color-danger-300: var(--ignt-color-danger-300);
    --sl-color-danger-400: var(--ignt-color-danger-400);
    --sl-color-danger-500: var(--ignt-color-danger-500);
    --sl-color-danger-600: var(--ignt-color-danger-600);
    --sl-color-danger-700: var(--ignt-color-danger-700);
    --sl-color-danger-800: var(--ignt-color-danger-800);
    --sl-color-danger-900: var(--ignt-color-danger-900);
    --sl-color-danger-950: var(--ignt-color-danger-950);

    --sl-color-info-50: var(--ignt-color-info-50);
    --sl-color-info-100: var(--ignt-color-info-100);
    --sl-color-info-200: var(--ignt-color-info-200);
    --sl-color-info-300: var(--ignt-color-info-300);
    --sl-color-info-400: var(--ignt-color-info-400);
    --sl-color-info-500: var(--ignt-color-info-500);
    --sl-color-info-600: var(--ignt-color-info-600);
    --sl-color-info-700: var(--ignt-color-info-700);
    --sl-color-info-800: var(--ignt-color-info-800);
    --sl-color-info-900: var(--ignt-color-info-900);
    --sl-color-info-950: var(--ignt-color-info-950);

    --sl-color-secondary-50: var(--ignt-color-secondary-50);
    --sl-color-secondary-100: var(--ignt-color-secondary-100);
    --sl-color-secondary-200: var(--ignt-color-secondary-200);
    --sl-color-secondary-300: var(--ignt-color-secondary-300);
    --sl-color-secondary-400: var(--ignt-color-secondary-400);
    --sl-color-secondary-500: var(--ignt-color-secondary-500);
    --sl-color-secondary-600: var(--ignt-color-secondary-600);
    --sl-color-secondary-700: var(--ignt-color-secondary-700);
    --sl-color-secondary-800: var(--ignt-color-secondary-800);
    --sl-color-secondary-900: var(--ignt-color-secondary-900);
    --sl-color-secondary-950: var(--ignt-color-secondary-950);

    --sl-color-neutral-50: var(--ignt-color-gray-50);
    --sl-color-neutral-100: var(--ignt-color-gray-100);
    --sl-color-neutral-200: var(--ignt-color-gray-200);
    --sl-color-neutral-300: var(--ignt-color-gray-300);
    --sl-color-neutral-400: var(--ignt-color-gray-400);
    --sl-color-neutral-500: var(--ignt-color-gray-500);
    --sl-color-neutral-600: var(--ignt-color-gray-600);
    --sl-color-neutral-700: var(--ignt-color-gray-700);
    --sl-color-neutral-800: var(--ignt-color-gray-800);
    --sl-color-neutral-900: var(--ignt-color-gray-900);
    --sl-color-neutral-950: var(--ignt-color-gray-950);

    --sl-color-neutral-0: var(--ignt-color-neutral-0);
    --sl-color-neutral-1000: var(--ignt-color-neutral-1000);

    --sl-border-radius-small: var(--ignt-border-radius-small);
    --sl-border-radius-medium: var(--ignt-border-radius-medium);
    --sl-border-radius-large: var(--ignt-border-radius-large);
    --sl-border-radius-x-large: var(--ignt-border-radius-x-large);
    --sl-border-radius-circle: var(--ignt-border-radius-circle);
    --sl-border-radius-pill: var(--ignt-border-radius-pill);

    --sl-shadow-x-small: var(--ignt-shadow-x-small);

    --sl-surface-base: var(--ignt-surface-default);
    --sl-surface-base-alt: var(--ignt-surface-alt);

    --sl-spacing-3x-small: var(--ignt-spacing-3x-small);
    --sl-spacing-2x-small: var(--ignt-spacing-2x-small);
    --sl-spacing-x-small: var(--ignt-spacing-x-small);
    --sl-spacing-small: var(--ignt-spacing-small);
    --sl-spacing-medium: var(--ignt-spacing-medium);
    --sl-spacing-large: var(--ignt-spacing-large);
    --sl-spacing-x-large: var(--ignt-spacing-x-large);
    --sl-spacing-2x-large: var(--ignt-spacing-2x-large);
    --sl-spacing-3x-large: var(--ignt-spacing-3x-large);
    --sl-spacing-4x-large: var(--ignt-spacing-4x-large);

    --sl-transition-x-slow: var(--ignt-transition-x-slow);
    --sl-transition-slow: var(--ignt-transition-slow);
    --sl-transition-medium: var(--ignt-transition-medium);
    --sl-transition-fast: var(--ignt-transition-fast);
    --sl-transition-x-fast: var(--ignt-transition-x-fast);

    --sl-font-mono: var(--ignt-font-mono);
    --sl-font-sans: var(--ignt-font-sans);
    --sl-font-serif: var(--ignt-font-serif);

    --sl-font-size-2x-small: var(--ignt-font-size-2x-small);
    --sl-font-size-x-small: var(--ignt-font-size-x-small);
    --sl-font-size-small: var(--ignt-font-size-small);
    --sl-font-size-medium: var(--ignt-font-size-medium);
    --sl-font-size-large: var(--ignt-font-size-large);
    --sl-font-size-x-large: var(--ignt-font-size-x-large);
    --sl-font-size-2x-large: var(--ignt-font-size-2x-large);
    --sl-font-size-3x-large: var(--ignt-font-size-3x-large);
    --sl-font-size-4x-large: var(--ignt-font-size-4x-large);

    --sl-font-weight-light: var(--ignt-font-weight-light);
    --sl-font-weight-normal: var(--ignt-font-weight-normal);
    --sl-font-weight-semibold: var(--ignt-font-weight-semibold);
    --sl-font-weight-bold: var(--ignt-font-weight-bold);

    --sl-letter-spacing-denser: var(--ignt-letter-spacing-denser);
    --sl-letter-spacing-dense: var(--ignt-letter-spacing-dense);
    --sl-letter-spacing-normal: var(--ignt-letter-spacing-normal);
    --sl-letter-spacing-loose: var(--ignt-letter-spacing-loose);
    --sl-letter-spacing-looser: var(--ignt-letter-spacing-looser);

    --sl-line-height-denser: var(--ignt-line-height-denser);
    --sl-line-height-dense: var(--ignt-line-height-dense);
    --sl-line-height-normal: var(--ignt-line-height-normal);
    --sl-line-height-loose: var(--ignt-line-height-loose);
    --sl-line-height-looser: var(--ignt-line-height-looser);

    --sl-focus-ring-color: var(--sl-color-primary-600);
    --sl-focus-ring-style: solid;
    --sl-focus-ring-width: 3px;
    --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color);
    --sl-focus-ring-offset: 1px;

    --sl-button-font-size-small: var(--sl-font-size-x-small);
    --sl-button-font-size-medium: var(--sl-font-size-small);
    --sl-button-font-size-large: var(--sl-font-size-medium);

    --sl-input-height-small: var(--ignt-input-height-small);
    --sl-input-height-medium: var(--ignt-input-height-medium);
    --sl-input-height-large: var(--ignt-input-height-large);
    --sl-input-background-color: var(--sl-color-neutral-0);
    --sl-input-background-color-hover: var(--sl-input-background-color);
    --sl-input-background-color-focus: var(--sl-input-background-color);
    --sl-input-background-color-disabled: var(--sl-color-neutral-100);
    --sl-input-border-color: var(--sl-color-neutral-300);
    --sl-input-border-color-hover: var(--sl-color-neutral-400);
    --sl-input-border-color-focus: var(--sl-color-primary-500);
    --sl-input-border-color-disabled: var(--sl-color-neutral-300);
    --sl-input-border-width: 1px;
    --sl-input-border-radius-small: var(--sl-border-radius-medium);
    --sl-input-border-radius-medium: var(--sl-border-radius-medium);
    --sl-input-border-radius-large: var(--sl-border-radius-medium);
    --sl-input-font-family: var(--sl-font-sans);
    --sl-input-font-weight: var(--sl-font-weight-normal);
    --sl-input-font-size-small: var(--sl-font-size-small);
    --sl-input-font-size-medium: var(--sl-font-size-medium);
    --sl-input-font-size-large: var(--sl-font-size-large);
    --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
    --sl-input-color: var(--sl-color-neutral-700);
    --sl-input-color-hover: var(--sl-color-neutral-700);
    --sl-input-color-focus: var(--sl-color-neutral-700);
    --sl-input-color-disabled: var(--sl-color-neutral-900);
    --sl-input-icon-color: var(--sl-color-neutral-500);
    --sl-input-icon-color-hover: var(--sl-color-neutral-600);
    --sl-input-icon-color-focus: var(--sl-color-neutral-600);
    --sl-input-placeholder-color: var(--sl-color-neutral-500);
    --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
    --sl-input-spacing-small: var(--sl-spacing-small);
    --sl-input-spacing-medium: var(--sl-spacing-medium);
    --sl-input-spacing-large: var(--sl-spacing-large);
    --sl-input-filled-background-color: var(--sl-color-neutral-100);
    --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
    --sl-input-filled-background-color-focus: var(--sl-color-neutral-0);
    --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
    --sl-input-filled-color: var(--sl-color-neutral-800);
    --sl-input-filled-color-hover: var(--sl-color-neutral-800);
    --sl-input-filled-color-focus: var(--sl-color-neutral-700);
    --sl-input-filled-color-disabled: var(--sl-color-neutral-800);

    --sl-input-focus-ring-color: var(--ignt-color-primary-500);
    --sl-input-focus-ring-offset: 0;

    --sl-input-label-font-size-small: var(--sl-font-size-small);
    --sl-input-label-font-size-medium: var(--sl-font-size-medium);
    --sl-input-label-font-size-large: var(--sl-font-size-large);
    --sl-input-label-color: inherit;

    --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
    --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
    --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
    --sl-input-help-text-color: var(--sl-color-neutral-500);

    --sl-toggle-size-small: 0.875rem;
    --sl-toggle-size-medium: 1.125rem;
    --sl-toggle-size-large: 1.375rem;

    --sl-overlay-background-color: var(--sl-color-blue-gray-500);
    --sl-overlay-opacity: 33%;

    --sl-panel-background-color: var(--sl-color-neutral-0);
    --sl-panel-border-color: var(--sl-color-neutral-200);
    --sl-panel-border-width: 1px;

    --sl-tooltip-border-radius: var(--sl-border-radius-medium);
    --sl-tooltip-background-color: var(--sl-color-neutral-800);
    --sl-tooltip-color: var(--sl-color-neutral-0);
    --sl-tooltip-font-family: var(--sl-font-sans);
    --sl-tooltip-font-weight: var(--sl-font-weight-normal);
    --sl-tooltip-font-size: var(--sl-font-size-small);
    --sl-tooltip-line-height: var(--sl-line-height-dense);
    --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
    --sl-tooltip-arrow-size: 6px;

    --sl-z-index-drawer: var(--ignt-z-index-drawer);
    --sl-z-index-content: var(--ignt-z-index-content);
    --sl-z-index-dialog: var(--ignt-z-index-dialog);
    --sl-z-index-dropdown: var(--ignt-z-index-dropdown);
    --sl-z-index-toast: var(--ignt-z-index-toast);
    --sl-z-index-tooltip: var(--ignt-z-index-tooltip);

    --sl-foreground-color: var(--sl-color-neutral-0);
    --sl-background-color: var(--sl-color-neutral-1000);

    --sl-hover-color: var(--sl-color-primary-500);
    --sl-scrollbar-color: var(--sl-color-neutral-300);
  }
}

:root {
  --ignt-color-gray-50: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-down) 95%
  );
  --ignt-color-gray-100: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-down) 90%
  );
  --ignt-color-gray-200: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-down) 75%
  );
  --ignt-color-gray-300: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-down) 60%
  );
  --ignt-color-gray-400: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-down) 25%
  );
  --ignt-color-gray-500: var(--ignt-color-gray);
  --ignt-color-gray-600: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-up) 15%
  );
  --ignt-color-gray-700: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-up) 40%
  );
  --ignt-color-gray-800: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-up) 60%
  );
  --ignt-color-gray-900: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-up) 70%
  );
  --ignt-color-gray-950: color-mix(
    in srgb,
    var(--ignt-color-gray),
    var(--ignt-mix-color-up) 80%
  );

  --ignt-input-height-small: 1.875rem;
  --ignt-input-height-medium: 2.5rem;
  --ignt-input-height-large: 3.125rem;
}

.form-control--unwrapped .input {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: stretch;
  justify-content: start;
  position: relative;
  width: 100%;
  font-family: var(--sl-input-font-family);
  font-weight: var(--sl-input-font-weight);
  letter-spacing: var(--sl-input-letter-spacing);
  vertical-align: middle;
  overflow: hidden;
  cursor: text;
  transition: var(--sl-transition-fast) color,
  var(--sl-transition-fast) border,
  var(--sl-transition-fast) box-shadow,
  var(--sl-transition-fast) background-color;
}

.form-control--unwrapped .input--standard {
  background-color: var(--sl-input-background-color);
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
}

.form-control--unwrapped .input--standard:hover:not(.input--disabled) {
  background-color: var(--sl-input-background-color-hover);
  border-color: var(--sl-input-border-color-hover);
}

.form-control--unwrapped .input--standard.input--focused:not(.input--disabled) {
  background-color: var(--sl-input-background-color-focus);
  border-color: var(--sl-input-border-color-focus);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
}

.form-control--unwrapped
.input--standard.input--focused:not(.input--disabled)
.input__control {
  color: var(--sl-input-color-focus);
}

.form-control--unwrapped .input--standard.input--disabled {
  background-color: var(--sl-input-background-color-disabled);
  border-color: var(--sl-input-border-color-disabled);
  opacity: 0.5;
  cursor: not-allowed;
}

.form-control--unwrapped .input--standard.input--disabled .input__control {
  color: var(--sl-input-color-disabled);
}

.form-control--unwrapped
.input--standard.input--disabled
.input__control::placeholder {
  color: var(--sl-input-placeholder-color-disabled);
}

.form-control--unwrapped .input--filled {
  border: none;
  background-color: var(--sl-input-filled-background-color);
  color: var(--sl-input-color);
}

.form-control--unwrapped .input--filled:hover:not(.input--disabled) {
  background-color: var(--sl-input-filled-background-color-hover);
}

.form-control--unwrapped .input--filled.input--focused:not(.input--disabled) {
  background-color: var(--sl-input-filled-background-color-focus);
  outline: var(--sl-focus-ring);
  outline-offset: var(--sl-focus-ring-offset);
}

.form-control--unwrapped .input--filled.input--disabled {
  background-color: var(--sl-input-filled-background-color-disabled);
  opacity: 0.5;
  cursor: not-allowed;
}

.form-control--unwrapped .input__control {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  min-width: 0;
  height: 100%;
  color: var(--sl-input-color);
  border: none;
  background: inherit;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: inherit;
  -webkit-appearance: none;
}

.form-control--unwrapped .input__control::-webkit-search-decoration,
.form-control--unwrapped .input__control::-webkit-search-cancel-button,
.form-control--unwrapped .input__control::-webkit-search-results-button,
.form-control--unwrapped .input__control::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.form-control--unwrapped .input__control:-webkit-autofill,
.form-control--unwrapped .input__control:-webkit-autofill:hover,
.form-control--unwrapped .input__control:-webkit-autofill:focus,
.form-control--unwrapped .input__control:-webkit-autofill:active {
  box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
  -webkit-text-fill-color: var(--sl-color-primary-500);
  caret-color: var(--sl-input-color);
}

.form-control--unwrapped .input--filled .input__control:-webkit-autofill,
.form-control--unwrapped .input--filled .input__control:-webkit-autofill:hover,
.form-control--unwrapped .input--filled .input__control:-webkit-autofill:focus,
.form-control--unwrapped
.input--filled
.input__control:-webkit-autofill:active {
  box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-filled-background-color) inset !important;
}

.form-control--unwrapped .input__control::placeholder {
  color: var(--sl-input-placeholder-color);
  user-select: none;
  -webkit-user-select: none;
}

.form-control--unwrapped .input:hover:not(.input--disabled) .input__control {
  color: var(--sl-input-color-hover);
}

.form-control--unwrapped .input__control:focus {
  outline: none;
}

.form-control--unwrapped .input__prefix,
.form-control--unwrapped .input__suffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  cursor: default;
}

.form-control--unwrapped .input__prefix ::slotted(sl-icon),
.form-control--unwrapped .input__suffix ::slotted(sl-icon) {
  color: var(--sl-input-icon-color);
}

.form-control--unwrapped .input--small {
  border-radius: var(--sl-input-border-radius-small);
  font-size: var(--sl-input-font-size-small);
  height: var(--sl-input-height-small);
}

.form-control--unwrapped .input--small .input__control {
  height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
  padding: 0 var(--sl-input-spacing-small);
}

.form-control--unwrapped .input--small .input__clear,
.form-control--unwrapped .input--small .input__password-toggle {
  width: calc(1em + var(--sl-input-spacing-small) * 2);
}

.form-control--unwrapped .input--small .input__prefix ::slotted(*) {
  margin-inline-start: var(--sl-input-spacing-small);
}

.form-control--unwrapped .input--small .input__suffix ::slotted(*) {
  margin-inline-end: var(--sl-input-spacing-small);
}

.form-control--unwrapped .input--medium {
  border-radius: var(--sl-input-border-radius-medium);
  font-size: var(--sl-input-font-size-medium);
  height: var(--sl-input-height-medium);
}

.form-control--unwrapped .input--medium .input__control {
  height: calc(
    var(--sl-input-height-medium) - var(--sl-input-border-width) * 2
  );
  padding: 0 var(--sl-input-spacing-medium);
}

.form-control--unwrapped .input--medium .input__clear,
.form-control--unwrapped .input--medium .input__password-toggle {
  width: calc(1em + var(--sl-input-spacing-medium) * 2);
}

.form-control--unwrapped .input--medium .input__prefix ::slotted(*) {
  margin-inline-start: var(--sl-input-spacing-medium);
}

.form-control--unwrapped .input--medium .input__suffix ::slotted(*) {
  margin-inline-end: var(--sl-input-spacing-medium);
}

.form-control--unwrapped .input--large {
  border-radius: var(--sl-input-border-radius-large);
  font-size: var(--sl-input-font-size-large);
  height: var(--sl-input-height-large);
}

.form-control--unwrapped .input--large .input__control {
  height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
  padding: 0 var(--sl-input-spacing-large);
}

.form-control--unwrapped .input--large .input__clear,
.form-control--unwrapped .input--large .input__password-toggle {
  width: calc(1em + var(--sl-input-spacing-large) * 2);
}

.form-control--unwrapped .input--large .input__prefix ::slotted(*) {
  margin-inline-start: var(--sl-input-spacing-large);
}

.form-control--unwrapped .input--large .input__suffix ::slotted(*) {
  margin-inline-end: var(--sl-input-spacing-large);
}

.form-control--unwrapped .input--pill.input--small {
  border-radius: var(--sl-input-height-small);
}

.form-control--unwrapped .input--pill.input--medium {
  border-radius: var(--sl-input-height-medium);
}

.form-control--unwrapped .input--pill.input--large {
  border-radius: var(--sl-input-height-large);
}

.form-control--unwrapped .input__clear:not(.input__clear--visible) {
  visibility: hidden;
}

.form-control--unwrapped .input__clear,
.form-control--unwrapped .input__password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  color: var(--sl-input-icon-color);
  border: none;
  background: none;
  padding: 0;
  transition: var(--sl-transition-fast) color;
  cursor: pointer;
}

.form-control--unwrapped .input__clear:hover,
.form-control--unwrapped .input__password-toggle:hover {
  color: var(--sl-input-icon-color-hover);
}

.form-control--unwrapped .input__clear:focus,
.form-control--unwrapped .input__password-toggle:focus {
  outline: none;
}

.form-control--unwrapped .input--empty .input__clear {
  visibility: hidden;
}

.form-control--unwrapped ::-ms-reveal {
  display: none;
}

.form-control--unwrapped
.input--no-spin-buttons
input[type="number"]::-webkit-outer-spin-button,
.form-control--unwrapped
.input--no-spin-buttons
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

.form-control--unwrapped
:host(.sl-button-group__button--last:not(.sl-button-group__button--first))
.input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}