@pastel-palette/tailwindcss/dist/theme-oklch.css

A comprehensive kawaii-inspired color system with OKLCH color space support, TypeScript definitions, and TailwindCSS v4 integration. Features a cute & kawaii aesthetic with soft, pastel tones.

/* This file is auto-generated by Pastel Palette for Tailwind v4 */
@import "tailwindcss";

/* Light mode colors (default) */
@theme {
  --color-blue: oklch(0.65 0.18 237);
  --color-pink: oklch(0.68 0.22 350);
  --color-purple: oklch(0.65 0.2 280);
  --color-green: oklch(0.67 0.15 155);
  --color-orange: oklch(0.68 0.15 60);
  --color-yellow: oklch(0.75 0.12 100);
  --color-sky: oklch(0.7 0.14 210);
  --color-red: oklch(0.65 0.2 20);
  --color-brown: oklch(0.62 0.12 45);
  --color-gray: oklch(0.65 0 0);
  --color-neutral: oklch(0.6 0 0);
  --color-black: oklch(0.2 0 0);
  --color-white: oklch(0.99 0.005 200);
  --color-teal: oklch(0.66 0.16 180);
  --color-cyan: oklch(0.7 0.15 195);
  --color-indigo: oklch(0.58 0.2 260);
  --color-violet: oklch(0.62 0.22 300);
  --color-lime: oklch(0.75 0.16 125);
  --color-emerald: oklch(0.64 0.16 160);
  --color-amber: oklch(0.75 0.13 85);
  --color-rose: oklch(0.63 0.21 15);
  --color-slate: oklch(0.55 0.015 240);
  --color-zinc: oklch(0.58 0.01 240);
  --color-gray1: oklch(0.100 0 0);
  --color-gray2: oklch(0.180 0 0);
  --color-gray3: oklch(0.260 0 0);
  --color-gray4: oklch(0.340 0 0);
  --color-gray5: oklch(0.420 0 0);
  --color-gray6: oklch(0.500 0 0);
  --color-gray7: oklch(0.580 0 0);
  --color-gray8: oklch(0.660 0 0);
  --color-gray9: oklch(0.740 0 0);
  --color-gray10: oklch(0.820 0 0);
  --color-text: oklch(0.15 0.0049 230);
  --color-text-secondary: oklch(0.35 0.0049 230);
  --color-text-tertiary: oklch(0.5 0.0049 230);
  --color-text-quaternary: oklch(0.65 0.0049 230);
  --color-placeholderText: oklch(0.8 0.0049 230);
  --color-border: oklch(0.92 0.0049 230);
  --color-border-secondary: oklch(0.94 0.0049 230);
  --color-separator: oklch(0.88 0.0049 230);
  --color-link: oklch(0.7 0.16 250);
  --color-disabledControl: oklch(0.94 0.0049 230);
  --color-disabledText: oklch(0.9 0.0049 230);
  --color-background: oklch(0.99 0.0049 230);
  --color-background-secondary: oklch(0.98 0.0049 230);
  --color-background-tertiary: oklch(0.96 0.0049 230);
  --color-background-quaternary: oklch(0.94 0.0049 230);
  --color-background-quinary: oklch(0.92 0.0049 230);
  --color-fill: oklch(0.9 0.0049 230);
  --color-fill-secondary: oklch(0.87 0.0049 230);
  --color-fill-tertiary: oklch(0.84 0.0049 230);
  --color-fill-quaternary: oklch(0.81 0.0049 230);
  --color-material-ultrathick: oklch(0.96 0.0049 230 / 0.93);
  --color-material-thick: oklch(0.96 0.0049 230 / 0.85);
  --color-material-medium: oklch(0.96 0.0049 230 / 0.65);
  --color-material-thin: oklch(0.96 0.0049 230 / 0.60);
  --color-material-ultrathin: oklch(0.96 0.0049 230 / 0.45);
  --color-material-opaque: oklch(0.96 0.0049 230);
  --color-accent: oklch(0.65 0.18 237);
  --color-primary: oklch(0.55 0.20 250);
  --color-secondary: oklch(0.77 0.14 170);
}

