@pastel-palette/tailwindcss/dist/theme-p3.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: color(display-p3 0.082 0.596 0.905);
  --color-pink: color(display-p3 0.885 0.354 0.659);
  --color-purple: color(display-p3 0.483 0.476 0.987);
  --color-green: color(display-p3 0.347 0.678 0.443);
  --color-orange: color(display-p3 0.805 0.513 0.218);
  --color-yellow: color(display-p3 0.969 0.879 0.278);
  --color-sky: color(display-p3 0.225 0.696 0.795);
  --color-red: color(display-p3 0.9 0.32 0.276);
  --color-brown: color(display-p3 0.711 0.442 0.302);
  --color-gray: color(display-p3 0.561 0.561 0.561);
  --color-neutral: color(display-p3 0.502 0.502 0.502);
  --color-black: color(display-p3 0.086 0.086 0.086);
  --color-white: color(display-p3 0.976 0.991 0.992);
  --color-teal: color(display-p3 0.048 0.678 0.59);
  --color-cyan: color(display-p3 0.154 0.716 0.727);
  --color-indigo: color(display-p3 0.24 0.444 0.901);
  --color-violet: color(display-p3 0.58 0.368 0.924);
  --color-lime: color(display-p3 0.623 0.743 0.327);
  --color-emerald: color(display-p3 0.244 0.65 0.433);
  --color-amber: color(display-p3 0.802 0.661 0.319);
  --color-rose: color(display-p3 0.853 0.299 0.383);
  --color-slate: color(display-p3 0.422 0.45 0.474);
  --color-zinc: color(display-p3 0.464 0.482 0.499);
  --color-gray1: color(display-p3 0.87 0.87 0.87);
  --color-gray2: color(display-p3 0.806 0.806 0.806);
  --color-gray3: color(display-p3 0.743 0.743 0.743);
  --color-gray4: color(display-p3 0.681 0.681 0.681);
  --color-gray5: color(display-p3 0.62 0.62 0.62);
  --color-gray6: color(display-p3 0.561 0.561 0.561);
  --color-gray7: color(display-p3 0.502 0.502 0.502);
  --color-gray8: color(display-p3 0.445 0.445 0.445);
  --color-gray9: color(display-p3 0.389 0.389 0.389);
  --color-gray10: color(display-p3 0.334 0.334 0.334);
  --color-text: color(display-p3 0.038 0.045 0.05);
  --color-text-secondary: color(display-p3 0.326 0.336 0.342);
  --color-text-tertiary: color(display-p3 0.437 0.447 0.453);
  --color-text-quaternary: color(display-p3 0.612 0.623 0.63);
  --color-placeholder-text: color(display-p3 0.734 0.746 0.752);
  --color-border: color(display-p3 0.887 0.898 0.906);
  --color-border-secondary: color(display-p3 0.913 0.924 0.932);
  --color-separator: color(display-p3 0.836 0.846 0.855);
  --color-link: color(display-p3 0.366 0.631 0.965);
  --color-disabled-control: color(display-p3 0.912 0.924 0.931);
  --color-disabled-text: color(display-p3 0.86 0.873 0.879);
  --color-background: color(display-p3 0.977 0.989 0.997);
  --color-background-secondary: color(display-p3 0.964 0.976 0.984);
  --color-background-tertiary: color(display-p3 0.951 0.963 0.971);
  --color-background-quaternary: color(display-p3 0.938 0.95 0.957);
  --color-background-quinary: color(display-p3 0.924 0.936 0.943);
  --color-fill: color(display-p3 0.938 0.95 0.957);
  --color-fill-secondary: color(display-p3 0.912 0.924 0.931);
  --color-fill-tertiary: color(display-p3 0.886 0.898 0.905);
  --color-fill-quaternary: color(display-p3 0.861 0.872 0.879);
  --color-material-ultra-thick: color(display-p3 0.938 0.95 0.958 / 0.93);
  --color-material-thick: color(display-p3 0.938 0.95 0.958 / 0.85);
  --color-material-medium: color(display-p3 0.938 0.95 0.958 / 0.65);
  --color-material-thin: color(display-p3 0.938 0.95 0.958 / 0.6);
  --color-material-ultra-thin: color(display-p3 0.938 0.95 0.958 / 0.45);
  --color-material-opaque: color(display-p3 0.938 0.95 0.958);
  --color-accent: color(display-p3 0.104 0.594 0.908);
  --color-primary: color(display-p3 -0.033 0.437 0.844);
  --color-secondary: color(display-p3 0.407 0.806 0.668);
}

