@terrazzo/tokens/dist/index.css

Internal design tokens for @terrazzo/tiles

/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  --tz-border-1: 1px solid var(--tz-color-border-1);
  --tz-border-2: 1px solid var(--tz-color-border-2);
  --tz-border-3: 1px solid var(--tz-color-border-3);
  --tz-border-focus: 2px solid var(--tz-color-border-focus);
  --tz-color-base-blue-100: color(srgb 0 0.09803921568627451 0.1450980392156863);
  --tz-color-base-blue-200: color(srgb 0 0.2549019607843137 0.32941176470588235);
  --tz-color-base-blue-300: color(srgb 0.03137254901960784 0.43137254901960786 0.5254901960784314);
  --tz-color-base-blue-600: color(srgb 0.12549019607843137 0.8274509803921568 0.9647058823529412);
  --tz-color-base-blue-800: color(srgb 0.5764705882352941 0.9372549019607843 1);
  --tz-color-base-blue-900: color(srgb 0.7803921568627451 0.9764705882352941 1);
  --tz-color-base-blue-1000: color(srgb 0.9019607843137255 0.996078431372549 1);
  --tz-color-base-gray-100: color(srgb 0.09803921568627451 0.01568627450980392 0.01568627450980392);
  --tz-color-base-gray-200: color(srgb 0.20784313725490197 0.16862745098039217 0.1607843137254902);
  --tz-color-base-gray-300: color(srgb 0.3686274509803922 0.3254901960784314 0.29411764705882354);
  --tz-color-base-gray-600: color(srgb 0.7333333333333333 0.7137254901960784 0.6980392156862745);
  --tz-color-base-gray-700: color(srgb 0.8745098039215686 0.8509803921568627 0.8431372549019608);
  --tz-color-base-gray-800: color(srgb 0.9372549019607843 0.9176470588235294 0.9098039215686274);
  --tz-color-base-gray-900: color(srgb 0.9882352941176471 0.9686274509803922 0.9647058823529412);
  --tz-color-base-gray-1000: color(srgb 1 1 1);
  --tz-color-base-green-100: color(srgb 0.984313725490196 0.996078431372549 0.984313725490196);
  --tz-color-base-green-200: color(srgb 0.9529411764705882 0.9882352941176471 0.9529411764705882);
  --tz-color-base-green-300: color(srgb 0.9215686274509803 0.9764705882352941 0.9215686274509803);
  --tz-color-base-green-400: color(srgb 0.8745098039215686 0.9529411764705882 0.8745098039215686);
  --tz-color-base-green-500: color(srgb 0.807843137254902 0.9215686274509803 0.8117647058823529);
  --tz-color-base-green-600: color(srgb 0.7176470588235294 0.8745098039215686 0.7294117647058823);
  --tz-color-base-green-700: color(srgb 0.592156862745098 0.8117647058823529 0.611764705882353);
  --tz-color-base-green-800: color(srgb 0.396078431372549 0.7294117647058823 0.4588235294117647);
  --tz-color-base-green-900: color(srgb 0.27450980392156865 0.6549019607843137 0.34509803921568627);
  --tz-color-base-green-1000: color(srgb 0.23921568627450981 0.6039215686274509 0.3137254901960784);
  --tz-color-base-green-1100: color(srgb 0.1607843137254902 0.48627450980392156 0.23137254901960785);
  --tz-color-base-green-1200: color(srgb 0.12549019607843137 0.23529411764705882 0.1450980392156863);
  --tz-color-base-lime-100: color(srgb 0.050980392156862744 0.23921568627450981 0.10980392156862745);
  --tz-color-base-lime-200: color(srgb 0.08627450980392157 0.3411764705882353 0);
  --tz-color-base-lime-300: color(srgb 0.2901960784313726 0.5137254901960784 0.08627450980392157);
  --tz-color-base-lime-600: color(srgb 0.6392156862745098 0.9058823529411765 0.00784313725490196);
  --tz-color-base-lime-800: color(srgb 0.7450980392156863 0.9607843137254902 0);
  --tz-color-base-lime-900: color(srgb 0.8666666666666667 0.9921568627450981 0.6352941176470588);
  --tz-color-base-lime-1000: color(srgb 0.9450980392156862 1 0.8549019607843137);
  --tz-color-base-orange-100: color(srgb 0.19607843137254902 0.00392156862745098 0);
  --tz-color-base-orange-200: color(srgb 0.4235294117647059 0.09019607843137255 0);
  --tz-color-base-orange-300: color(srgb 0.7529411764705882 0.2549019607843137 0);
  --tz-color-base-orange-600: color(srgb 1 0.5529411764705883 0.3568627450980392);
  --tz-color-base-orange-800: color(srgb 1 0.8313725490196079 0.7333333333333333);
  --tz-color-base-orange-900: color(srgb 0.996078431372549 0.8980392156862745 0.8509803921568627);
  --tz-color-base-orange-1000: color(srgb 1 0.9490196078431372 0.9215686274509803);
  --tz-color-bg-1: var(--tz-color-base-gray-1000);
  --tz-color-bg-2: var(--tz-color-base-gray-900);
  --tz-color-bg-3: var(--tz-color-base-gray-800);
  --tz-color-bg-error: var(--tz-color-base-orange-600);
  --tz-color-bg-selected: var(--tz-color-base-lime-1000);
  --tz-color-bg-selected-hint: var(--tz-color-base-lime-800);
  --tz-color-border-1: var(--tz-color-base-gray-300);
  --tz-color-border-2: var(--tz-color-base-gray-600);
  --tz-color-border-3: var(--tz-color-base-gray-700);
  --tz-color-border-focus: var(--tz-color-base-lime-600);
  --tz-color-text-1: var(--tz-color-base-gray-200);
  --tz-color-text-2: var(--tz-color-base-gray-300);
  --tz-color-text-3: var(--tz-color-base-gray-600);
  --tz-color-text-error: var(--tz-color-base-gray-1000);
  --tz-color-text-selected: var(--tz-color-base-blue-200);
  --tz-ease-linear: cubic-bezier(0, 0, 1, 1);
  --tz-ease-quint-in: cubic-bezier(0.64, 0, 0.78, 0);
  --tz-ease-quint-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --tz-ease-quint-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tz-font-body-font-family: var(--tz-font-sans);
  --tz-font-body-font-size: 0.875rem;
  --tz-font-body-font-variation-settings: "wght" 400;
  --tz-font-body-font-weight: 400;
  --tz-font-body-line-height: 1.4375;
  --tz-font-body-longform-font-family: var(--tz-font-sans);
  --tz-font-body-longform-font-size: 1.125rem;
  --tz-font-body-longform-font-variation-settings: "wght" 400;
  --tz-font-body-longform-font-weight: 400;
  --tz-font-body-longform-letter-spacing: -0.0025em;
  --tz-font-body-longform-line-height: 1.4375;
  --tz-font-body-strong-font-family: var(--tz-font-sans);
  --tz-font-body-strong-font-size: 0.875rem;
  --tz-font-body-strong-font-variation-settings: "wght" 500;
  --tz-font-body-strong-font-weight: 400;
  --tz-font-body-strong-line-height: 1.4375;
  --tz-font-heading1-font-family: var(--tz-font-sans);
  --tz-font-heading1-font-size: 1.75rem;
  --tz-font-heading1-font-variation-settings: "wght" 600;
  --tz-font-heading1-font-weight: 400;
  --tz-font-heading1-letter-spacing: -0.0075rem;
  --tz-font-heading1-line-height: 1.5;
  --tz-font-heading2-font-family: var(--tz-font-sans);
  --tz-font-heading2-font-size: 1.5rem;
  --tz-font-heading2-font-variation-settings: "wght" 600;
  --tz-font-heading2-font-weight: 400;
  --tz-font-heading2-letter-spacing: -0.00625rem;
  --tz-font-heading2-line-height: 1.875rem;
  --tz-font-heading3-font-family: var(--tz-font-sans);
  --tz-font-heading3-font-size: 1.25rem;
  --tz-font-heading3-font-variation-settings: "wght" 500;
  --tz-font-heading3-font-weight: 400;
  --tz-font-heading3-letter-spacing: -0.005rem;
  --tz-font-heading3-line-height: 1.4;
  --tz-font-heading4-font-family: var(--tz-font-sans);
  --tz-font-heading4-font-size: 1.125rem;
  --tz-font-heading4-font-variation-settings: "wght" 500;
  --tz-font-heading4-font-weight: 400;
  --tz-font-heading4-letter-spacing: -0.0025rem;
  --tz-font-heading4-line-height: 1.4375;
  --tz-font-heading5-font-family: var(--tz-font-sans);
  --tz-font-heading5-font-size: 1rem;
  --tz-font-heading5-font-variation-settings: "wght" 500;
  --tz-font-heading5-font-weight: 400;
  --tz-font-heading5-line-height: 1.4375;
  --tz-font-heading6-font-family: var(--tz-font-body-strong-font-family);
  --tz-font-heading6-font-size: var(--tz-font-body-strong-font-size);
  --tz-font-heading6-font-variation-settings: var(--tz-font-body-strong-font-variation-settings);
  --tz-font-heading6-font-weight: var(--tz-font-body-strong-font-weight);
  --tz-font-heading6-line-height: var(--tz-font-body-strong-line-height);
  --tz-font-label-small-font-family: var(--tz-font-sans);
  --tz-font-label-small-font-size: 0.75rem;
  --tz-font-label-small-font-variation-settings: "wght" 500;
  --tz-font-label-small-font-weight: 400;
  --tz-font-label-small-letter-spacing: 0.0025rem;
  --tz-font-label-small-line-height: 1.25;
  --tz-font-mono: "Fragment Mono", ui-monospace, monospace;
  --tz-font-sans: "Instrument Sans", system-ui, -apple-system, "Aptos", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans", sans-serif, "Helvetica", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --tz-layer-base: 10;
  --tz-layer-menu: 50;
  --tz-layer-modal: 100;
  --tz-layer-nav: 30;
  --tz-layer-popover: 40;
  --tz-layer-tooltip: 20;
  --tz-radius-000: 1px;
  --tz-radius-100: 0.125rem;
  --tz-radius-200: 0.25rem;
  --tz-radius-300: 6px;
  --tz-radius-400: 0.5rem;
  --tz-radius-500: 0.75rem;
  --tz-radius-1000: 999px;
  --tz-shadow-100: 0 1px 1px 0 color(srgb 0 0 0 / 0.1);
  --tz-shadow-300: 0 0.5rem 1rem 0 color(srgb 0 0 0 / 0.1);
  --tz-space-000: 0.125rem;
  --tz-space-100: 0.25rem;
  --tz-space-200: 0.5rem;
  --tz-space-300: 0.75rem;
  --tz-space-400: 1rem;
  --tz-space-500: 1.5rem;
  --tz-space-600: 2rem;
  --tz-space-700: 2.5rem;
  --tz-space-800: 3rem;
  --tz-space-900: 4rem;
  --tz-space-control-m: var(--tz-space-600);
  --tz-space-control-s: 1.75rem;
  --tz-timing-default: 100ms;
  --tz-timing-deliberate: 500ms;
  --tz-timing-moderate: 225ms;
  --tz-timing-quick: 50ms;
  --tz-timing-slow: 1000ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --tz-border-1: 1px solid var(--tz-color-border-1);
    --tz-border-2: 1px solid var(--tz-color-border-2);
    --tz-border-3: 1px solid var(--tz-color-border-3);
    --tz-border-focus: 2px solid var(--tz-color-border-focus);
    --tz-color-base-blue-100: color(srgb 0 0.09803921568627451 0.1450980392156863);
    --tz-color-base-blue-200: color(srgb 0 0.2549019607843137 0.32941176470588235);
    --tz-color-base-blue-300: color(srgb 0.03137254901960784 0.43137254901960786 0.5254901960784314);
    --tz-color-base-blue-600: color(srgb 0.12549019607843137 0.8274509803921568 0.9647058823529412);
    --tz-color-base-blue-800: color(srgb 0.5764705882352941 0.9372549019607843 1);
    --tz-color-base-blue-900: color(srgb 0.7803921568627451 0.9764705882352941 1);
    --tz-color-base-blue-1000: color(srgb 0.9019607843137255 0.996078431372549 1);
    --tz-color-base-gray-100: color(srgb 0.09803921568627451 0.01568627450980392 0.01568627450980392);
    --tz-color-base-gray-200: color(srgb 0.20784313725490197 0.16862745098039217 0.1607843137254902);
    --tz-color-base-gray-300: color(srgb 0.3686274509803922 0.3254901960784314 0.29411764705882354);
    --tz-color-base-gray-600: color(srgb 0.7333333333333333 0.7137254901960784 0.6980392156862745);
    --tz-color-base-gray-700: color(srgb 0.8745098039215686 0.8509803921568627 0.8431372549019608);
    --tz-color-base-gray-800: color(srgb 0.9372549019607843 0.9176470588235294 0.9098039215686274);
    --tz-color-base-gray-900: color(srgb 0.9882352941176471 0.9686274509803922 0.9647058823529412);
    --tz-color-base-gray-1000: color(srgb 1 1 1);
    --tz-color-base-green-100: color(srgb 0.984313725490196 0.996078431372549 0.984313725490196);
    --tz-color-base-green-200: color(srgb 0.9529411764705882 0.9882352941176471 0.9529411764705882);
    --tz-color-base-green-300: color(srgb 0.9215686274509803 0.9764705882352941 0.9215686274509803);
    --tz-color-base-green-400: color(srgb 0.8745098039215686 0.9529411764705882 0.8745098039215686);
    --tz-color-base-green-500: color(srgb 0.807843137254902 0.9215686274509803 0.8117647058823529);
    --tz-color-base-green-600: color(srgb 0.7176470588235294 0.8745098039215686 0.7294117647058823);
    --tz-color-base-green-700: color(srgb 0.592156862745098 0.8117647058823529 0.611764705882353);
    --tz-color-base-green-800: color(srgb 0.396078431372549 0.7294117647058823 0.4588235294117647);
    --tz-color-base-green-900: color(srgb 0.27450980392156865 0.6549019607843137 0.34509803921568627);
    --tz-color-base-green-1000: color(srgb 0.23921568627450981 0.6039215686274509 0.3137254901960784);
    --tz-color-base-green-1100: color(srgb 0.1607843137254902 0.48627450980392156 0.23137254901960785);
    --tz-color-base-green-1200: color(srgb 0.12549019607843137 0.23529411764705882 0.1450980392156863);
    --tz-color-base-lime-100: color(srgb 0.050980392156862744 0.23921568627450981 0.10980392156862745);
    --tz-color-base-lime-200: color(srgb 0.08627450980392157 0.3411764705882353 0);
    --tz-color-base-lime-300: color(srgb 0.2901960784313726 0.5137254901960784 0.08627450980392157);
    --tz-color-base-lime-600: color(srgb 0.6392156862745098 0.9058823529411765 0.00784313725490196);
    --tz-color-base-lime-800: color(srgb 0.7450980392156863 0.9607843137254902 0);
    --tz-color-base-lime-900: color(srgb 0.8666666666666667 0.9921568627450981 0.6352941176470588);
    --tz-color-base-lime-1000: color(srgb 0.9450980392156862 1 0.8549019607843137);
    --tz-color-base-orange-100: color(srgb 0.19607843137254902 0.00392156862745098 0);
    --tz-color-base-orange-200: color(srgb 0.4235294117647059 0.09019607843137255 0);
    --tz-color-base-orange-300: color(srgb 0.7529411764705882 0.2549019607843137 0);
    --tz-color-base-orange-600: color(srgb 1 0.5529411764705883 0.3568627450980392);
    --tz-color-base-orange-800: color(srgb 1 0.8313725490196079 0.7333333333333333);
    --tz-color-base-orange-900: color(srgb 0.996078431372549 0.8980392156862745 0.8509803921568627);
    --tz-color-base-orange-1000: color(srgb 1 0.9490196078431372 0.9215686274509803);
    --tz-color-bg-1: var(--tz-color-base-gray-1000);
    --tz-color-bg-2: var(--tz-color-base-gray-900);
    --tz-color-bg-3: var(--tz-color-base-gray-800);
    --tz-color-bg-error: var(--tz-color-base-orange-600);
    --tz-color-bg-selected: var(--tz-color-base-lime-1000);
    --tz-color-bg-selected-hint: var(--tz-color-base-lime-800);
    --tz-color-border-1: var(--tz-color-base-gray-300);
    --tz-color-border-2: var(--tz-color-base-gray-600);
    --tz-color-border-3: var(--tz-color-base-gray-700);
    --tz-color-border-focus: var(--tz-color-base-lime-600);
    --tz-color-text-1: var(--tz-color-base-gray-200);
    --tz-color-text-2: var(--tz-color-base-gray-300);
    --tz-color-text-3: var(--tz-color-base-gray-600);
    --tz-color-text-error: var(--tz-color-base-gray-1000);
    --tz-color-text-selected: var(--tz-color-base-blue-200);
  }
}