/* All color variants with suffixes */
@theme {
  --color-blue-light: oklch(0.65 0.18 237);
  --color-blue-dark: oklch(0.7 0.16 237);
  --color-blue-hc: oklch(0.45 0.25 237);
  --color-blue-kawaii: oklch(0.85 0.12 237);
  --color-pink-light: oklch(0.68 0.22 350);
  --color-pink-dark: oklch(0.73 0.2 350);
  --color-pink-hc: oklch(0.5 0.3 350);
  --color-pink-kawaii: oklch(0.87 0.16 350);
  --color-purple-light: oklch(0.65 0.2 280);
  --color-purple-dark: oklch(0.7 0.18 280);
  --color-purple-hc: oklch(0.45 0.28 280);
  --color-purple-kawaii: oklch(0.84 0.14 280);
  --color-green-light: oklch(0.67 0.15 155);
  --color-green-dark: oklch(0.72 0.16 155);
  --color-green-hc: oklch(0.5 0.2 155);
  --color-green-kawaii: oklch(0.85 0.12 155);
  --color-orange-light: oklch(0.68 0.15 60);
  --color-orange-dark: oklch(0.73 0.16 60);
  --color-orange-hc: oklch(0.55 0.18 60);
  --color-orange-kawaii: oklch(0.86 0.12 60);
  --color-yellow-light: oklch(0.75 0.12 100);
  --color-yellow-dark: oklch(0.78 0.14 100);
  --color-yellow-hc: oklch(0.65 0.15 100);
  --color-yellow-kawaii: oklch(0.9 0.1 100);
  --color-sky-light: oklch(0.7 0.14 210);
  --color-sky-dark: oklch(0.75 0.13 210);
  --color-sky-hc: oklch(0.5 0.2 210);
  --color-sky-kawaii: oklch(0.87 0.11 210);
  --color-red-light: oklch(0.65 0.2 20);
  --color-red-dark: oklch(0.7 0.19 20);
  --color-red-hc: oklch(0.5 0.28 20);
  --color-red-kawaii: oklch(0.84 0.14 20);
  --color-brown-light: oklch(0.62 0.12 45);
  --color-brown-dark: oklch(0.67 0.12 45);
  --color-brown-hc: oklch(0.45 0.15 45);
  --color-brown-kawaii: oklch(0.82 0.1 45);
  --color-gray-light: oklch(0.65 0 0);
  --color-gray-dark: oklch(0.7 0 0);
  --color-gray-hc: oklch(0.3 0 0);
  --color-gray-kawaii: oklch(0.87 0 0);
  --color-neutral-light: oklch(0.6 0 0);
  --color-neutral-dark: oklch(0.65 0 0);
  --color-neutral-hc: oklch(0.25 0 0);
  --color-neutral-kawaii: oklch(0.82 0 0);
  --color-black-light: oklch(0.2 0 0);
  --color-black-dark: oklch(0.25 0 0);
  --color-black-hc: oklch(0 0 0);
  --color-black-kawaii: oklch(0.35 0 0);
  --color-white-light: oklch(0.99 0.005 200);
  --color-white-dark: oklch(0.97 0 0);
  --color-white-hc: oklch(1 0 0);
  --color-white-kawaii: oklch(0.999 0 0);
  --color-teal-light: oklch(0.66 0.16 180);
  --color-teal-dark: oklch(0.71 0.15 180);
  --color-teal-hc: oklch(0.45 0.25 180);
  --color-teal-kawaii: oklch(0.86 0.1 180);
  --color-cyan-light: oklch(0.7 0.15 195);
  --color-cyan-dark: oklch(0.75 0.14 195);
  --color-cyan-hc: oklch(0.5 0.22 195);
  --color-cyan-kawaii: oklch(0.88 0.09 195);
  --color-indigo-light: oklch(0.58 0.2 260);
  --color-indigo-dark: oklch(0.65 0.18 260);
  --color-indigo-hc: oklch(0.4 0.28 260);
  --color-indigo-kawaii: oklch(0.83 0.11 260);
  --color-violet-light: oklch(0.62 0.22 300);
  --color-violet-dark: oklch(0.68 0.2 300);
  --color-violet-hc: oklch(0.42 0.3 300);
  --color-violet-kawaii: oklch(0.85 0.12 300);
  --color-lime-light: oklch(0.75 0.16 125);
  --color-lime-dark: oklch(0.78 0.17 125);
  --color-lime-hc: oklch(0.6 0.22 125);
  --color-lime-kawaii: oklch(0.89 0.08 125);
  --color-emerald-light: oklch(0.64 0.16 160);
  --color-emerald-dark: oklch(0.69 0.15 160);
  --color-emerald-hc: oklch(0.48 0.22 160);
  --color-emerald-kawaii: oklch(0.86 0.1 160);
  --color-amber-light: oklch(0.75 0.13 85);
  --color-amber-dark: oklch(0.78 0.14 85);
  --color-amber-hc: oklch(0.62 0.18 85);
  --color-amber-kawaii: oklch(0.9 0.08 85);
  --color-rose-light: oklch(0.63 0.21 15);
  --color-rose-dark: oklch(0.68 0.19 15);
  --color-rose-hc: oklch(0.48 0.3 15);
  --color-rose-kawaii: oklch(0.86 0.13 15);
  --color-slate-light: oklch(0.55 0.015 240);
  --color-slate-dark: oklch(0.6 0.015 240);
  --color-slate-hc: oklch(0.35 0.02 240);
  --color-slate-kawaii: oklch(0.84 0.01 240);
  --color-zinc-light: oklch(0.58 0.01 240);
  --color-zinc-dark: oklch(0.63 0.01 240);
  --color-zinc-hc: oklch(0.38 0.01 240);
  --color-zinc-kawaii: oklch(0.85 0.005 240);
  --color-gray1-light: oklch(0.100 0 0);
  --color-gray1-dark: oklch(0.150 0 0);
  --color-gray1-hc: oklch(0.05 0 0);
  --color-gray1-kawaii: oklch(0.15 0 0);
  --color-gray2-light: oklch(0.180 0 0);
  --color-gray2-dark: oklch(0.230 0 0);
  --color-gray2-hc: oklch(0.15 0 0);
  --color-gray2-kawaii: oklch(0.3 0 0);
  --color-gray3-light: oklch(0.260 0 0);
  --color-gray3-dark: oklch(0.310 0 0);
  --color-gray3-hc: oklch(0.2 0 0);
  --color-gray3-kawaii: oklch(0.45 0 0);
  --color-gray4-light: oklch(0.340 0 0);
  --color-gray4-dark: oklch(0.390 0 0);
  --color-gray4-hc: oklch(0.25 0 0);
  --color-gray4-kawaii: oklch(0.55 0 0);
  --color-gray5-light: oklch(0.420 0 0);
  --color-gray5-dark: oklch(0.470 0 0);
  --color-gray5-hc: oklch(0.35 0 0);
  --color-gray5-kawaii: oklch(0.65 0 0);
  --color-gray6-light: oklch(0.500 0 0);
  --color-gray6-dark: oklch(0.550 0 0);
  --color-gray6-hc: oklch(0.4 0 0);
  --color-gray6-kawaii: oklch(0.75 0 0);
  --color-gray7-light: oklch(0.580 0 0);
  --color-gray7-dark: oklch(0.630 0 0);
  --color-gray7-hc: oklch(0.45 0 0);
  --color-gray7-kawaii: oklch(0.8 0 0);
  --color-gray8-light: oklch(0.660 0 0);
  --color-gray8-dark: oklch(0.710 0 0);
  --color-gray8-hc: oklch(0.5 0 0);
  --color-gray8-kawaii: oklch(0.85 0 0);
  --color-gray9-light: oklch(0.740 0 0);
  --color-gray9-dark: oklch(0.790 0 0);
  --color-gray9-hc: oklch(0.55 0 0);
  --color-gray9-kawaii: oklch(0.9 0 0);
  --color-gray10-light: oklch(0.820 0 0);
  --color-gray10-dark: oklch(0.870 0 0);
  --color-gray10-hc: oklch(0.6 0 0);
  --color-gray10-kawaii: oklch(0.95 0 0);
  --color-text-light: oklch(0.15 0.0049 230);
  --color-text-dark: oklch(0.95 0.0049 230);
  --color-text-secondary-light: oklch(0.35 0.0049 230);
  --color-text-secondary-dark: oklch(0.85 0.0049 230);
  --color-text-tertiary-light: oklch(0.5 0.0049 230);
  --color-text-tertiary-dark: oklch(0.7 0.0049 230);
  --color-text-quaternary-light: oklch(0.65 0.0049 230);
  --color-text-quaternary-dark: oklch(0.55 0.0049 230);
  --color-placeholderText-light: oklch(0.8 0.0049 230);
  --color-placeholderText-dark: oklch(0.6 0.0049 230);
  --color-border-light: oklch(0.92 0.0049 230);
  --color-border-dark: oklch(0.35 0.0049 230);
  --color-border-secondary-light: oklch(0.94 0.0049 230);
  --color-border-secondary-dark: oklch(0.3 0.0049 230);
  --color-separator-light: oklch(0.88 0.0049 230);
  --color-separator-dark: oklch(0.33 0.0049 230);
  --color-link-light: oklch(0.7 0.16 250);
  --color-link-dark: oklch(0.78 0.14 250);
  --color-disabledControl-light: oklch(0.94 0.0049 230);
  --color-disabledControl-dark: oklch(0.27 0.0049 230);
  --color-disabledText-light: oklch(0.9 0.0049 230);
  --color-disabledText-dark: oklch(0.55 0.0049 230);
  --color-background-light: oklch(0.99 0.0049 230);
  --color-background-dark: oklch(0.22 0.0049 230);
  --color-background-secondary-light: oklch(0.98 0.0049 230);
  --color-background-secondary-dark: oklch(0.31 0.0049 230);
  --color-background-tertiary-light: oklch(0.96 0.0049 230);
  --color-background-tertiary-dark: oklch(0.34 0.0049 230);
  --color-background-quaternary-light: oklch(0.94 0.0049 230);
  --color-background-quaternary-dark: oklch(0.37 0.0049 230);
  --color-background-quinary-light: oklch(0.92 0.0049 230);
  --color-background-quinary-dark: oklch(0.4 0.0049 230);
  --color-fill-light: oklch(0.9 0.0049 230);
  --color-fill-dark: oklch(0.3 0.0049 230);
  --color-fill-secondary-light: oklch(0.87 0.0049 230);
  --color-fill-secondary-dark: oklch(0.35 0.0049 230);
  --color-fill-tertiary-light: oklch(0.84 0.0049 230);
  --color-fill-tertiary-dark: oklch(0.4 0.0049 230);
  --color-fill-quaternary-light: oklch(0.81 0.0049 230);
  --color-fill-quaternary-dark: oklch(0.45 0.0049 230);
  --color-material-ultrathick-light: oklch(0.96 0.0049 230 / 0.93);
  --color-material-ultrathick-dark: oklch(0.2 0.0049 230 / 0.93);
  --color-material-thick-light: oklch(0.96 0.0049 230 / 0.85);
  --color-material-thick-dark: oklch(0.2 0.0049 230 / 0.85);
  --color-material-medium-light: oklch(0.96 0.0049 230 / 0.65);
  --color-material-medium-dark: oklch(0.2 0.0049 230 / 0.80);
  --color-material-thin-light: oklch(0.96 0.0049 230 / 0.60);
  --color-material-thin-dark: oklch(0.2 0.0049 230 / 0.60);
  --color-material-ultrathin-light: oklch(0.96 0.0049 230 / 0.45);
  --color-material-ultrathin-dark: oklch(0.2 0.0049 230 / 0.45);
  --color-material-opaque-light: oklch(0.96 0.0049 230);
  --color-material-opaque-dark: oklch(0.2 0.0049 230);
  --color-accent-light: oklch(0.65 0.18 237);
  --color-accent-dark: oklch(0.70 0.16 237);
  --color-primary-light: oklch(0.55 0.20 250);
  --color-primary-dark: oklch(0.75 0.17 250);
  --color-secondary-light: oklch(0.77 0.14 170);
  --color-secondary-dark: oklch(0.8 0.14 170);
}

