alouette/src/default-palette-oklch.css

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

/* Generated by scripts/build-css.ts. DO NOT EDIT.
   Wide-gamut half of the default alouette palette (optional). Import after
   'alouette/default-palette.css' to opt web into the display-p3 ramp; omit it to
   stay on sRGB hex everywhere. */
/* Wide-gamut palette: the same ramp with display-p3 chroma headroom. Web only —
   the native compiler drops this feature query and keeps the base palette hex. */
@supports (color: oklch(0 0 0)) {
  @layer theme {
    /* overrides the @theme defaults, which cannot host a feature query */
    :root,
    :host {
      --color-translucent: oklch(1 0 0 / 0.4);
      --color-screen: oklch(0.948 0 0);
      --color-highlight: oklch(1 0 0);
      --color-disabled-sharp: oklch(0.48 0 0);
      --color-disabled-muted: oklch(0.61 0 0);
      --color-disabled-interactive: oklch(0.79 0 0);
      --color-disabled-interactive-muted: oklch(0.89 0 0);
      --color-sharp: oklch(0.27 0 0);
      --color-muted: oklch(0.42 0 0);
      --color-form-border-disabled: oklch(0.79 0 0);
      --color-form-placeholder: oklch(0.48 0 0);
      --color-form-disabled-text: oklch(0.42 0 0);
      --color-interactive-contained-disabled: oklch(0.79 0 0);
      --color-interactive-outlined-disabled: oklch(0.79 0 0);
      --color-interactive-accent-outlined-disabled: oklch(0.79 0 0);
      --color-surface: oklch(0.98 0 0);
      --color-enabled: oklch(0.48 0 0);
      --color-highlight-accent: oklch(0.89 0 0);
      --color-lowered: oklch(0.89 0 0);
      --color-screen-gradient-start: oklch(0.89 0 0);
      --color-screen-gradient-middle: oklch(0.85 0 0);
      --color-screen-gradient-end: oklch(0.79 0 0);
      --color-border-muted: oklch(0.85 0 0);
      --color-border-sharp: oklch(0.48 0 0);
      --color-interactive-contained-pressable: oklch(1 0 0);
      --color-interactive-contained-hover: oklch(0.98 0 0);
      --color-interactive-contained-focus: oklch(0.98 0 0);
      --color-interactive-contained-active: oklch(0.948 0 0);
      --color-interactive-outlined-pressable: oklch(0.48 0 0);
      --color-interactive-outlined-hover: oklch(0.61 0 0);
      --color-interactive-outlined-focus: oklch(0.61 0 0);
      --color-interactive-outlined-active: oklch(0.61 0 0);
      --color-interactive-outlined-outline-focus: oklch(0.61 0 0);
      --color-interactive-active: oklch(0.48 0 0);
      --color-interactive-pressable: oklch(0.42 0 0);
      --color-interactive-hover: oklch(0.27 0 0);
      --color-accent: oklch(0.27 0 0);
      --color-on-accent: oklch(0.27 0 0);
      --color-on-accent-muted: oklch(0.48 0 0);
      --color-selection: oklch(0.42 0 0 / 0.251);
    }

    .light {
      --color-translucent: oklch(1 0 0 / 0.4);
      --color-screen: oklch(0.948 0 0);
      --color-highlight: oklch(1 0 0);
      --color-disabled-sharp: oklch(0.48 0 0);
      --color-disabled-muted: oklch(0.61 0 0);
      --color-disabled-interactive: oklch(0.79 0 0);
      --color-disabled-interactive-muted: oklch(0.89 0 0);
      --color-sharp: oklch(0.27 0 0);
      --color-muted: oklch(0.42 0 0);
      --color-form-border-disabled: oklch(0.79 0 0);
      --color-form-placeholder: oklch(0.48 0 0);
      --color-form-disabled-text: oklch(0.42 0 0);
      --color-interactive-contained-disabled: oklch(0.79 0 0);
      --color-interactive-outlined-disabled: oklch(0.79 0 0);
      --color-interactive-accent-outlined-disabled: oklch(0.79 0 0);
      --color-surface: oklch(0.98 0 0);
      --color-enabled: oklch(0.48 0 0);
      --color-highlight-accent: oklch(0.89 0 0);
      --color-lowered: oklch(0.89 0 0);
      --color-screen-gradient-start: oklch(0.89 0 0);
      --color-screen-gradient-middle: oklch(0.85 0 0);
      --color-screen-gradient-end: oklch(0.79 0 0);
      --color-border-muted: oklch(0.85 0 0);
      --color-border-sharp: oklch(0.48 0 0);
      --color-interactive-contained-pressable: oklch(1 0 0);
      --color-interactive-contained-hover: oklch(0.98 0 0);
      --color-interactive-contained-focus: oklch(0.98 0 0);
      --color-interactive-contained-active: oklch(0.948 0 0);
      --color-interactive-outlined-pressable: oklch(0.48 0 0);
      --color-interactive-outlined-hover: oklch(0.61 0 0);
      --color-interactive-outlined-focus: oklch(0.61 0 0);
      --color-interactive-outlined-active: oklch(0.61 0 0);
      --color-interactive-outlined-outline-focus: oklch(0.61 0 0);
      --color-interactive-active: oklch(0.48 0 0);
      --color-interactive-pressable: oklch(0.42 0 0);
      --color-interactive-hover: oklch(0.27 0 0);
      --color-accent: oklch(0.27 0 0);
      --color-on-accent: oklch(0.27 0 0);
      --color-on-accent-muted: oklch(0.48 0 0);
      --color-selection: oklch(0.42 0 0 / 0.251);
    }

    .dark {
      --color-translucent: oklch(0.2361 0.0015 17.26 / 0.333);
      --color-screen: oklch(0.24 0 0);
      --color-highlight: oklch(0.32 0 0);
      --color-disabled-sharp: oklch(0.865 0 0);
      --color-disabled-muted: oklch(0.865 0 0);
      --color-disabled-interactive: oklch(0.45 0 0);
      --color-disabled-interactive-muted: oklch(0.32 0 0);
      --color-sharp: oklch(0.96 0 0);
      --color-muted: oklch(0.865 0 0);
      --color-form-border-disabled: oklch(0.45 0 0);
      --color-form-placeholder: oklch(0.795 0 0);
      --color-form-disabled-text: oklch(0.865 0 0);
      --color-interactive-contained-disabled: oklch(0.36 0 0);
      --color-interactive-outlined-disabled: oklch(0.4 0 0);
      --color-interactive-accent-outlined-disabled: oklch(0.4 0 0);
      --color-surface: oklch(0.28 0 0);
      --color-enabled: oklch(0.45 0 0);
      --color-highlight-accent: oklch(0.32 0 0);
      --color-lowered: oklch(0.18 0 0);
      --color-screen-gradient-start: oklch(0.28 0 0);
      --color-screen-gradient-middle: oklch(0.24 0 0);
      --color-screen-gradient-end: oklch(0.18 0 0);
      --color-border-muted: oklch(0.45 0 0);
      --color-border-sharp: oklch(0.795 0 0);
      --color-interactive-contained-pressable: oklch(0.4 0 0);
      --color-interactive-contained-hover: oklch(0.45 0 0);
      --color-interactive-contained-focus: oklch(0.45 0 0);
      --color-interactive-contained-active: oklch(0.45 0 0);
      --color-interactive-outlined-pressable: oklch(0.45 0 0);
      --color-interactive-outlined-hover: oklch(0.795 0 0);
      --color-interactive-outlined-focus: oklch(0.795 0 0);
      --color-interactive-outlined-active: oklch(0.795 0 0);
      --color-interactive-outlined-outline-focus: oklch(0.795 0 0);
      --color-interactive-active: oklch(0.865 0 0);
      --color-interactive-pressable: oklch(0.96 0 0);
      --color-interactive-hover: oklch(1 0 0);
      --color-accent: oklch(1 0 0);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.96 0 0);
      --color-selection: oklch(0.96 0 0 / 0.251);
    }

    .light_brand {
      --color-surface: oklch(0.968 0.0116 225);
      --color-enabled: oklch(0.48 0.1166 225);
      --color-highlight-accent: oklch(0.89 0.0472 225);
      --color-lowered: oklch(0.89 0.0472 225);
      --color-screen-gradient-start: oklch(0.89 0.0472 225);
      --color-screen-gradient-middle: oklch(0.85 0.0814 225);
      --color-screen-gradient-end: oklch(0.79 0.1207 225);
      --color-border-muted: oklch(0.85 0.0814 225);
      --color-border-sharp: oklch(0.48 0.1166 225);
      --color-interactive-contained-pressable: oklch(0.48 0.1166 225);
      --color-interactive-contained-hover: oklch(0.54 0.1312 225);
      --color-interactive-contained-focus: oklch(0.54 0.1312 225);
      --color-interactive-contained-active: oklch(0.62 0.1428 225);
      --color-interactive-outlined-pressable: oklch(0.48 0.1166 225);
      --color-interactive-outlined-hover: oklch(0.62 0.1428 225);
      --color-interactive-outlined-focus: oklch(0.62 0.1428 225);
      --color-interactive-outlined-active: oklch(0.62 0.1428 225);
      --color-interactive-outlined-outline-focus: oklch(0.62 0.1428 225);
      --color-interactive-active: oklch(0.48 0.1166 225);
      --color-interactive-pressable: oklch(0.42 0.102 225);
      --color-interactive-hover: oklch(0.27 0.0642 225);
      --color-accent: oklch(0.42 0.102 225);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.89 0.0472 225);
      --color-selection: oklch(0.42 0.102 225 / 0.251);
    }

    .light_info {
      --color-surface: oklch(0.968 0.0104 233);
      --color-enabled: oklch(0.48 0.1264 233);
      --color-highlight-accent: oklch(0.89 0.0423 233);
      --color-lowered: oklch(0.89 0.0423 233);
      --color-screen-gradient-start: oklch(0.89 0.0423 233);
      --color-screen-gradient-middle: oklch(0.85 0.0729 233);
      --color-screen-gradient-end: oklch(0.79 0.1082 233);
      --color-border-muted: oklch(0.85 0.0729 233);
      --color-border-sharp: oklch(0.48 0.1264 233);
      --color-interactive-contained-pressable: oklch(0.48 0.1264 233);
      --color-interactive-contained-hover: oklch(0.54 0.1422 233);
      --color-interactive-contained-focus: oklch(0.54 0.1422 233);
      --color-interactive-contained-active: oklch(0.62 0.1548 233);
      --color-interactive-outlined-pressable: oklch(0.48 0.1264 233);
      --color-interactive-outlined-hover: oklch(0.62 0.1548 233);
      --color-interactive-outlined-focus: oklch(0.62 0.1548 233);
      --color-interactive-outlined-active: oklch(0.62 0.1548 233);
      --color-interactive-outlined-outline-focus: oklch(0.62 0.1548 233);
      --color-interactive-active: oklch(0.48 0.1264 233);
      --color-interactive-pressable: oklch(0.42 0.1106 233);
      --color-interactive-hover: oklch(0.27 0.0697 233);
      --color-accent: oklch(0.42 0.1106 233);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.89 0.0423 233);
      --color-selection: oklch(0.42 0.1106 233 / 0.251);
    }

    .light_success {
      --color-surface: oklch(0.968 0.0317 145);
      --color-enabled: oklch(0.48 0.1987 145);
      --color-highlight-accent: oklch(0.89 0.1469 145);
      --color-lowered: oklch(0.89 0.1469 145);
      --color-screen-gradient-start: oklch(0.89 0.1469 145);
      --color-screen-gradient-middle: oklch(0.85 0.2721 145);
      --color-screen-gradient-end: oklch(0.79 0.263 145);
      --color-border-muted: oklch(0.85 0.2721 145);
      --color-border-sharp: oklch(0.48 0.1987 145);
      --color-interactive-contained-pressable: oklch(0.48 0.1987 145);
      --color-interactive-contained-hover: oklch(0.54 0.2236 145);
      --color-interactive-contained-focus: oklch(0.54 0.2236 145);
      --color-interactive-contained-active: oklch(0.62 0.2435 145);
      --color-interactive-outlined-pressable: oklch(0.48 0.1987 145);
      --color-interactive-outlined-hover: oklch(0.62 0.2435 145);
      --color-interactive-outlined-focus: oklch(0.62 0.2435 145);
      --color-interactive-outlined-active: oklch(0.62 0.2435 145);
      --color-interactive-outlined-outline-focus: oklch(0.62 0.2435 145);
      --color-interactive-active: oklch(0.48 0.1987 145);
      --color-interactive-pressable: oklch(0.42 0.1739 145);
      --color-interactive-hover: oklch(0.27 0.1095 145);
      --color-accent: oklch(0.42 0.1739 145);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.89 0.1469 145);
      --color-selection: oklch(0.42 0.1739 145 / 0.251);
    }

    .light_warning {
      --color-surface: oklch(0.968 0.0309 94.36);
      --color-enabled: oklch(0.56 0.1282 86.2);
      --color-highlight-accent: oklch(0.928 0.0775 93.56);
      --color-lowered: oklch(0.928 0.0775 93.56);
      --color-screen-gradient-start: oklch(0.928 0.0775 93.56);
      --color-screen-gradient-middle: oklch(0.89 0.1442 92.8);
      --color-screen-gradient-end: oklch(0.82 0.1511 91.4);
      --color-border-muted: oklch(0.89 0.1442 92.8);
      --color-border-sharp: oklch(0.56 0.1282 86.2);
      --color-interactive-contained-pressable: oklch(0.56 0.1282 86.2);
      --color-interactive-contained-hover: oklch(0.6 0.1373 87);
      --color-interactive-contained-focus: oklch(0.6 0.1373 87);
      --color-interactive-contained-active: oklch(0.8 0.1738 91);
      --color-interactive-outlined-pressable: oklch(0.56 0.1282 86.2);
      --color-interactive-outlined-hover: oklch(0.8 0.1738 91);
      --color-interactive-outlined-focus: oklch(0.8 0.1738 91);
      --color-interactive-outlined-active: oklch(0.8 0.1738 91);
      --color-interactive-outlined-outline-focus: oklch(0.8 0.1738 91);
      --color-interactive-active: oklch(0.56 0.1282 86.2);
      --color-interactive-pressable: oklch(0.44 0.101 83.8);
      --color-interactive-hover: oklch(0.27 0.0611 80.4);
      --color-accent: oklch(0.44 0.101 83.8);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.928 0.0775 93.56);
      --color-selection: oklch(0.44 0.101 83.8 / 0.251);
    }

    .light_danger {
      --color-surface: oklch(0.968 0.0107 20.22);
      --color-enabled: oklch(0.48 0.2121 23.64);
      --color-highlight-accent: oklch(0.89 0.045 20.77);
      --color-lowered: oklch(0.89 0.045 20.77);
      --color-screen-gradient-start: oklch(0.89 0.045 20.77);
      --color-screen-gradient-middle: oklch(0.85 0.0794 21.05);
      --color-screen-gradient-end: oklch(0.79 0.122 21.47);
      --color-border-muted: oklch(0.85 0.0794 21.05);
      --color-border-sharp: oklch(0.48 0.2121 23.64);
      --color-interactive-contained-pressable: oklch(0.48 0.2121 23.64);
      --color-interactive-contained-hover: oklch(0.54 0.2385 23.22);
      --color-interactive-contained-focus: oklch(0.54 0.2385 23.22);
      --color-interactive-contained-active: oklch(0.62 0.2594 22.66);
      --color-interactive-outlined-pressable: oklch(0.48 0.2121 23.64);
      --color-interactive-outlined-hover: oklch(0.62 0.2594 22.66);
      --color-interactive-outlined-focus: oklch(0.62 0.2594 22.66);
      --color-interactive-outlined-active: oklch(0.62 0.2594 22.66);
      --color-interactive-outlined-outline-focus: oklch(0.62 0.2594 22.66);
      --color-interactive-active: oklch(0.48 0.2121 23.64);
      --color-interactive-pressable: oklch(0.42 0.1858 24.06);
      --color-interactive-hover: oklch(0.27 0.1173 25.11);
      --color-accent: oklch(0.42 0.1858 24.06);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.89 0.045 20.77);
      --color-selection: oklch(0.42 0.1858 24.06 / 0.251);
    }

    .dark_brand {
      --color-surface: oklch(0.26 0.0469 225);
      --color-enabled: oklch(0.5 0.1102 225);
      --color-highlight-accent: oklch(0.3 0.0571 225);
      --color-lowered: oklch(0.18 0.0271 225);
      --color-screen-gradient-start: oklch(0.26 0.0469 225);
      --color-screen-gradient-middle: oklch(0.22 0.0375 225);
      --color-screen-gradient-end: oklch(0.18 0.0271 225);
      --color-border-muted: oklch(0.5 0.1102 225);
      --color-border-sharp: oklch(0.7 0.1542 225);
      --color-interactive-contained-pressable: oklch(0.4 0.0841 225);
      --color-interactive-contained-hover: oklch(0.5 0.1102 225);
      --color-interactive-contained-focus: oklch(0.5 0.1102 225);
      --color-interactive-contained-active: oklch(0.5 0.1102 225);
      --color-interactive-outlined-pressable: oklch(0.5 0.1102 225);
      --color-interactive-outlined-hover: oklch(0.7 0.1542 225);
      --color-interactive-outlined-focus: oklch(0.7 0.1542 225);
      --color-interactive-outlined-active: oklch(0.7 0.1542 225);
      --color-interactive-outlined-outline-focus: oklch(0.7 0.1542 225);
      --color-interactive-active: oklch(0.82 0.1117 225);
      --color-interactive-pressable: oklch(0.865 0.0797 225);
      --color-interactive-hover: oklch(0.955 0.0271 225);
      --color-accent: oklch(0.865 0.0797 225);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.865 0.0797 225);
      --color-selection: oklch(0.865 0.0797 225 / 0.251);
    }

    .dark_info {
      --color-surface: oklch(0.26 0.0508 233);
      --color-enabled: oklch(0.5 0.1195 233);
      --color-highlight-accent: oklch(0.3 0.0619 233);
      --color-lowered: oklch(0.18 0.0294 233);
      --color-screen-gradient-start: oklch(0.26 0.0508 233);
      --color-screen-gradient-middle: oklch(0.22 0.0406 233);
      --color-screen-gradient-end: oklch(0.18 0.0294 233);
      --color-border-muted: oklch(0.5 0.1195 233);
      --color-border-sharp: oklch(0.7 0.1672 233);
      --color-interactive-contained-pressable: oklch(0.4 0.0912 233);
      --color-interactive-contained-hover: oklch(0.5 0.1195 233);
      --color-interactive-contained-focus: oklch(0.5 0.1195 233);
      --color-interactive-contained-active: oklch(0.5 0.1195 233);
      --color-interactive-outlined-pressable: oklch(0.5 0.1195 233);
      --color-interactive-outlined-hover: oklch(0.7 0.1672 233);
      --color-interactive-outlined-focus: oklch(0.7 0.1672 233);
      --color-interactive-outlined-active: oklch(0.7 0.1672 233);
      --color-interactive-outlined-outline-focus: oklch(0.7 0.1672 233);
      --color-interactive-active: oklch(0.82 0.1001 233);
      --color-interactive-pressable: oklch(0.865 0.0714 233);
      --color-interactive-hover: oklch(0.955 0.0243 233);
      --color-accent: oklch(0.865 0.0714 233);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.865 0.0714 233);
      --color-selection: oklch(0.865 0.0714 233 / 0.251);
    }

    .dark_success {
      --color-surface: oklch(0.26 0.0799 145);
      --color-enabled: oklch(0.5 0.1878 145);
      --color-highlight-accent: oklch(0.3 0.0973 145);
      --color-lowered: oklch(0.18 0.0462 145);
      --color-screen-gradient-start: oklch(0.26 0.0799 145);
      --color-screen-gradient-middle: oklch(0.22 0.0639 145);
      --color-screen-gradient-end: oklch(0.18 0.0462 145);
      --color-border-muted: oklch(0.5 0.1878 145);
      --color-border-sharp: oklch(0.7 0.2629 145);
      --color-interactive-contained-pressable: oklch(0.4 0.1434 145);
      --color-interactive-contained-hover: oklch(0.5 0.1878 145);
      --color-interactive-contained-focus: oklch(0.5 0.1878 145);
      --color-interactive-contained-active: oklch(0.5 0.1878 145);
      --color-interactive-outlined-pressable: oklch(0.5 0.1878 145);
      --color-interactive-outlined-hover: oklch(0.7 0.2629 145);
      --color-interactive-outlined-focus: oklch(0.7 0.2629 145);
      --color-interactive-outlined-active: oklch(0.7 0.2629 145);
      --color-interactive-outlined-outline-focus: oklch(0.7 0.2629 145);
      --color-interactive-active: oklch(0.82 0.2975 145);
      --color-interactive-pressable: oklch(0.865 0.2619 145);
      --color-interactive-hover: oklch(0.955 0.0754 145);
      --color-accent: oklch(0.865 0.2619 145);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.865 0.2619 145);
      --color-selection: oklch(0.865 0.2619 145 / 0.251);
    }

    .dark_warning {
      --color-surface: oklch(0.4 0.0682 83);
      --color-enabled: oklch(0.56 0.1163 86.2);
      --color-highlight-accent: oklch(0.45 0.0809 84);
      --color-lowered: oklch(0.28 0.04 80.6);
      --color-screen-gradient-start: oklch(0.4 0.0682 83);
      --color-screen-gradient-middle: oklch(0.32 0.0517 81.4);
      --color-screen-gradient-end: oklch(0.28 0.04 80.6);
      --color-border-muted: oklch(0.56 0.1163 86.2);
      --color-border-sharp: oklch(0.8 0.1662 91);
      --color-interactive-contained-pressable: oklch(0.53 0.1051 85.6);
      --color-interactive-contained-hover: oklch(0.56 0.1163 86.2);
      --color-interactive-contained-focus: oklch(0.56 0.1163 86.2);
      --color-interactive-contained-active: oklch(0.56 0.1163 86.2);
      --color-interactive-outlined-pressable: oklch(0.56 0.1163 86.2);
      --color-interactive-outlined-hover: oklch(0.8 0.1662 91);
      --color-interactive-outlined-focus: oklch(0.8 0.1662 91);
      --color-interactive-outlined-active: oklch(0.8 0.1662 91);
      --color-interactive-outlined-outline-focus: oklch(0.8 0.1662 91);
      --color-interactive-active: oklch(0.86 0.1728 92.2);
      --color-interactive-pressable: oklch(0.9 0.1442 93);
      --color-interactive-hover: oklch(0.955 0.071 94.1);
      --color-accent: oklch(0.9 0.1442 93);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.9 0.1442 93);
      --color-selection: oklch(0.9 0.1442 93 / 0.251);
    }

    .dark_danger {
      --color-surface: oklch(0.26 0.0856 25.18);
      --color-enabled: oklch(0.5 0.2004 23.5);
      --color-highlight-accent: oklch(0.3 0.1042 24.9);
      --color-lowered: oklch(0.18 0.0495 25.74);
      --color-screen-gradient-start: oklch(0.26 0.0856 25.18);
      --color-screen-gradient-middle: oklch(0.22 0.0685 25.46);
      --color-screen-gradient-end: oklch(0.18 0.0495 25.74);
      --color-border-muted: oklch(0.5 0.2004 23.5);
      --color-border-sharp: oklch(0.7 0.2143 22.1);
      --color-interactive-contained-pressable: oklch(0.4 0.1533 24.2);
      --color-interactive-contained-hover: oklch(0.5 0.2004 23.5);
      --color-interactive-contained-focus: oklch(0.5 0.2004 23.5);
      --color-interactive-contained-active: oklch(0.5 0.2004 23.5);
      --color-interactive-outlined-pressable: oklch(0.5 0.2004 23.5);
      --color-interactive-outlined-hover: oklch(0.7 0.2143 22.1);
      --color-interactive-outlined-focus: oklch(0.7 0.2143 22.1);
      --color-interactive-outlined-active: oklch(0.7 0.2143 22.1);
      --color-interactive-outlined-outline-focus: oklch(0.7 0.2143 22.1);
      --color-interactive-active: oklch(0.82 0.1109 21.26);
      --color-interactive-pressable: oklch(0.865 0.0771 20.95);
      --color-interactive-hover: oklch(0.955 0.0251 20.32);
      --color-accent: oklch(0.865 0.0771 20.95);
      --color-on-accent: oklch(1 0 0);
      --color-on-accent-muted: oklch(0.865 0.0771 20.95);
      --color-selection: oklch(0.865 0.0771 20.95 / 0.251);
    }
  }
}