/* All color variants with suffixes */
@theme {
  --color-blue-light: color(display-p3 0.082 0.596 0.905);
  --color-blue-dark: color(display-p3 0.273 0.658 0.933);
  --color-blue-hc: color(display-p3 -0.272 0.33 0.766);
  --color-blue-kawaii: color(display-p3 0.572 0.844 1.055);
  --color-pink-light: color(display-p3 0.885 0.354 0.659);
  --color-pink-dark: color(display-p3 0.93 0.448 0.715);
  --color-pink-hc: color(display-p3 0.721 -0.22 0.465);
  --color-pink-kawaii: color(display-p3 1.07 0.675 0.881);
  --color-purple-light: color(display-p3 0.483 0.476 0.987);
  --color-purple-dark: color(display-p3 0.547 0.553 1.013);
  --color-purple-hc: color(display-p3 0.269 -0.032 0.875);
  --color-purple-kawaii: color(display-p3 0.73 0.75 1.117);
  --color-green-light: color(display-p3 0.347 0.678 0.443);
  --color-green-dark: color(display-p3 0.387 0.747 0.492);
  --color-green-hc: color(display-p3 -0.148 0.494 0.197);
  --color-green-kawaii: color(display-p3 0.625 0.89 0.69);
  --color-orange-light: color(display-p3 0.805 0.513 0.218);
  --color-orange-dark: color(display-p3 0.884 0.566 0.248);
  --color-orange-hc: color(display-p3 0.673 0.329 -0.158);
  --color-orange-kawaii: color(display-p3 1.002 0.757 0.533);
  --color-yellow-light: color(display-p3 0.969 0.879 0.278);
  --color-yellow-dark: color(display-p3 0.899 0.815 0.252);
  --color-yellow-hc: color(display-p3 0.634 0.566 0.084);
  --color-yellow-kawaii: color(display-p3 0.921 0.881 0.608);
  --color-sky-light: color(display-p3 0.225 0.696 0.795);
  --color-sky-dark: color(display-p3 0.344 0.755 0.846);
  --color-sky-hc: color(display-p3 -0.306 0.47 0.615);
  --color-sky-kawaii: color(display-p3 0.566 0.899 0.977);
  --color-red-light: color(display-p3 0.9 0.32 0.276);
  --color-red-dark: color(display-p3 0.955 0.403 0.351);
  --color-red-hc: color(display-p3 0.761 -0.209 0.097);
  --color-red-kawaii: color(display-p3 1.042 0.664 0.656);
  --color-brown-light: color(display-p3 0.711 0.442 0.302);
  --color-brown-dark: color(display-p3 0.775 0.501 0.359);
  --color-brown-hc: color(display-p3 0.536 0.211 -0.021);
  --color-brown-kawaii: color(display-p3 0.941 0.701 0.578);
  --color-gray-light: color(display-p3 0.561 0.561 0.561);
  --color-gray-dark: color(display-p3 0.62 0.62 0.62);
  --color-gray-hc: color(display-p3 0.179 0.179 0.179);
  --color-gray-kawaii: color(display-p3 0.831 0.831 0.831);
  --color-neutral-light: color(display-p3 0.502 0.502 0.502);
  --color-neutral-dark: color(display-p3 0.563 0.563 0.563);
  --color-neutral-hc: color(display-p3 0.131 0.131 0.131);
  --color-neutral-kawaii: color(display-p3 0.768 0.768 0.768);
  --color-black-light: color(display-p3 0.086 0.086 0.086);
  --color-black-dark: color(display-p3 0.131 0.131 0.131);
  --color-black-hc: color(display-p3 0 0 0);
  --color-black-kawaii: color(display-p3 0.229 0.229 0.229);
  --color-white-light: color(display-p3 0.976 0.991 0.992);
  --color-white-dark: color(display-p3 0.961 0.961 0.961);
  --color-white-hc: color(display-p3 1 1 1);
  --color-white-kawaii: color(display-p3 0.999 0.999 0.999);
  --color-teal-light: color(display-p3 0.048 0.678 0.59);
  --color-teal-dark: color(display-p3 0.24 0.736 0.649);
  --color-teal-hc: color(display-p3 -0.341 0.461 0.359);
  --color-teal-kawaii: color(display-p3 0.603 0.895 0.831);
  --color-cyan-light: color(display-p3 0.154 0.716 0.727);
  --color-cyan-dark: color(display-p3 0.299 0.774 0.782);
  --color-cyan-hc: color(display-p3 -0.343 0.498 0.531);
  --color-cyan-kawaii: color(display-p3 0.636 0.91 0.912);
  --color-indigo-light: color(display-p3 0.24 0.444 0.901);
  --color-indigo-dark: color(display-p3 0.348 0.54 0.953);
  --color-indigo-hc: color(display-p3 -0.1 0.055 0.818);
  --color-indigo-kawaii: color(display-p3 0.651 0.781 1.04);
  --color-violet-light: color(display-p3 0.58 0.368 0.924);
  --color-violet-dark: color(display-p3 0.646 0.465 0.969);
  --color-violet-hc: color(display-p3 0.384 -0.205 0.79);
  --color-violet-kawaii: color(display-p3 0.834 0.741 1.047);
  --color-lime-light: color(display-p3 0.623 0.743 0.327);
  --color-lime-dark: color(display-p3 0.656 0.784 0.335);
  --color-lime-hc: color(display-p3 0.429 0.571 -0.199);
  --color-lime-kawaii: color(display-p3 0.826 0.894 0.692);
  --color-emerald-light: color(display-p3 0.244 0.65 0.433);
  --color-emerald-dark: color(display-p3 0.339 0.707 0.499);
  --color-emerald-hc: color(display-p3 -0.238 0.482 0.206);
  --color-emerald-kawaii: color(display-p3 0.655 0.892 0.743);
  --color-amber-light: color(display-p3 0.802 0.661 0.319);
  --color-amber-dark: color(display-p3 0.849 0.695 0.32);
  --color-amber-hc: color(display-p3 0.682 0.485 -0.197);
  --color-amber-kawaii: color(display-p3 0.949 0.861 0.659);
  --color-rose-light: color(display-p3 0.853 0.299 0.383);
  --color-rose-dark: color(display-p3 0.895 0.397 0.456);
  --color-rose-hc: color(display-p3 0.75 -0.253 0.14);
  --color-rose-kawaii: color(display-p3 1.051 0.697 0.719);
  --color-slate-light: color(display-p3 0.422 0.45 0.474);
  --color-slate-dark: color(display-p3 0.479 0.507 0.532);
  --color-slate-hc: color(display-p3 0.202 0.234 0.264);
  --color-slate-kawaii: color(display-p3 0.777 0.797 0.815);
  --color-zinc-light: color(display-p3 0.464 0.482 0.499);
  --color-zinc-dark: color(display-p3 0.522 0.541 0.557);
  --color-zinc-hc: color(display-p3 0.246 0.263 0.278);
  --color-zinc-kawaii: color(display-p3 0.798 0.808 0.817);
  --color-gray1-light: color(display-p3 0.87 0.87 0.87);
  --color-gray1-dark: color(display-p3 0.086 0.086 0.086);
  --color-gray1-hc: color(display-p3 0.87 0.87 0.87);
  --color-gray1-kawaii: color(display-p3 0.87 0.87 0.87);
  --color-gray2-light: color(display-p3 0.806 0.806 0.806);
  --color-gray2-dark: color(display-p3 0.131 0.131 0.131);
  --color-gray2-hc: color(display-p3 0.806 0.806 0.806);
  --color-gray2-kawaii: color(display-p3 0.806 0.806 0.806);
  --color-gray3-light: color(display-p3 0.743 0.743 0.743);
  --color-gray3-dark: color(display-p3 0.179 0.179 0.179);
  --color-gray3-hc: color(display-p3 0.743 0.743 0.743);
  --color-gray3-kawaii: color(display-p3 0.743 0.743 0.743);
  --color-gray4-light: color(display-p3 0.681 0.681 0.681);
  --color-gray4-dark: color(display-p3 0.229 0.229 0.229);
  --color-gray4-hc: color(display-p3 0.681 0.681 0.681);
  --color-gray4-kawaii: color(display-p3 0.681 0.681 0.681);
  --color-gray5-light: color(display-p3 0.62 0.62 0.62);
  --color-gray5-dark: color(display-p3 0.281 0.281 0.281);
  --color-gray5-hc: color(display-p3 0.62 0.62 0.62);
  --color-gray5-kawaii: color(display-p3 0.62 0.62 0.62);
  --color-gray6-light: color(display-p3 0.561 0.561 0.561);
  --color-gray6-dark: color(display-p3 0.335 0.335 0.335);
  --color-gray6-hc: color(display-p3 0.561 0.561 0.561);
  --color-gray6-kawaii: color(display-p3 0.561 0.561 0.561);
  --color-gray7-light: color(display-p3 0.502 0.502 0.502);
  --color-gray7-dark: color(display-p3 0.39 0.39 0.39);
  --color-gray7-hc: color(display-p3 0.502 0.502 0.502);
  --color-gray7-kawaii: color(display-p3 0.502 0.502 0.502);
  --color-gray8-light: color(display-p3 0.445 0.445 0.445);
  --color-gray8-dark: color(display-p3 0.446 0.446 0.446);
  --color-gray8-hc: color(display-p3 0.445 0.445 0.445);
  --color-gray8-kawaii: color(display-p3 0.445 0.445 0.445);
  --color-gray9-light: color(display-p3 0.389 0.389 0.389);
  --color-gray9-dark: color(display-p3 0.503 0.503 0.503);
  --color-gray9-hc: color(display-p3 0.389 0.389 0.389);
  --color-gray9-kawaii: color(display-p3 0.389 0.389 0.389);
  --color-gray10-light: color(display-p3 0.334 0.334 0.334);
  --color-gray10-dark: color(display-p3 0.562 0.562 0.562);
  --color-gray10-hc: color(display-p3 0.334 0.334 0.334);
  --color-gray10-kawaii: color(display-p3 0.334 0.334 0.334);
  --color-text-light: color(display-p3 0.038 0.045 0.05);
  --color-text-dark: color(display-p3 0.925 0.937 0.944);
  --color-text-secondary-light: color(display-p3 0.326 0.336 0.342);
  --color-text-secondary-dark: color(display-p3 0.673 0.684 0.691);
  --color-text-tertiary-light: color(display-p3 0.437 0.447 0.453);
  --color-text-tertiary-dark: color(display-p3 0.552 0.563 0.57);
  --color-text-quaternary-light: color(display-p3 0.612 0.623 0.63);
  --color-text-quaternary-dark: color(display-p3 0.327 0.337 0.343);
  --color-placeholder-text-light: color(display-p3 0.734 0.746 0.752);
  --color-placeholder-text-dark: color(display-p3 0.494 0.505 0.51);
  --color-border-light: color(display-p3 0.887 0.898 0.906);
  --color-border-dark: color(display-p3 0.222 0.231 0.237);
  --color-border-secondary-light: color(display-p3 0.913 0.924 0.932);
  --color-border-secondary-dark: color(display-p3 0.173 0.181 0.187);
  --color-separator-light: color(display-p3 0.836 0.846 0.855);
  --color-separator-dark: color(display-p3 0.202 0.211 0.217);
  --color-link-light: color(display-p3 0.366 0.631 0.965);
  --color-link-dark: color(display-p3 0.501 0.733 1.03);
  --color-disabled-control-light: color(display-p3 0.912 0.924 0.931);
  --color-disabled-control-dark: color(display-p3 0.143 0.152 0.157);
  --color-disabled-text-light: color(display-p3 0.86 0.873 0.879);
  --color-disabled-text-dark: color(display-p3 0.436 0.447 0.453);
  --color-background-light: color(display-p3 0.977 0.989 0.997);
  --color-background-dark: color(display-p3 0.097 0.106 0.111);
  --color-background-secondary-light: color(display-p3 0.964 0.976 0.984);
  --color-background-secondary-dark: color(display-p3 0.134 0.143 0.148);
  --color-background-tertiary-light: color(display-p3 0.951 0.963 0.971);
  --color-background-tertiary-dark: color(display-p3 0.172 0.181 0.187);
  --color-background-quaternary-light: color(display-p3 0.938 0.95 0.957);
  --color-background-quaternary-dark: color(display-p3 0.212 0.221 0.227);
  --color-background-quinary-light: color(display-p3 0.924 0.936 0.943);
  --color-background-quinary-dark: color(display-p3 0.252 0.262 0.268);
  --color-fill-light: color(display-p3 0.938 0.95 0.957);
  --color-fill-dark: color(display-p3 0.172 0.181 0.186);
  --color-fill-secondary-light: color(display-p3 0.912 0.924 0.931);
  --color-fill-secondary-dark: color(display-p3 0.222 0.231 0.237);
  --color-fill-tertiary-light: color(display-p3 0.886 0.898 0.905);
  --color-fill-tertiary-dark: color(display-p3 0.273 0.283 0.288);
  --color-fill-quaternary-light: color(display-p3 0.861 0.872 0.879);
  --color-fill-quaternary-dark: color(display-p3 0.326 0.336 0.342);
  --color-material-ultra-thick-light: color(display-p3 0.938 0.95 0.958 / 0.93);
  --color-material-ultra-thick-dark: color(display-p3 0.08 0.088 0.093 / 0.93);
  --color-material-thick-light: color(display-p3 0.938 0.95 0.958 / 0.85);
  --color-material-thick-dark: color(display-p3 0.08 0.088 0.093 / 0.85);
  --color-material-medium-light: color(display-p3 0.938 0.95 0.958 / 0.65);
  --color-material-medium-dark: color(display-p3 0.08 0.088 0.093 / 0.8);
  --color-material-thin-light: color(display-p3 0.938 0.95 0.958 / 0.6);
  --color-material-thin-dark: color(display-p3 0.08 0.088 0.093 / 0.6);
  --color-material-ultra-thin-light: color(display-p3 0.938 0.95 0.958 / 0.45);
  --color-material-ultra-thin-dark: color(display-p3 0.08 0.088 0.093 / 0.45);
  --color-material-opaque-light: color(display-p3 0.938 0.95 0.958);
  --color-material-opaque-dark: color(display-p3 0.08 0.088 0.093);
  --color-accent-light: color(display-p3 0.104 0.594 0.908);
  --color-accent-dark: color(display-p3 0.273 0.658 0.933);
  --color-primary-light: color(display-p3 -0.033 0.437 0.844);
  --color-primary-dark: color(display-p3 0.407 0.692 1.054);
  --color-secondary-light: color(display-p3 0.407 0.806 0.668);
  --color-secondary-dark: color(display-p3 0.451 0.844 0.699);
}