@layer theme {
  :root {
    /* Dark mode overrides */
    @variant dark {
      --color-blue: oklch(0.7 0.16 237);
    --color-pink: oklch(0.73 0.2 350);
    --color-purple: oklch(0.7 0.18 280);
    --color-green: oklch(0.72 0.16 155);
    --color-orange: oklch(0.73 0.16 60);
    --color-yellow: oklch(0.78 0.14 100);
    --color-sky: oklch(0.75 0.13 210);
    --color-red: oklch(0.7 0.19 20);
    --color-brown: oklch(0.67 0.12 45);
    --color-gray: oklch(0.7 0 0);
    --color-neutral: oklch(0.65 0 0);
    --color-black: oklch(0.25 0 0);
    --color-white: oklch(0.97 0 0);
    --color-teal: oklch(0.71 0.15 180);
    --color-cyan: oklch(0.75 0.14 195);
    --color-indigo: oklch(0.65 0.18 260);
    --color-violet: oklch(0.68 0.2 300);
    --color-lime: oklch(0.78 0.17 125);
    --color-emerald: oklch(0.69 0.15 160);
    --color-amber: oklch(0.78 0.14 85);
    --color-rose: oklch(0.68 0.19 15);
    --color-slate: oklch(0.6 0.015 240);
    --color-zinc: oklch(0.63 0.01 240);
    --color-gray1: oklch(0.150 0 0);
    --color-gray2: oklch(0.230 0 0);
    --color-gray3: oklch(0.310 0 0);
    --color-gray4: oklch(0.390 0 0);
    --color-gray5: oklch(0.470 0 0);
    --color-gray6: oklch(0.550 0 0);
    --color-gray7: oklch(0.630 0 0);
    --color-gray8: oklch(0.710 0 0);
    --color-gray9: oklch(0.790 0 0);
    --color-gray10: oklch(0.870 0 0);
    --color-text: oklch(0.95 0.0049 230);
    --color-text-secondary: oklch(0.85 0.0049 230);
    --color-text-tertiary: oklch(0.7 0.0049 230);
    --color-text-quaternary: oklch(0.55 0.0049 230);
    --color-placeholderText: oklch(0.6 0.0049 230);
    --color-border: oklch(0.35 0.0049 230);
    --color-border-secondary: oklch(0.3 0.0049 230);
    --color-separator: oklch(0.33 0.0049 230);
    --color-link: oklch(0.78 0.14 250);
    --color-disabledControl: oklch(0.27 0.0049 230);
    --color-disabledText: oklch(0.55 0.0049 230);
    --color-background: oklch(0.22 0.0049 230);
    --color-background-secondary: oklch(0.31 0.0049 230);
    --color-background-tertiary: oklch(0.34 0.0049 230);
    --color-background-quaternary: oklch(0.37 0.0049 230);
    --color-background-quinary: oklch(0.4 0.0049 230);
    --color-fill: oklch(0.3 0.0049 230);
    --color-fill-secondary: oklch(0.35 0.0049 230);
    --color-fill-tertiary: oklch(0.4 0.0049 230);
    --color-fill-quaternary: oklch(0.45 0.0049 230);
    --color-material-ultrathick: oklch(0.2 0.0049 230 / 0.93);
    --color-material-thick: oklch(0.2 0.0049 230 / 0.85);
    --color-material-medium: oklch(0.2 0.0049 230 / 0.80);
    --color-material-thin: oklch(0.2 0.0049 230 / 0.60);
    --color-material-ultrathin: oklch(0.2 0.0049 230 / 0.45);
    --color-material-opaque: oklch(0.2 0.0049 230);
    --color-accent: oklch(0.70 0.16 237);
    --color-primary: oklch(0.75 0.17 250);
    --color-secondary: oklch(0.8 0.14 170);
    }
  }
}