[data-color-mode="light"][data-color-mode="light"] {
  --tz-border-1: 1px solid var(--tz-color-border-1);
  --tz-border-2: 1px solid var(--tz-color-border-2);
  --tz-border-3: 1px solid var(--tz-color-border-3);
  --tz-border-focus: 2px solid var(--tz-color-border-focus);
  --tz-color-base-blue-100: color(srgb 0 0.09803921568627451 0.1450980392156863);
  --tz-color-base-blue-200: color(srgb 0 0.2549019607843137 0.32941176470588235);
  --tz-color-base-blue-300: color(srgb 0.03137254901960784 0.43137254901960786 0.5254901960784314);
  --tz-color-base-blue-600: color(srgb 0.12549019607843137 0.8274509803921568 0.9647058823529412);
  --tz-color-base-blue-800: color(srgb 0.5764705882352941 0.9372549019607843 1);
  --tz-color-base-blue-900: color(srgb 0.7803921568627451 0.9764705882352941 1);
  --tz-color-base-blue-1000: color(srgb 0.9019607843137255 0.996078431372549 1);
  --tz-color-base-gray-100: color(srgb 0.09803921568627451 0.01568627450980392 0.01568627450980392);
  --tz-color-base-gray-200: color(srgb 0.20784313725490197 0.16862745098039217 0.1607843137254902);
  --tz-color-base-gray-300: color(srgb 0.3686274509803922 0.3254901960784314 0.29411764705882354);
  --tz-color-base-gray-600: color(srgb 0.7333333333333333 0.7137254901960784 0.6980392156862745);
  --tz-color-base-gray-700: color(srgb 0.8745098039215686 0.8509803921568627 0.8431372549019608);
  --tz-color-base-gray-800: color(srgb 0.9372549019607843 0.9176470588235294 0.9098039215686274);
  --tz-color-base-gray-900: color(srgb 0.9882352941176471 0.9686274509803922 0.9647058823529412);
  --tz-color-base-gray-1000: color(srgb 1 1 1);
  --tz-color-base-green-100: color(srgb 0.984313725490196 0.996078431372549 0.984313725490196);
  --tz-color-base-green-200: color(srgb 0.9529411764705882 0.9882352941176471 0.9529411764705882);
  --tz-color-base-green-300: color(srgb 0.9215686274509803 0.9764705882352941 0.9215686274509803);
  --tz-color-base-green-400: color(srgb 0.8745098039215686 0.9529411764705882 0.8745098039215686);
  --tz-color-base-green-500: color(srgb 0.807843137254902 0.9215686274509803 0.8117647058823529);
  --tz-color-base-green-600: color(srgb 0.7176470588235294 0.8745098039215686 0.7294117647058823);
  --tz-color-base-green-700: color(srgb 0.592156862745098 0.8117647058823529 0.611764705882353);
  --tz-color-base-green-800: color(srgb 0.396078431372549 0.7294117647058823 0.4588235294117647);
  --tz-color-base-green-900: color(srgb 0.27450980392156865 0.6549019607843137 0.34509803921568627);
  --tz-color-base-green-1000: color(srgb 0.23921568627450981 0.6039215686274509 0.3137254901960784);
  --tz-color-base-green-1100: color(srgb 0.1607843137254902 0.48627450980392156 0.23137254901960785);
  --tz-color-base-green-1200: color(srgb 0.12549019607843137 0.23529411764705882 0.1450980392156863);
  --tz-color-base-lime-100: color(srgb 0.050980392156862744 0.23921568627450981 0.10980392156862745);
  --tz-color-base-lime-200: color(srgb 0.08627450980392157 0.3411764705882353 0);
  --tz-color-base-lime-300: color(srgb 0.2901960784313726 0.5137254901960784 0.08627450980392157);
  --tz-color-base-lime-600: color(srgb 0.6392156862745098 0.9058823529411765 0.00784313725490196);
  --tz-color-base-lime-800: color(srgb 0.7450980392156863 0.9607843137254902 0);
  --tz-color-base-lime-900: color(srgb 0.8666666666666667 0.9921568627450981 0.6352941176470588);
  --tz-color-base-lime-1000: color(srgb 0.9450980392156862 1 0.8549019607843137);
  --tz-color-base-orange-100: color(srgb 0.19607843137254902 0.00392156862745098 0);
  --tz-color-base-orange-200: color(srgb 0.4235294117647059 0.09019607843137255 0);
  --tz-color-base-orange-300: color(srgb 0.7529411764705882 0.2549019607843137 0);
  --tz-color-base-orange-600: color(srgb 1 0.5529411764705883 0.3568627450980392);
  --tz-color-base-orange-800: color(srgb 1 0.8313725490196079 0.7333333333333333);
  --tz-color-base-orange-900: color(srgb 0.996078431372549 0.8980392156862745 0.8509803921568627);
  --tz-color-base-orange-1000: color(srgb 1 0.9490196078431372 0.9215686274509803);
  --tz-color-bg-1: var(--tz-color-base-gray-1000);
  --tz-color-bg-2: var(--tz-color-base-gray-900);
  --tz-color-bg-3: var(--tz-color-base-gray-800);
  --tz-color-bg-error: var(--tz-color-base-orange-600);
  --tz-color-bg-selected: var(--tz-color-base-lime-1000);
  --tz-color-bg-selected-hint: var(--tz-color-base-lime-800);
  --tz-color-border-1: var(--tz-color-base-gray-300);
  --tz-color-border-2: var(--tz-color-base-gray-600);
  --tz-color-border-3: var(--tz-color-base-gray-700);
  --tz-color-border-focus: var(--tz-color-base-lime-600);
  --tz-color-text-1: var(--tz-color-base-gray-200);
  --tz-color-text-2: var(--tz-color-base-gray-300);
  --tz-color-text-3: var(--tz-color-base-gray-600);
  --tz-color-text-error: var(--tz-color-base-gray-1000);
  --tz-color-text-selected: var(--tz-color-base-blue-200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tz-border-1: 1px solid var(--tz-color-border-1);
    --tz-border-2: 1px solid var(--tz-color-border-2);
    --tz-border-3: 1px solid var(--tz-color-border-3);
    --tz-border-focus: 2px solid var(--tz-color-border-focus);
    --tz-color-base-blue-100: color(srgb 0 0.09803921568627451 0.1450980392156863);
    --tz-color-base-blue-200: color(srgb 0 0.2549019607843137 0.32941176470588235);
    --tz-color-base-blue-300: color(srgb 0.03137254901960784 0.43137254901960786 0.5254901960784314);
    --tz-color-base-blue-600: color(srgb 0.12549019607843137 0.8274509803921568 0.9647058823529412);
    --tz-color-base-blue-800: color(srgb 0.5764705882352941 0.9372549019607843 1);
    --tz-color-base-blue-900: color(srgb 0.7803921568627451 0.9764705882352941 1);
    --tz-color-base-blue-1000: color(srgb 0.9019607843137255 0.996078431372549 1);
    --tz-color-base-gray-100: color(srgb 0.09803921568627451 0.01568627450980392 0.01568627450980392);
    --tz-color-base-gray-200: color(srgb 0.20784313725490197 0.16862745098039217 0.1607843137254902);
    --tz-color-base-gray-300: color(srgb 0.3686274509803922 0.3254901960784314 0.29411764705882354);
    --tz-color-base-gray-600: color(srgb 0.7333333333333333 0.7137254901960784 0.6980392156862745);
    --tz-color-base-gray-700: color(srgb 0.8745098039215686 0.8509803921568627 0.8431372549019608);
    --tz-color-base-gray-800: color(srgb 0.9372549019607843 0.9176470588235294 0.9098039215686274);
    --tz-color-base-gray-900: color(srgb 0.9882352941176471 0.9686274509803922 0.9647058823529412);
    --tz-color-base-gray-1000: color(srgb 1 1 1);
    --tz-color-base-green-100: color(srgb 0.12549019607843137 0.23529411764705882 0.1450980392156863);
    --tz-color-base-green-200: color(srgb 0.1607843137254902 0.48627450980392156 0.23137254901960785);
    --tz-color-base-green-300: color(srgb 0.23921568627450981 0.6039215686274509 0.3137254901960784);
    --tz-color-base-green-400: color(srgb 0.27450980392156865 0.6549019607843137 0.34509803921568627);
    --tz-color-base-green-500: color(srgb 0.396078431372549 0.7294117647058823 0.4588235294117647);
    --tz-color-base-green-600: color(srgb 0.592156862745098 0.8117647058823529 0.611764705882353);
    --tz-color-base-green-700: color(srgb 0.7176470588235294 0.8745098039215686 0.7294117647058823);
    --tz-color-base-green-800: color(srgb 0.807843137254902 0.9215686274509803 0.8117647058823529);
    --tz-color-base-green-900: color(srgb 0.8745098039215686 0.9529411764705882 0.8745098039215686);
    --tz-color-base-green-1000: color(srgb 0.9215686274509803 0.9764705882352941 0.9215686274509803);
    --tz-color-base-green-1100: color(srgb 0.9529411764705882 0.9882352941176471 0.9529411764705882);
    --tz-color-base-green-1200: color(srgb 0.984313725490196 0.996078431372549 0.984313725490196);
    --tz-color-base-lime-100: color(srgb 0.050980392156862744 0.23921568627450981 0.10980392156862745);
    --tz-color-base-lime-200: color(srgb 0.08627450980392157 0.3411764705882353 0);
    --tz-color-base-lime-300: color(srgb 0.2901960784313726 0.5137254901960784 0.08627450980392157);
    --tz-color-base-lime-600: color(srgb 0.6392156862745098 0.9058823529411765 0.00784313725490196);
    --tz-color-base-lime-800: color(srgb 0.7450980392156863 0.9607843137254902 0);
    --tz-color-base-lime-900: color(srgb 0.8666666666666667 0.9921568627450981 0.6352941176470588);
    --tz-color-base-lime-1000: color(srgb 0.9450980392156862 1 0.8549019607843137);
    --tz-color-base-orange-100: color(srgb 0.19607843137254902 0.00392156862745098 0);
    --tz-color-base-orange-200: color(srgb 0.4235294117647059 0.09019607843137255 0);
    --tz-color-base-orange-300: color(srgb 0.7529411764705882 0.2549019607843137 0);
    --tz-color-base-orange-600: color(srgb 1 0.5529411764705883 0.3568627450980392);
    --tz-color-base-orange-800: color(srgb 1 0.8313725490196079 0.7333333333333333);
    --tz-color-base-orange-900: color(srgb 0.996078431372549 0.8980392156862745 0.8509803921568627);
    --tz-color-base-orange-1000: color(srgb 1 0.9490196078431372 0.9215686274509803);
    --tz-color-bg-1: var(--tz-color-base-gray-100);
    --tz-color-bg-2: var(--tz-color-base-gray-200);
    --tz-color-bg-3: var(--tz-color-base-gray-300);
    --tz-color-bg-error: var(--tz-color-base-orange-600);
    --tz-color-bg-selected: var(--tz-color-base-lime-200);
    --tz-color-bg-selected-hint: var(--tz-color-base-lime-100);
    --tz-color-border-1: var(--tz-color-base-gray-600);
    --tz-color-border-2: var(--tz-color-base-gray-200);
    --tz-color-border-3: var(--tz-color-base-gray-200);
    --tz-color-border-focus: var(--tz-color-base-lime-600);
    --tz-color-text-1: var(--tz-color-base-gray-800);
    --tz-color-text-2: var(--tz-color-base-gray-700);
    --tz-color-text-3: var(--tz-color-base-gray-600);
    --tz-color-text-error: var(--tz-color-base-gray-1000);
    --tz-color-text-selected: var(--tz-color-base-blue-800);
  }
}