@layer theme {
  :root {
    /* Dark mode overrides */
    @variant dark {
      --color-blue: color(display-p3 0.273 0.658 0.933);
    --color-pink: color(display-p3 0.93 0.448 0.715);
    --color-purple: color(display-p3 0.547 0.553 1.013);
    --color-green: color(display-p3 0.387 0.747 0.492);
    --color-orange: color(display-p3 0.884 0.566 0.248);
    --color-yellow: color(display-p3 0.899 0.815 0.252);
    --color-sky: color(display-p3 0.344 0.755 0.846);
    --color-red: color(display-p3 0.955 0.403 0.351);
    --color-brown: color(display-p3 0.775 0.501 0.359);
    --color-gray: color(display-p3 0.62 0.62 0.62);
    --color-neutral: color(display-p3 0.563 0.563 0.563);
    --color-black: color(display-p3 0.131 0.131 0.131);
    --color-white: color(display-p3 0.961 0.961 0.961);
    --color-teal: color(display-p3 0.24 0.736 0.649);
    --color-cyan: color(display-p3 0.299 0.774 0.782);
    --color-indigo: color(display-p3 0.348 0.54 0.953);
    --color-violet: color(display-p3 0.646 0.465 0.969);
    --color-lime: color(display-p3 0.656 0.784 0.335);
    --color-emerald: color(display-p3 0.339 0.707 0.499);
    --color-amber: color(display-p3 0.849 0.695 0.32);
    --color-rose: color(display-p3 0.895 0.397 0.456);
    --color-slate: color(display-p3 0.479 0.507 0.532);
    --color-zinc: color(display-p3 0.522 0.541 0.557);
    --color-gray1: color(display-p3 0.086 0.086 0.086);
    --color-gray2: color(display-p3 0.131 0.131 0.131);
    --color-gray3: color(display-p3 0.179 0.179 0.179);
    --color-gray4: color(display-p3 0.229 0.229 0.229);
    --color-gray5: color(display-p3 0.281 0.281 0.281);
    --color-gray6: color(display-p3 0.335 0.335 0.335);
    --color-gray7: color(display-p3 0.39 0.39 0.39);
    --color-gray8: color(display-p3 0.446 0.446 0.446);
    --color-gray9: color(display-p3 0.503 0.503 0.503);
    --color-gray10: color(display-p3 0.562 0.562 0.562);
    --color-text: color(display-p3 0.925 0.937 0.944);
    --color-text-secondary: color(display-p3 0.673 0.684 0.691);
    --color-text-tertiary: color(display-p3 0.552 0.563 0.57);
    --color-text-quaternary: color(display-p3 0.327 0.337 0.343);
    --color-placeholder-text: color(display-p3 0.494 0.505 0.51);
    --color-border: color(display-p3 0.222 0.231 0.237);
    --color-border-secondary: color(display-p3 0.173 0.181 0.187);
    --color-separator: color(display-p3 0.202 0.211 0.217);
    --color-link: color(display-p3 0.501 0.733 1.03);
    --color-disabled-control: color(display-p3 0.143 0.152 0.157);
    --color-disabled-text: color(display-p3 0.436 0.447 0.453);
    --color-background: color(display-p3 0.097 0.106 0.111);
    --color-background-secondary: color(display-p3 0.134 0.143 0.148);
    --color-background-tertiary: color(display-p3 0.172 0.181 0.187);
    --color-background-quaternary: color(display-p3 0.212 0.221 0.227);
    --color-background-quinary: color(display-p3 0.252 0.262 0.268);
    --color-fill: color(display-p3 0.172 0.181 0.186);
    --color-fill-secondary: color(display-p3 0.222 0.231 0.237);
    --color-fill-tertiary: color(display-p3 0.273 0.283 0.288);
    --color-fill-quaternary: color(display-p3 0.326 0.336 0.342);
    --color-material-ultra-thick: color(display-p3 0.08 0.088 0.093 / 0.93);
    --color-material-thick: color(display-p3 0.08 0.088 0.093 / 0.85);
    --color-material-medium: color(display-p3 0.08 0.088 0.093 / 0.8);
    --color-material-thin: color(display-p3 0.08 0.088 0.093 / 0.6);
    --color-material-ultra-thin: color(display-p3 0.08 0.088 0.093 / 0.45);
    --color-material-opaque: color(display-p3 0.08 0.088 0.093);
    --color-accent: color(display-p3 0.273 0.658 0.933);
    --color-primary: color(display-p3 0.407 0.692 1.054);
    --color-secondary: color(display-p3 0.451 0.844 0.699);
    }
  }
}