@layer theme {
  [data-contrast=low], [data-contrast=low] * {
     /* Kawaii color overrides */
     --color-blue: oklch(0.85 0.12 237);
      --color-pink: oklch(0.87 0.16 350);
      --color-purple: oklch(0.84 0.14 280);
      --color-green: oklch(0.85 0.12 155);
      --color-orange: oklch(0.86 0.12 60);
      --color-yellow: oklch(0.9 0.1 100);
      --color-sky: oklch(0.87 0.11 210);
      --color-red: oklch(0.84 0.14 20);
      --color-brown: oklch(0.82 0.1 45);
      --color-gray: oklch(0.87 0 0);
      --color-neutral: oklch(0.82 0 0);
      --color-black: oklch(0.35 0 0);
      --color-white: oklch(0.999 0 0);
      --color-teal: oklch(0.86 0.1 180);
      --color-cyan: oklch(0.88 0.09 195);
      --color-indigo: oklch(0.83 0.11 260);
      --color-violet: oklch(0.85 0.12 300);
      --color-lime: oklch(0.89 0.08 125);
      --color-emerald: oklch(0.86 0.1 160);
      --color-amber: oklch(0.9 0.08 85);
      --color-rose: oklch(0.86 0.13 15);
      --color-slate: oklch(0.84 0.01 240);
      --color-zinc: oklch(0.85 0.005 240);
      --color-gray1: oklch(0.15 0 0);
      --color-gray2: oklch(0.3 0 0);
      --color-gray3: oklch(0.45 0 0);
      --color-gray4: oklch(0.55 0 0);
      --color-gray5: oklch(0.65 0 0);
      --color-gray6: oklch(0.75 0 0);
      --color-gray7: oklch(0.8 0 0);
      --color-gray8: oklch(0.85 0 0);
      --color-gray9: oklch(0.9 0 0);
      --color-gray10: oklch(0.95 0 0);
      --color-text: oklch(0.15 0.02 320);
      --color-text-secondary: oklch(0.3 0.02 320);
      --color-text-tertiary: oklch(0.5 0.01 320);
      --color-text-quaternary: oklch(0.75 0.01 320);
      --color-placeholderText: oklch(0.65 0.02 320);
      --color-border: oklch(0.85 0.02 330);
      --color-border-secondary: oklch(0.9 0.01 330);
      --color-separator: oklch(0.88 0.01 330);
      --color-link: oklch(0.86 0.0617 256.24);
      --color-disabledControl: oklch(0.92 0.0049 338.82);
      --color-disabledText: oklch(0.7 0.0049 338.82);
      --color-background: oklch(0.986 0 358.73967248753775);
      --color-background-secondary: oklch(0.96 0.004 358.73967248753775);
      --color-background-tertiary: oklch(0.94 0.005 358.73967248753775);
      --color-background-quaternary: oklch(0.92 0.006 358.73967248753775);
      --color-background-quinary: oklch(0.90 0.01 358.73967248753775);
      --color-fill: oklch(0.88 0.0049 338.82);
      --color-fill-secondary: oklch(0.84 0.0049 338.82);
      --color-fill-tertiary: oklch(0.8 0.0049 338.82);
      --color-fill-quaternary: oklch(0.76 0.0049 338.82);
      --color-material-ultrathick: oklch(0.95 0.0049 338.82 / 0.93);
      --color-material-thick: oklch(0.95 0.0049 338.82 / 0.85);
      --color-material-medium: oklch(0.95 0.0049 338.82 / 0.65);
      --color-material-thin: oklch(0.95 0.0049 338.82 / 0.60);
      --color-material-ultrathin: oklch(0.95 0.0049 338.82 / 0.45);
      --color-material-opaque: oklch(0.95 0.0049 338.82);
      --color-accent: oklch(0.71 0.14 237);
      --color-primary: oklch(0.68 0.14 237);
      --color-secondary: oklch(0.7486 0.1168 187.91);

     /* Kawaii dark mode overrides */
     @variant dark {
       --color-blue: oklch(0.65 0.14 237);
        --color-pink: oklch(0.7 0.18 350);
        --color-purple: oklch(0.67 0.16 280);
        --color-green: oklch(0.68 0.14 155);
        --color-orange: oklch(0.69 0.14 60);
        --color-yellow: oklch(0.73 0.12 100);
        --color-sky: oklch(0.7 0.13 210);
        --color-red: oklch(0.67 0.16 20);
        --color-brown: oklch(0.65 0.12 45);
        --color-gray: oklch(0.7 0 0);
        --color-neutral: oklch(0.65 0 0);
        --color-black: oklch(0.5 0 0);
        --color-white: oklch(0.95 0 0);
        --color-teal: oklch(0.72 0.12 180);
        --color-cyan: oklch(0.74 0.11 195);
        --color-indigo: oklch(0.69 0.13 260);
        --color-violet: oklch(0.71 0.14 300);
        --color-lime: oklch(0.75 0.1 125);
        --color-emerald: oklch(0.72 0.12 160);
        --color-amber: oklch(0.76 0.1 85);
        --color-rose: oklch(0.72 0.15 15);
        --color-slate: oklch(0.7 0.01 240);
        --color-zinc: oklch(0.71 0.005 240);
        --color-gray1: oklch(0.2 0 0);
        --color-gray2: oklch(0.35 0 0);
        --color-gray3: oklch(0.5 0 0);
        --color-gray4: oklch(0.6 0 0);
        --color-gray5: oklch(0.7 0 0);
        --color-gray6: oklch(0.8 0 0);
        --color-gray7: oklch(0.75 0 0);
        --color-gray8: oklch(0.7 0 0);
        --color-gray9: oklch(0.65 0 0);
        --color-gray10: oklch(0.6 0 0);
        --color-text: oklch(0.95 0.01 320);
        --color-text-secondary: oklch(0.85 0.01 320);
        --color-text-tertiary: oklch(0.7 0.01 320);
        --color-text-quaternary: oklch(0.55 0.01 320);
        --color-placeholderText: oklch(0.6 0.01 320);
        --color-border: oklch(0.3 0.0049 338.82);
        --color-border-secondary: oklch(0.25 0.0049 338.82);
        --color-separator: oklch(0.28 0.0049 338.82);
        --color-link: oklch(0.8959 0.0524530753637823 250.67881278919134);
        --color-disabledControl: oklch(0.22 0.0049 338.82);
        --color-disabledText: oklch(0.5 0.0049 338.82);
        --color-background: oklch(0.241 0.0049 338.82);
        --color-background-secondary: oklch(0.271 0.0049 338.82);
        --color-background-tertiary: oklch(0.301 0.0049 338.82);
        --color-background-quaternary: oklch(0.331 0.0049 338.82);
        --color-background-quinary: oklch(0.361 0.0049 338.82);
        --color-fill: oklch(0.25 0.0049 338.82);
        --color-fill-secondary: oklch(0.3 0.0049 338.82);
        --color-fill-tertiary: oklch(0.35 0.0049 338.82);
        --color-fill-quaternary: oklch(0.4 0.0049 338.82);
        --color-material-ultrathick: oklch(0.15 0.0049 338.82 / 0.93);
        --color-material-thick: oklch(0.15 0.0049 338.82 / 0.85);
        --color-material-medium: oklch(0.15 0.0049 338.82 / 0.80);
        --color-material-thin: oklch(0.15 0.0049 338.82 / 0.60);
        --color-material-ultrathin: oklch(0.15 0.0049 338.82 / 0.45);
        --color-material-opaque: oklch(0.15 0.0049 338.82);
        --color-accent: oklch(0.67 0.14 237);
        --color-primary: oklch(0.7 0.14 237);
        --color-secondary: oklch(0.77 0.1168 187.91);
     }
   }
}