[data-color-mode="dark"][data-color-mode="dark"] {
  --tz-border-1: 1px solid var(--tz-color-border-1);
  --tz-border-2: 1px solid var(--tz-color-border-2);
  --tz-border-3: 1px solid var(--tz-color-border-3);
  --tz-border-focus: 2px solid var(--tz-color-border-focus);
  --tz-color-base-blue-100: color(srgb 0 0.09803921568627451 0.1450980392156863);
  --tz-color-base-blue-200: color(srgb 0 0.2549019607843137 0.32941176470588235);
  --tz-color-base-blue-300: color(srgb 0.03137254901960784 0.43137254901960786 0.5254901960784314);
  --tz-color-base-blue-600: color(srgb 0.12549019607843137 0.8274509803921568 0.9647058823529412);
  --tz-color-base-blue-800: color(srgb 0.5764705882352941 0.9372549019607843 1);
  --tz-color-base-blue-900: color(srgb 0.7803921568627451 0.9764705882352941 1);
  --tz-color-base-blue-1000: color(srgb 0.9019607843137255 0.996078431372549 1);
  --tz-color-base-gray-100: color(srgb 0.09803921568627451 0.01568627450980392 0.01568627450980392);
  --tz-color-base-gray-200: color(srgb 0.20784313725490197 0.16862745098039217 0.1607843137254902);
  --tz-color-base-gray-300: color(srgb 0.3686274509803922 0.3254901960784314 0.29411764705882354);
  --tz-color-base-gray-600: color(srgb 0.7333333333333333 0.7137254901960784 0.6980392156862745);
  --tz-color-base-gray-700: color(srgb 0.8745098039215686 0.8509803921568627 0.8431372549019608);
  --tz-color-base-gray-800: color(srgb 0.9372549019607843 0.9176470588235294 0.9098039215686274);
  --tz-color-base-gray-900: color(srgb 0.9882352941176471 0.9686274509803922 0.9647058823529412);
  --tz-color-base-gray-1000: color(srgb 1 1 1);
  --tz-color-base-green-100: color(srgb 0.12549019607843137 0.23529411764705882 0.1450980392156863);
  --tz-color-base-green-200: color(srgb 0.1607843137254902 0.48627450980392156 0.23137254901960785);
  --tz-color-base-green-300: color(srgb 0.23921568627450981 0.6039215686274509 0.3137254901960784);
  --tz-color-base-green-400: color(srgb 0.27450980392156865 0.6549019607843137 0.34509803921568627);
  --tz-color-base-green-500: color(srgb 0.396078431372549 0.7294117647058823 0.4588235294117647);
  --tz-color-base-green-600: color(srgb 0.592156862745098 0.8117647058823529 0.611764705882353);
  --tz-color-base-green-700: color(srgb 0.7176470588235294 0.8745098039215686 0.7294117647058823);
  --tz-color-base-green-800: color(srgb 0.807843137254902 0.9215686274509803 0.8117647058823529);
  --tz-color-base-green-900: color(srgb 0.8745098039215686 0.9529411764705882 0.8745098039215686);
  --tz-color-base-green-1000: color(srgb 0.9215686274509803 0.9764705882352941 0.9215686274509803);
  --tz-color-base-green-1100: color(srgb 0.9529411764705882 0.9882352941176471 0.9529411764705882);
  --tz-color-base-green-1200: color(srgb 0.984313725490196 0.996078431372549 0.984313725490196);
  --tz-color-base-lime-100: color(srgb 0.050980392156862744 0.23921568627450981 0.10980392156862745);
  --tz-color-base-lime-200: color(srgb 0.08627450980392157 0.3411764705882353 0);
  --tz-color-base-lime-300: color(srgb 0.2901960784313726 0.5137254901960784 0.08627450980392157);
  --tz-color-base-lime-600: color(srgb 0.6392156862745098 0.9058823529411765 0.00784313725490196);
  --tz-color-base-lime-800: color(srgb 0.7450980392156863 0.9607843137254902 0);
  --tz-color-base-lime-900: color(srgb 0.8666666666666667 0.9921568627450981 0.6352941176470588);
  --tz-color-base-lime-1000: color(srgb 0.9450980392156862 1 0.8549019607843137);
  --tz-color-base-orange-100: color(srgb 0.19607843137254902 0.00392156862745098 0);
  --tz-color-base-orange-200: color(srgb 0.4235294117647059 0.09019607843137255 0);
  --tz-color-base-orange-300: color(srgb 0.7529411764705882 0.2549019607843137 0);
  --tz-color-base-orange-600: color(srgb 1 0.5529411764705883 0.3568627450980392);
  --tz-color-base-orange-800: color(srgb 1 0.8313725490196079 0.7333333333333333);
  --tz-color-base-orange-900: color(srgb 0.996078431372549 0.8980392156862745 0.8509803921568627);
  --tz-color-base-orange-1000: color(srgb 1 0.9490196078431372 0.9215686274509803);
  --tz-color-bg-1: var(--tz-color-base-gray-100);
  --tz-color-bg-2: var(--tz-color-base-gray-200);
  --tz-color-bg-3: var(--tz-color-base-gray-300);
  --tz-color-bg-error: var(--tz-color-base-orange-600);
  --tz-color-bg-selected: var(--tz-color-base-lime-200);
  --tz-color-bg-selected-hint: var(--tz-color-base-lime-100);
  --tz-color-border-1: var(--tz-color-base-gray-600);
  --tz-color-border-2: var(--tz-color-base-gray-200);
  --tz-color-border-3: var(--tz-color-base-gray-200);
  --tz-color-border-focus: var(--tz-color-base-lime-600);
  --tz-color-text-1: var(--tz-color-base-gray-800);
  --tz-color-text-2: var(--tz-color-base-gray-700);
  --tz-color-text-3: var(--tz-color-base-gray-600);
  --tz-color-text-error: var(--tz-color-base-gray-1000);
  --tz-color-text-selected: var(--tz-color-base-blue-800);
}