@layer theme-color-configurator {
  :root {
    --primary-color: oklch(72.403% 0.17013 59.763);
    --p-primary-50:  oklch(98% 0.03 48.7);
    --p-primary-100: oklch(94% 0.06 48.7);
    --p-primary-200: oklch(88% 0.11 48.7);
    --p-primary-300: oklch(82% 0.14 48.7);
    --p-primary-400: oklch(75% 0.16 48.7);
    --p-primary-500: oklch(72.403% 0.17013 59.763);
    --p-primary-600: oklch(60% 0.16 48.7);
    --p-primary-700: oklch(52% 0.14 48.7);
    --p-primary-800: oklch(44% 0.12 48.7);
    --p-primary-900: oklch(36% 0.10 48.7);
    --p-primary-950: oklch(28% 0.08 48.7);
    --primary-color-text: oklch(100% 0 0 / 87%);
    --primary-hover-color: oklch(82% 0.14 48.7);

    --text-color: oklch(18% 0 0 / 87%);
    --text-color-secondary: oklch(18% 0 0 / 60%);

    --surface-0:   oklch(100% 0 0);
    --surface-50:  oklch(96% 0 0);
    --surface-100: oklch(92% 0 0);
    --surface-200: oklch(87% 0 0);
    --surface-300: oklch(81% 0 0);
    --surface-400: oklch(65% 0 0);
    --surface-500: oklch(55% 0 0);
    --surface-600: oklch(45% 0 0);
    --surface-700: oklch(35% 0 0);
    --surface-800: oklch(28% 0 0);
    --surface-900: oklch(18% 0 0);

    --surface-ground: oklch(98.25% 0 0);
    --surface-section: oklch(98.25% 0 0);
    --surface-card: oklch(93.33% 0 0);
    --surface-overlay: oklch(90.24% 0 0);
    --surface-border: oklch(0% 0 0 / 12%);
    --surface-hover: oklch(0% 0 0 / 4%);
    --maskbg: oklch(0% 0 0 / 32%);

    --content-padding:1rem;
    --inline-spacing:0.5rem;
    --border-radius:4px;
    --focus-ring: none;
    --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;

    /* Override PrimeNG & Tailwind internal properties */
    --tw-ring-color: var(--primary-color);

    --p-primary-color: var(--primary-color);
    --p-primary-color-text: var(--primary-color-text);
    --p-primary-hover-color: var(--primary-hover-color);
    --p-focus-color: var(--primary-color);
    --p-focus-color-text: var(--primary-color-text);

    /* Tailwind v4 colors */
    --p-emerald-50: oklch(98% 0.01 160);
    --p-emerald-100: oklch(96% 0.03 160);
    --p-emerald-200: oklch(91% 0.07 160);
    --p-emerald-300: oklch(85% 0.12 160);
    --p-emerald-400: oklch(77% 0.15 160);
    --p-emerald-500: oklch(69% 0.17 160);
    --p-emerald-600: oklch(59% 0.16 160);
    --p-emerald-700: oklch(49% 0.14 160);
    --p-emerald-800: oklch(39% 0.12 160);
    --p-emerald-900: oklch(31% 0.09 160);
    --p-emerald-950: oklch(19% 0.06 160);

    --p-green-50: oklch(98% 0.01 145);
    --p-green-100: oklch(96% 0.03 145);
    --p-green-200: oklch(92% 0.07 145);
    --p-green-300: oklch(86% 0.11 145);
    --p-green-400: oklch(79% 0.15 145);
    --p-green-500: oklch(71% 0.17 145);
    --p-green-600: oklch(61% 0.16 145);
    --p-green-700: oklch(51% 0.14 145);
    --p-green-800: oklch(41% 0.12 145);
    --p-green-900: oklch(33% 0.10 145);
    --p-green-950: oklch(21% 0.07 145);

    --p-lime-50: oklch(98% 0.01 125);
    --p-lime-100: oklch(96% 0.04 125);
    --p-lime-200: oklch(92% 0.09 125);
    --p-lime-300: oklch(88% 0.13 125);
    --p-lime-400: oklch(82% 0.16 125);
    --p-lime-500: oklch(76% 0.18 125);
    --p-lime-600: oklch(65% 0.16 125);
    --p-lime-700: oklch(54% 0.14 125);
    --p-lime-800: oklch(44% 0.12 125);
    --p-lime-900: oklch(36% 0.10 125);
    --p-lime-950: oklch(24% 0.07 125);

    --p-red-50: oklch(98% 0.01 25);
    --p-red-100: oklch(93% 0.03 25);
    --p-red-200: oklch(86% 0.07 25);
    --p-red-300: oklch(77% 0.13 25);
    --p-red-400: oklch(68% 0.18 25);
    --p-red-500: oklch(60% 0.22 25);
    --p-red-600: oklch(52% 0.21 25);
    --p-red-700: oklch(44% 0.19 25);
    --p-red-800: oklch(37% 0.17 25);
    --p-red-900: oklch(31% 0.14 25);
    --p-red-950: oklch(21% 0.09 25);

    --p-orange-50: oklch(98% 0.01 45);
    --p-orange-100: oklch(94% 0.03 45);
    --p-orange-200: oklch(88% 0.07 45);
    --p-orange-300: oklch(80% 0.12 45);
    --p-orange-400: oklch(72% 0.16 45);
    --p-orange-500: oklch(65% 0.19 45);
    --p-orange-600: oklch(57% 0.18 45);
    --p-orange-700: oklch(49% 0.16 45);
    --p-orange-800: oklch(41% 0.14 45);
    --p-orange-900: oklch(34% 0.12 45);
    --p-orange-950: oklch(24% 0.08 45);

    --p-amber-50: oklch(98% 0.01 65);
    --p-amber-100: oklch(95% 0.03 65);
    --p-amber-200: oklch(90% 0.07 65);
    --p-amber-300: oklch(84% 0.11 65);
    --p-amber-400: oklch(78% 0.15 65);
    --p-amber-500: oklch(72% 0.18 65);
    --p-amber-600: oklch(63% 0.16 65);
    --p-amber-700: oklch(54% 0.14 65);
    --p-amber-800: oklch(45% 0.13 65);
    --p-amber-900: oklch(37% 0.11 65);
    --p-amber-950: oklch(27% 0.08 65);

    --p-yellow-50: oklch(99% 0.01 90);
    --p-yellow-100: oklch(97% 0.04 90);
    --p-yellow-200: oklch(93% 0.08 90);
    --p-yellow-300: oklch(89% 0.13 90);
    --p-yellow-400: oklch(85% 0.16 90);
    --p-yellow-500: oklch(80% 0.17 90);
    --p-yellow-600: oklch(70% 0.15 90);
    --p-yellow-700: oklch(60% 0.13 90);
    --p-yellow-800: oklch(50% 0.11 90);
    --p-yellow-900: oklch(40% 0.09 90);
    --p-yellow-950: oklch(30% 0.07 90);

    --p-teal-50: oklch(98% 0.01 190);
    --p-teal-100: oklch(95% 0.03 190);
    --p-teal-200: oklch(90% 0.07 190);
    --p-teal-300: oklch(84% 0.11 190);
    --p-teal-400: oklch(76% 0.14 190);
    --p-teal-500: oklch(68% 0.16 190);
    --p-teal-600: oklch(58% 0.14 190);
    --p-teal-700: oklch(48% 0.12 190);
    --p-teal-800: oklch(39% 0.10 190);
    --p-teal-900: oklch(31% 0.08 190);
    --p-teal-950: oklch(21% 0.06 190);

    --p-cyan-50: oklch(98% 0.01 220);
    --p-cyan-100: oklch(94% 0.03 220);
    --p-cyan-200: oklch(88% 0.07 220);
    --p-cyan-300: oklch(80% 0.11 220);
    --p-cyan-400: oklch(72% 0.14 220);
    --p-cyan-500: oklch(64% 0.16 220);
    --p-cyan-600: oklch(54% 0.14 220);
    --p-cyan-700: oklch(45% 0.12 220);
    --p-cyan-800: oklch(37% 0.10 220);
    --p-cyan-900: oklch(30% 0.08 220);
    --p-cyan-950: oklch(21% 0.06 220);

    --p-sky-50: oklch(98% 0.01 240);
    --p-sky-100: oklch(94% 0.03 240);
    --p-sky-200: oklch(88% 0.07 240);
    --p-sky-300: oklch(80% 0.12 240);
    --p-sky-400: oklch(72% 0.15 240);
    --p-sky-500: oklch(63% 0.17 240);
    --p-sky-600: oklch(53% 0.15 240);
    --p-sky-700: oklch(45% 0.13 240);
    --p-sky-800: oklch(37% 0.11 240);
    --p-sky-900: oklch(30% 0.09 240);
    --p-sky-950: oklch(21% 0.07 240);

    --p-blue-50: oklch(98% 0.01 260);
    --p-blue-100: oklch(92% 0.03 260);
    --p-blue-200: oklch(85% 0.07 260);
    --p-blue-300: oklch(76% 0.12 260);
    --p-blue-400: oklch(66% 0.17 260);
    --p-blue-500: oklch(59% 0.20 260);
    --p-blue-600: oklch(50% 0.18 260);
    --p-blue-700: oklch(42% 0.16 260);
    --p-blue-800: oklch(35% 0.14 260);
    --p-blue-900: oklch(29% 0.11 260);
    --p-blue-950: oklch(20% 0.08 260);

    --p-indigo-50: oklch(98% 0.01 280);
    --p-indigo-100: oklch(92% 0.03 280);
    --p-indigo-200: oklch(85% 0.07 280);
    --p-indigo-300: oklch(75% 0.12 280);
    --p-indigo-400: oklch(65% 0.17 280);
    --p-indigo-500: oklch(57% 0.19 280);
    --p-indigo-600: oklch(48% 0.18 280);
    --p-indigo-700: oklch(40% 0.16 280);
    --p-indigo-800: oklch(33% 0.13 280);
    --p-indigo-900: oklch(27% 0.11 280);
    --p-indigo-950: oklch(18% 0.08 280);

    --p-violet-50: oklch(98% 0.01 300);
    --p-violet-100: oklch(93% 0.03 300);
    --p-violet-200: oklch(86% 0.07 300);
    --p-violet-300: oklch(77% 0.12 300);
    --p-violet-400: oklch(68% 0.17 300);
    --p-violet-500: oklch(60% 0.19 300);
    --p-violet-600: oklch(51% 0.18 300);
    --p-violet-700: oklch(43% 0.16 300);
    --p-violet-800: oklch(35% 0.14 300);
    --p-violet-900: oklch(29% 0.11 300);
    --p-violet-950: oklch(19% 0.08 300);

    --p-purple-50: oklch(98% 0.01 320);
    --p-purple-100: oklch(93% 0.03 320);
    --p-purple-200: oklch(86% 0.07 320);
    --p-purple-300: oklch(77% 0.13 320);
    --p-purple-400: oklch(67% 0.18 320);
    --p-purple-500: oklch(59% 0.20 320);
    --p-purple-600: oklch(50% 0.19 320);
    --p-purple-700: oklch(42% 0.17 320);
    --p-purple-800: oklch(35% 0.14 320);
    --p-purple-900: oklch(28% 0.11 320);
    --p-purple-950: oklch(18% 0.08 320);

    --p-fuchsia-50: oklch(98% 0.01 340);
    --p-fuchsia-100: oklch(93% 0.03 340);
    --p-fuchsia-200: oklch(86% 0.07 340);
    --p-fuchsia-300: oklch(76% 0.13 340);
    --p-fuchsia-400: oklch(66% 0.19 340);
    --p-fuchsia-500: oklch(58% 0.21 340);
    --p-fuchsia-600: oklch(49% 0.20 340);
    --p-fuchsia-700: oklch(41% 0.18 340);
    --p-fuchsia-800: oklch(34% 0.15 340);
    --p-fuchsia-900: oklch(28% 0.12 340);
    --p-fuchsia-950: oklch(18% 0.09 340);

    --p-pink-50: oklch(98% 0.01 0);
    --p-pink-100: oklch(93% 0.03 0);
    --p-pink-200: oklch(86% 0.07 0);
    --p-pink-300: oklch(77% 0.12 0);
    --p-pink-400: oklch(67% 0.18 0);
    --p-pink-500: oklch(59% 0.20 0);
    --p-pink-600: oklch(50% 0.19 0);
    --p-pink-700: oklch(42% 0.17 0);
    --p-pink-800: oklch(35% 0.14 0);
    --p-pink-900: oklch(29% 0.11 0);
    --p-pink-950: oklch(19% 0.08 0);

    --p-rose-50: oklch(98% 0.01 10);
    --p-rose-100: oklch(93% 0.03 10);
    --p-rose-200: oklch(86% 0.07 10);
    --p-rose-300: oklch(77% 0.13 10);
    --p-rose-400: oklch(68% 0.18 10);
    --p-rose-500: oklch(60% 0.21 10);
    --p-rose-600: oklch(52% 0.20 10);
    --p-rose-700: oklch(44% 0.18 10);
    --p-rose-800: oklch(37% 0.15 10);
    --p-rose-900: oklch(31% 0.12 10);
    --p-rose-950: oklch(21% 0.09 10);

    --p-slate-50: oklch(99% 0.004 250);
    --p-slate-100: oklch(96% 0.008 250);
    --p-slate-200: oklch(91% 0.012 250);
    --p-slate-300: oklch(83% 0.016 250);
    --p-slate-400: oklch(70% 0.020 250);
    --p-slate-500: oklch(55% 0.024 250);
    --p-slate-600: oklch(44% 0.022 250);
    --p-slate-700: oklch(34% 0.018 250);
    --p-slate-800: oklch(24% 0.014 250);
    --p-slate-900: oklch(16% 0.010 250);
    --p-slate-950: oklch(10% 0.008 250);

    --p-gray-50: oklch(99% 0 0);
    --p-gray-100: oklch(96% 0 0);
    --p-gray-200: oklch(91% 0 0);
    --p-gray-300: oklch(83% 0 0);
    --p-gray-400: oklch(70% 0 0);
    --p-gray-500: oklch(55% 0 0);
    --p-gray-600: oklch(44% 0 0);
    --p-gray-700: oklch(34% 0 0);
    --p-gray-800: oklch(24% 0 0);
    --p-gray-900: oklch(16% 0 0);
    --p-gray-950: oklch(10% 0 0);

    --p-zinc-50: oklch(99% 0.002 250);
    --p-zinc-100: oklch(96% 0.004 250);
    --p-zinc-200: oklch(91% 0.006 250);
    --p-zinc-300: oklch(83% 0.008 250);
    --p-zinc-400: oklch(70% 0.010 250);
    --p-zinc-500: oklch(55% 0.012 250);
    --p-zinc-600: oklch(44% 0.010 250);
    --p-zinc-700: oklch(34% 0.008 250);
    --p-zinc-800: oklch(24% 0.006 250);
    --p-zinc-900: oklch(16% 0.004 250);
    --p-zinc-950: oklch(10% 0.002 250);

    --p-neutral-50: oklch(99% 0 0);
    --p-neutral-100: oklch(96% 0 0);
    --p-neutral-200: oklch(91% 0 0);
    --p-neutral-300: oklch(83% 0 0);
    --p-neutral-400: oklch(70% 0 0);
    --p-neutral-500: oklch(55% 0 0);
    --p-neutral-600: oklch(44% 0 0);
    --p-neutral-700: oklch(34% 0 0);
    --p-neutral-800: oklch(24% 0 0);
    --p-neutral-900: oklch(16% 0 0);
    --p-neutral-950: oklch(10% 0 0);

    --p-stone-50: oklch(99% 0.004 60);
    --p-stone-100: oklch(96% 0.008 60);
    --p-stone-200: oklch(91% 0.012 60);
    --p-stone-300: oklch(83% 0.016 60);
    --p-stone-400: oklch(70% 0.020 60);
    --p-stone-500: oklch(55% 0.024 60);
    --p-stone-600: oklch(44% 0.022 60);
    --p-stone-700: oklch(34% 0.018 60);
    --p-stone-800: oklch(24% 0.014 60);
    --p-stone-900: oklch(16% 0.010 60);
    --p-stone-950: oklch(10% 0.008 60);
  }

  .text-primary     {color: var(--primary-color) }
  .text-secondary   {color: var(--primary-color-text) }
  .text-surface-0   { color: var(--surface-0); }
  .text-surface-50  { color: var(--surface-50); }
  .text-surface-100 { color: var(--surface-100); }
  .text-surface-200 { color: var(--surface-200); }
  .text-surface-300 { color: var(--surface-300); }
  .text-surface-400 { color: var(--surface-400); }
  .text-surface-500 { color: var(--surface-500); }
  .text-surface-600 { color: var(--surface-600); }
  .text-surface-700 { color: var(--surface-700); }
  .text-surface-800 { color: var(--surface-800); }
  .text-surface-900 { color: var(--surface-900); }

  .bg-primary     { background-color: var(--primary-color) }
  .bg-secondary   { background-color: var(--primary-color-text) }
  .bg-surface-0   { background-color: var(--surface-0); }
  .bg-surface-50  { background-color: var(--surface-50); }
  .bg-surface-100 { background-color: var(--surface-100); }
  .bg-surface-200 { background-color: var(--surface-200); }
  .bg-surface-300 { background-color: var(--surface-300); }
  .bg-surface-400 { background-color: var(--surface-400); }
  .bg-surface-500 { background-color: var(--surface-500); }
  .bg-surface-600 { background-color: var(--surface-600); }
  .bg-surface-700 { background-color: var(--surface-700); }
  .bg-surface-800 { background-color: var(--surface-800); }
  .bg-surface-900 { background-color: var(--surface-900); }

  .border-primary { border-color: var(--primary-color) }
}

/* Add your variable customizations of theme here */
* {
  box-sizing: border-box;
}