@layer theme {
 [data-contrast=high], [data-contrast=high] * {
     /* High contrast color overrides */
     --color-blue: oklch(0.45 0.25 237);
      --color-pink: oklch(0.5 0.3 350);
      --color-purple: oklch(0.45 0.28 280);
      --color-green: oklch(0.5 0.2 155);
      --color-orange: oklch(0.55 0.18 60);
      --color-yellow: oklch(0.65 0.15 100);
      --color-sky: oklch(0.5 0.2 210);
      --color-red: oklch(0.5 0.28 20);
      --color-brown: oklch(0.45 0.15 45);
      --color-gray: oklch(0.3 0 0);
      --color-neutral: oklch(0.25 0 0);
      --color-black: oklch(0 0 0);
      --color-white: oklch(1 0 0);
      --color-teal: oklch(0.45 0.25 180);
      --color-cyan: oklch(0.5 0.22 195);
      --color-indigo: oklch(0.4 0.28 260);
      --color-violet: oklch(0.42 0.3 300);
      --color-lime: oklch(0.6 0.22 125);
      --color-emerald: oklch(0.48 0.22 160);
      --color-amber: oklch(0.62 0.18 85);
      --color-rose: oklch(0.48 0.3 15);
      --color-slate: oklch(0.35 0.02 240);
      --color-zinc: oklch(0.38 0.01 240);
      --color-gray1: oklch(0.05 0 0);
      --color-gray2: oklch(0.15 0 0);
      --color-gray3: oklch(0.2 0 0);
      --color-gray4: oklch(0.25 0 0);
      --color-gray5: oklch(0.35 0 0);
      --color-gray6: oklch(0.4 0 0);
      --color-gray7: oklch(0.45 0 0);
      --color-gray8: oklch(0.5 0 0);
      --color-gray9: oklch(0.55 0 0);
      --color-gray10: oklch(0.6 0 0);
      --color-text: oklch(0.12 0.02 200);
      --color-text-secondary: oklch(0.25 0.02 200);
      --color-text-tertiary: oklch(0.4 0.02 200);
      --color-text-quaternary: oklch(0.55 0.015 200);
      --color-placeholderText: oklch(0.5 0.015 200);
      --color-border: oklch(0.80 0.02 200);
      --color-border-secondary: oklch(0.85 0.01 200);
      --color-separator: oklch(0.83 0.01 200);
      --color-link: oklch(0.35 0.3 200);
      --color-disabledControl: oklch(0.7 0.01 200);
      --color-disabledText: oklch(0.6 0.01 200);
      --color-background: oklch(1.0 0.005 200);
      --color-background-secondary: oklch(0.97 0.003 200);
      --color-background-tertiary: oklch(0.94 0.005 200);
      --color-background-quaternary: oklch(0.91 0.005 200);
      --color-background-quinary: oklch(0.88 0.005 200);
      --color-fill: oklch(0.1 0.005 200);
      --color-fill-secondary: oklch(0.25 0.01 200);
      --color-fill-tertiary: oklch(0.45 0.01 200);
      --color-fill-quaternary: oklch(0.65 0.005 200);
      --color-material-ultrathick: oklch(0.98 0 0 / 0.95);
      --color-material-thick: oklch(0.96 0 0 / 0.88);
      --color-material-medium: oklch(0.94 0 0 / 0.70);
      --color-material-thin: oklch(0.92 0 0 / 0.65);
      --color-material-ultrathin: oklch(0.90 0 0 / 0.50);
      --color-material-opaque: oklch(0.95 0 0);
      --color-accent: oklch(0.45 0.25 237);
      --color-primary: oklch(0.4 0.28 260);
      --color-secondary: oklch(0.5 0.2 155);

     /* High contrast dark mode overrides */
     @variant dark {
       --color-blue: oklch(0.75 0.2 237);
        --color-pink: oklch(0.78 0.25 350);
        --color-purple: oklch(0.75 0.22 280);
        --color-green: oklch(0.77 0.18 155);
        --color-orange: oklch(0.78 0.2 60);
        --color-yellow: oklch(0.82 0.16 100);
        --color-sky: oklch(0.8 0.16 210);
        --color-red: oklch(0.75 0.24 20);
        --color-brown: oklch(0.72 0.14 45);
        --color-gray: oklch(0.85 0 0);
        --color-neutral: oklch(0.9 0 0);
        --color-black: oklch(0.2 0 0);
        --color-white: oklch(0.95 0 0);
        --color-teal: oklch(0.78 0.2 180);
        --color-cyan: oklch(0.8 0.18 195);
        --color-indigo: oklch(0.75 0.22 260);
        --color-violet: oklch(0.78 0.24 300);
        --color-lime: oklch(0.82 0.2 125);
        --color-emerald: oklch(0.78 0.18 160);
        --color-amber: oklch(0.83 0.17 85);
        --color-rose: oklch(0.78 0.22 15);
        --color-slate: oklch(0.82 0.02 240);
        --color-zinc: oklch(0.8 0.01 240);
        --color-gray1: oklch(0.95 0 0);
        --color-gray2: oklch(0.9 0 0);
        --color-gray3: oklch(0.85 0 0);
        --color-gray4: oklch(0.8 0 0);
        --color-gray5: oklch(0.75 0 0);
        --color-gray6: oklch(0.7 0 0);
        --color-gray7: oklch(0.65 0 0);
        --color-gray8: oklch(0.6 0 0);
        --color-gray9: oklch(0.55 0 0);
        --color-gray10: oklch(0.5 0 0);
        --color-text: oklch(0.98 0.005 200);
        --color-text-secondary: oklch(0.93 0.01 200);
        --color-text-tertiary: oklch(0.85 0.015 200);
        --color-text-quaternary: oklch(0.75 0.01 200);
        --color-placeholderText: oklch(0.8 0.01 200);
        --color-border: oklch(0.25 0.02 200);
        --color-border-secondary: oklch(0.20 0.01 200);
        --color-separator: oklch(0.23 0.01 200);
        --color-link: oklch(0.85 0.2 200);
        --color-disabledControl: oklch(0.4 0.01 200);
        --color-disabledText: oklch(0.5 0.01 200);
        --color-background: oklch(0.08 0.005 200);
        --color-background-secondary: oklch(0.12 0.008 200);
        --color-background-tertiary: oklch(0.16 0.008 200);
        --color-background-quaternary: oklch(0.20 0.008 200);
        --color-background-quinary: oklch(0.24 0.008 200);
        --color-fill: oklch(0.95 0.005 200);
        --color-fill-secondary: oklch(0.85 0.005 200);
        --color-fill-tertiary: oklch(0.75 0.005 200);
        --color-fill-quaternary: oklch(0.6 0.005 200);
        --color-material-ultrathick: oklch(0.08 0 0 / 0.95);
        --color-material-thick: oklch(0.12 0 0 / 0.88);
        --color-material-medium: oklch(0.16 0 0 / 0.82);
        --color-material-thin: oklch(0.18 0 0 / 0.65);
        --color-material-ultrathin: oklch(0.20 0 0 / 0.50);
        --color-material-opaque: oklch(0.15 0 0);
        --color-accent: oklch(0.75 0.2 237);
        --color-primary: oklch(0.75 0.22 260);
        --color-secondary: oklch(0.77 0.18 155);
     }
   }
}