@layer theme {
  [data-contrast=low], [data-contrast=low] * {
     /* Kawaii color overrides */
     --color-blue: color(display-p3 0.572 0.844 1.055);
      --color-pink: color(display-p3 1.07 0.675 0.881);
      --color-purple: color(display-p3 0.73 0.75 1.117);
      --color-green: color(display-p3 0.625 0.89 0.69);
      --color-orange: color(display-p3 1.002 0.757 0.533);
      --color-yellow: color(display-p3 0.921 0.881 0.608);
      --color-sky: color(display-p3 0.566 0.899 0.977);
      --color-red: color(display-p3 1.042 0.664 0.656);
      --color-brown: color(display-p3 0.941 0.701 0.578);
      --color-gray: color(display-p3 0.831 0.831 0.831);
      --color-neutral: color(display-p3 0.768 0.768 0.768);
      --color-black: color(display-p3 0.229 0.229 0.229);
      --color-white: color(display-p3 0.999 0.999 0.999);
      --color-teal: color(display-p3 0.603 0.895 0.831);
      --color-cyan: color(display-p3 0.636 0.91 0.912);
      --color-indigo: color(display-p3 0.651 0.781 1.04);
      --color-violet: color(display-p3 0.834 0.741 1.047);
      --color-lime: color(display-p3 0.826 0.894 0.692);
      --color-emerald: color(display-p3 0.655 0.892 0.743);
      --color-amber: color(display-p3 0.949 0.861 0.659);
      --color-rose: color(display-p3 1.051 0.697 0.719);
      --color-slate: color(display-p3 0.777 0.797 0.815);
      --color-zinc: color(display-p3 0.798 0.808 0.817);
      --color-gray1: color(display-p3 0.87 0.87 0.87);
      --color-gray2: color(display-p3 0.806 0.806 0.806);
      --color-gray3: color(display-p3 0.743 0.743 0.743);
      --color-gray4: color(display-p3 0.681 0.681 0.681);
      --color-gray5: color(display-p3 0.62 0.62 0.62);
      --color-gray6: color(display-p3 0.561 0.561 0.561);
      --color-gray7: color(display-p3 0.502 0.502 0.502);
      --color-gray8: color(display-p3 0.445 0.445 0.445);
      --color-gray9: color(display-p3 0.389 0.389 0.389);
      --color-gray10: color(display-p3 0.334 0.334 0.334);
      --color-text: color(display-p3 0.055 0.034 0.062);
      --color-text-secondary: color(display-p3 0.193 0.168 0.202);
      --color-text-tertiary: color(display-p3 0.396 0.383 0.402);
      --color-text-quaternary: color(display-p3 0.69 0.675 0.696);
      --color-placeholder-text: color(display-p3 0.577 0.548 0.589);
      --color-border: color(display-p3 0.83 0.791 0.829);
      --color-border-secondary: color(display-p3 0.882 0.862 0.881);
      --color-separator: color(display-p3 0.856 0.837 0.856);
      --color-link: color(display-p3 0.74 0.825 0.966);
      --color-disabled-control: color(display-p3 0.903 0.892 0.899);
      --color-disabled-text: color(display-p3 0.627 0.617 0.624);
      --color-background: color(display-p3 0.982 0.982 0.982);
      --color-background-secondary: color(display-p3 0.979 0.968 0.971);
      --color-background-tertiary: color(display-p3 0.97 0.956 0.96);
      --color-background-quaternary: color(display-p3 0.961 0.945 0.95);
      --color-background-quinary: color(display-p3 0.958 0.931 0.939);
      --color-fill: color(display-p3 0.96 0.949 0.957);
      --color-fill-secondary: color(display-p3 0.944 0.933 0.941);
      --color-fill-tertiary: color(display-p3 0.929 0.917 0.925);
      --color-fill-quaternary: color(display-p3 0.913 0.902 0.91);
      --color-material-ultra-thick: color(display-p3 0.95 0.938 0.946 / 0.93);
      --color-material-thick: color(display-p3 0.944 0.933 0.941 / 0.85);
      --color-material-medium: color(display-p3 0.939 0.928 0.936 / 0.65);
      --color-material-thin: color(display-p3 0.934 0.923 0.931 / 0.6);
      --color-material-ultra-thin: color(display-p3 0.929 0.917 0.925 / 0.45);
      --color-material-opaque: color(display-p3 0.923 0.912 0.92);
      --color-accent: color(display-p3 0.348 0.669 0.908);
      --color-primary: color(display-p3 0.31 0.631 0.869);
      --color-secondary: color(display-p3 0.4 0.762 0.731);

     /* Kawaii dark mode overrides */
     @variant dark {
       --color-blue: color(display-p3 0.272 0.594 0.83);
        --color-pink: color(display-p3 0.866 0.439 0.672);
        --color-purple: color(display-p3 0.519 0.528 0.93);
        --color-green: color(display-p3 0.38 0.685 0.465);
        --color-orange: color(display-p3 0.805 0.533 0.267);
        --color-yellow: color(display-p3 0.716 0.666 0.339);
        --color-sky: color(display-p3 0.275 0.692 0.782);
        --color-red: color(display-p3 0.843 0.431 0.434);
        --color-brown: color(display-p3 0.749 0.477 0.336);
        --color-gray: color(display-p3 0.62 0.62 0.62);
        --color-neutral: color(display-p3 0.561 0.561 0.561);
        --color-black: color(display-p3 0.389 0.389 0.389);
        --color-white: color(display-p3 0.934 0.934 0.934);
        --color-teal: color(display-p3 0.372 0.73 0.658);
        --color-cyan: color(display-p3 0.402 0.744 0.748);
        --color-indigo: color(display-p3 0.459 0.603 0.899);
        --color-violet: color(display-p3 0.665 0.553 0.899);
        --color-lime: color(display-p3 0.645 0.724 0.478);
        --color-emerald: color(display-p3 0.445 0.726 0.557);
        --color-amber: color(display-p3 0.787 0.681 0.431);
        --color-rose: color(display-p3 0.893 0.501 0.533);
        --color-slate: color(display-p3 0.605 0.624 0.641);
        --color-zinc: color(display-p3 0.625 0.634 0.643);
        --color-gray1: color(display-p3 0.086 0.086 0.086);
        --color-gray2: color(display-p3 0.131 0.131 0.131);
        --color-gray3: color(display-p3 0.179 0.179 0.179);
        --color-gray4: color(display-p3 0.229 0.229 0.229);
        --color-gray5: color(display-p3 0.281 0.281 0.281);
        --color-gray6: color(display-p3 0.335 0.335 0.335);
        --color-gray7: color(display-p3 0.39 0.39 0.39);
        --color-gray8: color(display-p3 0.446 0.446 0.446);
        --color-gray9: color(display-p3 0.503 0.503 0.503);
        --color-gray10: color(display-p3 0.562 0.562 0.562);
        --color-text: color(display-p3 0.944 0.928 0.95);
        --color-text-secondary: color(display-p3 0.815 0.799 0.821);
        --color-text-tertiary: color(display-p3 0.629 0.614 0.635);
        --color-text-quaternary: color(display-p3 0.453 0.439 0.458);
        --color-placeholder-text: color(display-p3 0.51 0.496 0.516);
        --color-border: color(display-p3 0.185 0.176 0.182);
        --color-border-secondary: color(display-p3 0.137 0.129 0.134);
        --color-separator: color(display-p3 0.165 0.157 0.163);
        --color-link: color(display-p3 0.788 0.875 0.988);
        --color-disabled-control: color(display-p3 0.109 0.101 0.107);
        --color-disabled-text: color(display-p3 0.395 0.385 0.392);
        --color-background: color(display-p3 0.128 0.12 0.126);
        --color-background-secondary: color(display-p3 0.139 0.131 0.137);
        --color-background-tertiary: color(display-p3 0.151 0.143 0.148);
        --color-background-quaternary: color(display-p3 0.162 0.154 0.16);
        --color-background-quinary: color(display-p3 0.174 0.166 0.171);
        --color-fill: color(display-p3 0.141 0.133 0.139);
        --color-fill-secondary: color(display-p3 0.16 0.152 0.158);
        --color-fill-tertiary: color(display-p3 0.18 0.171 0.177);
        --color-fill-quaternary: color(display-p3 0.199 0.191 0.197);
        --color-material-ultra-thick: color(display-p3 0.053 0.046 0.051 / 0.93);
        --color-material-thick: color(display-p3 0.05 0.043 0.048 / 0.85);
        --color-material-medium: color(display-p3 0.046 0.039 0.044 / 0.8);
        --color-material-thin: color(display-p3 0.043 0.036 0.041 / 0.6);
        --color-material-ultra-thin: color(display-p3 0.04 0.033 0.038 / 0.45);
        --color-material-opaque: color(display-p3 0.037 0.03 0.035);
        --color-accent: color(display-p3 0.297 0.619 0.856);
        --color-primary: color(display-p3 0.335 0.656 0.895);
        --color-secondary: color(display-p3 0.427 0.789 0.758);
     }
   }
}

@layer theme {
 [data-contrast=high], [data-contrast=high] * {
     /* High contrast color overrides */
     --color-blue: color(display-p3 -0.272 0.33 0.766);
      --color-pink: color(display-p3 0.721 -0.22 0.465);
      --color-purple: color(display-p3 0.269 -0.032 0.875);
      --color-green: color(display-p3 -0.148 0.494 0.197);
      --color-orange: color(display-p3 0.673 0.329 -0.158);
      --color-yellow: color(display-p3 0.634 0.566 0.084);
      --color-sky: color(display-p3 -0.306 0.47 0.615);
      --color-red: color(display-p3 0.761 -0.209 0.097);
      --color-brown: color(display-p3 0.536 0.211 -0.021);
      --color-gray: color(display-p3 0.179 0.179 0.179);
      --color-neutral: color(display-p3 0.131 0.131 0.131);
      --color-black: color(display-p3 0 0 0);
      --color-white: color(display-p3 1 1 1);
      --color-teal: color(display-p3 -0.341 0.461 0.359);
      --color-cyan: color(display-p3 -0.343 0.498 0.531);
      --color-indigo: color(display-p3 -0.1 0.055 0.818);
      --color-violet: color(display-p3 0.384 -0.205 0.79);
      --color-lime: color(display-p3 0.429 0.571 -0.199);
      --color-emerald: color(display-p3 -0.238 0.482 0.206);
      --color-amber: color(display-p3 0.682 0.485 -0.197);
      --color-rose: color(display-p3 0.75 -0.253 0.14);
      --color-slate: color(display-p3 0.202 0.234 0.264);
      --color-zinc: color(display-p3 0.246 0.263 0.278);
      --color-gray1: color(display-p3 0.87 0.87 0.87);
      --color-gray2: color(display-p3 0.806 0.806 0.806);
      --color-gray3: color(display-p3 0.743 0.743 0.743);
      --color-gray4: color(display-p3 0.681 0.681 0.681);
      --color-gray5: color(display-p3 0.62 0.62 0.62);
      --color-gray6: color(display-p3 0.561 0.561 0.561);
      --color-gray7: color(display-p3 0.502 0.502 0.502);
      --color-gray8: color(display-p3 0.445 0.445 0.445);
      --color-gray9: color(display-p3 0.389 0.389 0.389);
      --color-gray10: color(display-p3 0.334 0.334 0.334);
      --color-text: color(display-p3 0.006 0.029 0.032);
      --color-text-secondary: color(display-p3 0.099 0.142 0.145);
      --color-text-tertiary: color(display-p3 0.245 0.293 0.296);
      --color-text-quaternary: color(display-p3 0.417 0.455 0.458);
      --color-placeholder-text: color(display-p3 0.361 0.398 0.401);
      --color-border: color(display-p3 0.702 0.758 0.762);
      --color-border-secondary: color(display-p3 0.786 0.814 0.816);
      --color-separator: color(display-p3 0.76 0.788 0.79);
      --color-link: color(display-p3 -0.316 0.324 0.451);
      --color-disabled-control: color(display-p3 0.601 0.628 0.63);
      --color-disabled-text: color(display-p3 0.483 0.509 0.511);
      --color-background: color(display-p3 0.989 1.004 1.005);
      --color-background-secondary: color(display-p3 0.974 0.983 0.983);
      --color-background-tertiary: color(display-p3 0.95 0.965 0.966);
      --color-background-quaternary: color(display-p3 0.931 0.945 0.946);
      --color-background-quinary: color(display-p3 0.911 0.925 0.926);
      --color-fill: color(display-p3 0.563 0.576 0.577);
      --color-fill-secondary: color(display-p3 0.393 0.418 0.419);
      --color-fill-tertiary: color(display-p3 0.243 0.266 0.268);
      --color-fill-quaternary: color(display-p3 0.115 0.125 0.126);
      --color-material-ultra-thick: color(display-p3 0.974 0.974 0.974 / 0.95);
      --color-material-thick: color(display-p3 0.948 0.948 0.948 / 0.88);
      --color-material-medium: color(display-p3 0.921 0.921 0.921 / 0.7);
      --color-material-thin: color(display-p3 0.896 0.896 0.896 / 0.65);
      --color-material-ultra-thin: color(display-p3 0.87 0.87 0.87 / 0.5);
      --color-material-opaque: color(display-p3 0.933 0.933 0.933);
      --color-accent: color(display-p3 -0.267 0.326 0.77);
      --color-primary: color(display-p3 -0.083 0.037 0.819);
      --color-secondary: color(display-p3 -0.159 0.495 0.207);

     /* High contrast dark mode overrides */
     @variant dark {
       --color-blue: color(display-p3 0.17 0.724 1.078);
        --color-pink: color(display-p3 1.059 0.434 0.792);
        --color-purple: color(display-p3 0.592 0.589 1.168);
        --color-green: color(display-p3 0.406 0.822 0.53);
        --color-orange: color(display-p3 1.002 0.595 0.121);
        --color-yellow: color(display-p3 0.85 0.777 0.304);
        --color-sky: color(display-p3 0.276 0.833 0.949);
        --color-red: color(display-p3 1.065 0.409 0.444);
        --color-brown: color(display-p3 0.87 0.543 0.374);
        --color-gray: color(display-p3 0.806 0.806 0.806);
        --color-neutral: color(display-p3 0.87 0.87 0.87);
        --color-black: color(display-p3 0.086 0.086 0.086);
        --color-white: color(display-p3 0.934 0.934 0.934);
        --color-teal: color(display-p3 -0.145 0.855 0.741);
        --color-cyan: color(display-p3 0.092 0.861 0.875);
        --color-indigo: color(display-p3 0.41 0.651 1.178);
        --color-violet: color(display-p3 0.78 0.551 1.18);
        --color-lime: color(display-p3 0.694 0.845 0.288);
        --color-emerald: color(display-p3 0.375 0.839 0.582);
        --color-amber: color(display-p3 0.942 0.749 0.256);
        --color-rose: color(display-p3 1.076 0.479 0.55);
        --color-slate: color(display-p3 0.735 0.776 0.812);
        --color-zinc: color(display-p3 0.727 0.747 0.765);
        --color-gray1: color(display-p3 0.086 0.086 0.086);
        --color-gray2: color(display-p3 0.131 0.131 0.131);
        --color-gray3: color(display-p3 0.179 0.179 0.179);
        --color-gray4: color(display-p3 0.229 0.229 0.229);
        --color-gray5: color(display-p3 0.281 0.281 0.281);
        --color-gray6: color(display-p3 0.335 0.335 0.335);
        --color-gray7: color(display-p3 0.39 0.39 0.39);
        --color-gray8: color(display-p3 0.446 0.446 0.446);
        --color-gray9: color(display-p3 0.503 0.503 0.503);
        --color-gray10: color(display-p3 0.562 0.562 0.562);
        --color-text: color(display-p3 0.963 0.978 0.979);
        --color-text-secondary: color(display-p3 0.888 0.916 0.918);
        --color-text-tertiary: color(display-p3 0.775 0.817 0.82);
        --color-text-quaternary: color(display-p3 0.661 0.689 0.691);
        --color-placeholder-text: color(display-p3 0.723 0.751 0.753);
        --color-border: color(display-p3 0.1 0.143 0.146);
        --color-border-secondary: color(display-p3 0.071 0.091 0.093);
        --color-separator: color(display-p3 0.098 0.118 0.12);
        --color-link: color(display-p3 -0.144 0.931 0.994);
        --color-disabled-control: color(display-p3 0.263 0.287 0.289);
        --color-disabled-text: color(display-p3 0.37 0.395 0.397);
        --color-background: color(display-p3 0.005 0.007 0.008);
        --color-background-secondary: color(display-p3 0.007 0.013 0.013);
        --color-background-tertiary: color(display-p3 0.011 0.019 0.02);
        --color-background-quaternary: color(display-p3 0.018 0.028 0.029);
        --color-background-quinary: color(display-p3 0.026 0.039 0.04);
        --color-fill: color(display-p3 0.516 0.529 0.53);
        --color-fill-secondary: color(display-p3 0.611 0.624 0.625);
        --color-fill-tertiary: color(display-p3 0.708 0.722 0.723);
        --color-fill-quaternary: color(display-p3 0.809 0.823 0.824);
        --color-material-ultra-thick: color(display-p3 0.007 0.007 0.007 / 0.95);
        --color-material-thick: color(display-p3 0.022 0.022 0.022 / 0.88);
        --color-material-medium: color(display-p3 0.052 0.052 0.052 / 0.82);
        --color-material-thin: color(display-p3 0.069 0.069 0.069 / 0.65);
        --color-material-ultra-thin: color(display-p3 0.086 0.086 0.086 / 0.5);
        --color-material-opaque: color(display-p3 0.043 0.043 0.043);
        --color-accent: color(display-p3 0.151 0.726 1.074);
        --color-primary: color(display-p3 0.399 0.654 1.177);
        --color-secondary: color(display-p3 0.414 0.821 0.522);
     }
   }
}