@theme inline {
    --color-primary: var(--theme-color-primary);
    --color-primary-border: color-mix(in oklch, var(--color-primary) 100%, black 20%);
    --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, black 30%);
    --color-primary-gap: color-mix(in oklch, var(--color-primary) 100%, black 50%);
    --color-success: var(--theme-color-success);
    --color-gray-50: var(--theme-color-gray-50);
    --color-gray-100: var(--theme-color-gray-100);
    --color-gray-150: var(--theme-color-gray-150);
    --color-gray-200: var(--theme-color-gray-200);
    --color-gray-300: var(--theme-color-gray-300);
    --color-gray-400: var(--theme-color-gray-400);
    --color-gray-500: var(--theme-color-gray-500);
    --color-gray-600: var(--theme-color-gray-600);
    --color-gray-700: var(--theme-color-gray-700);
    --color-gray-800: var(--theme-color-gray-800);
    --color-gray-850: var(--theme-color-gray-850);
    --color-gray-900: var(--theme-color-gray-900);
    --color-gray-925: var(--theme-color-gray-925);
    --color-gray-950: var(--theme-color-gray-950);
    --color-volt: oklch(93.86% 0.2018 122.24);

    --color-body-bg: var(--theme-color-body-bg);
    --color-body-border: var(--theme-color-body-border);
    --color-content-bg: var(--theme-color-content-bg);
    --color-content-border: var(--theme-color-content-border);
    --color-global-header-bg: var(--theme-color-global-header-bg);
    --color-progress-bar: var(--theme-color-progress-bar);
    --color-focus-outline: var(--theme-color-focus-outline);
    --color-ui-accent-bg: var(--theme-color-ui-accent-bg);
    --color-ui-accent-text: var(--theme-color-ui-accent-text);
    --color-switch-bg: var(--theme-color-switch-bg);

    /* Custom color shades for all Tailwind color families */
    --color-slate-150: oklch(0.9485 0.01 251.702);
    --color-slate-850: oklch(0.236 0.041 263.801);
    --color-slate-925: oklch(0.1945 0.042 265.573);
    --color-zinc-150: oklch(0.956 0.0022 286.32);
    --color-zinc-850: oklch(0.236 0.006 286.015);
    --color-zinc-925: oklch(0.1982 0.0042 285.73);
    --color-neutral-150: oklch(0.946 0 0);
    --color-neutral-850: oklch(0.236 0 0);
    --color-neutral-925: oklch(0.1947 0 0);
    --color-stone-150: oklch(0.9465 0.002 77.571);
    --color-stone-850: oklch(0.236 0.006 48.043);
    --color-stone-925: oklch(0.2042 0.0057 55.203);
    --color-red-150: oklch(0.9105 0.047 18.026);
    --color-red-850: oklch(0.42 0.159 26.311);
    --color-red-925: oklch(0.3724 0.1326 25.778);
    --color-orange-150: oklch(0.9275 0.057 72.931);
    --color-orange-850: oklch(0.439 0.14 37.738);
    --color-orange-925: oklch(0.3837 0.1155 37.845);
    --color-amber-150: oklch(0.943 0.0895 95.682);
    --color-amber-850: oklch(0.444 0.125 46.053);
    --color-amber-925: oklch(0.3909 0.1060 45.858);
    --color-yellow-150: oklch(0.959 0.1 102.367);
    --color-yellow-850: oklch(0.449 0.105 59.808);
    --color-yellow-925: oklch(0.3979 0.0900 57.042);
    --color-lime-150: oklch(0.9525 0.097 123.325);
    --color-lime-850: oklch(0.429 0.113 131.296);
    --color-lime-925: oklch(0.3826 0.0960 131.242);
    --color-green-150: oklch(0.9435 0.064 156.369);
    --color-green-850: oklch(0.421 0.107 151.932);
    --color-green-925: oklch(0.3713 0.0899 152.603);
    --color-emerald-150: oklch(0.9275 0.0725 163.601);
    --color-emerald-850: oklch(0.405 0.086 167.427);
    --color-emerald-925: oklch(0.3582 0.0726 169.341);
    --color-teal-150: oklch(0.9315 0.0735 180.614);
    --color-teal-850: oklch(0.412 0.071 189.308);
    --color-teal-925: oklch(0.3674 0.0601 188.891);
    --color-cyan-150: oklch(0.9365 0.0625 204.215);
    --color-cyan-850: oklch(0.424 0.078 225.706);
    --color-cyan-925: oklch(0.3816 0.0676 227.696);
    --color-sky-150: oklch(0.926 0.042 233.863);
    --color-sky-850: oklch(0.417 0.1 240.833);
    --color-sky-925: oklch(0.3743 0.0859 241.124);
    --color-blue-150: oklch(0.907 0.0455 254.857);
    --color-blue-850: oklch(0.402 0.173 265.587);
    --color-blue-925: oklch(0.3624 0.1366 265.935);
    --color-indigo-150: oklch(0.9 0.0495 273.414);
    --color-indigo-850: oklch(0.379 0.17 277.532);
    --color-indigo-925: oklch(0.3416 0.1348 279.158);
    --color-violet-150: oklch(0.9185 0.043 293.936);
    --color-violet-850: oklch(0.406 0.211 293.252);
    --color-violet-925: oklch(0.3634 0.1808 293.291);
    --color-purple-150: oklch(0.924 0.048 306.939);
    --color-purple-850: oklch(0.41 0.197 304.356);
    --color-purple-925: oklch(0.3656 0.1714 304.599);
    --color-fuchsia-150: oklch(0.9275 0.0565 319.236);
    --color-fuchsia-850: oklch(0.427 0.191 325.102);
    --color-fuchsia-925: oklch(0.3825 0.1642 325.620);
    --color-pink-150: oklch(0.9235 0.0445 342.745);
    --color-pink-850: oklch(0.434 0.17 3.114);
    --color-pink-925: oklch(0.3868 0.1455 2.557);
    --color-rose-150: oklch(0.9165 0.044 11.291);
    --color-rose-850: oklch(0.433 0.174 11.985);
    --color-rose-925: oklch(0.3862 0.1498 10.413);

    --color-dark-blue-100: #2870F5;
    --color-dark-blue-125: #1e68f1;
    --color-dark-blue-150: #1f67ec;
    --color-dark-blue-175: #1560ec;
    --color-dark-blue-200: #2a4270;

    --color-orange-light: #fcc062;
    --color-orange: #f5a82f;
    --color-orange-dark: #e08a1e;

    --color-pink-light: #ff5ba7;
    --color-pink: #ff269e;
    --color-pink-dark: #e00095;

    --color-purple-light: #e0b7ff;
    --color-purple: #c471ed;
    --color-purple-dark: #a855cd;

    --color-yellow-light: #ffffe0;
    --color-yellow: #fbfab0;
    --color-yellow-dark: #e8dc1e;

    --color-amber: #ffd700;
    --color-green: #00ff00;
    --color-red: #ff0000;
    --color-dark-red: #900000;
    --color-blue: #0000ff;
    --color-gray: #808080;
    --color-dark-gray: #404040;
}

.dark {
    @theme inline {
        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
    }
}

@theme {
    /* This is the outer width of the page content area. */
    --max-width-page: 85rem;

    --text-4xs: 0.4rem;
    --text-3xs: 0.5rem;
    --text-2xs: 0.7rem;
    --text-xs: 0.825rem;

    --tracking-tight: -0.01em;

    --breakpoint-xs: 30rem;
    --breakpoint-2xs: 20rem;
    --breakpoint-3xs: 15rem;
    /* 1920px */
    --breakpoint-3xl: 120rem;

    --shadow-ui-xs: 0px 1px 3px -1px rgba(0,0,0,0.10);
    --shadow-ui-sm: 0px 2px 3px -2px rgba(0,0,0,0.15);
    --shadow-ui-md: 0px 2px 4px -2px rgba(0,0,0,0.37);
    --shadow-ui-lg: 0px 4px 7px -4px rgba(0,0,0,0.15);
    --shadow-ui-xl: 0px 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

    --animate-wiggle: wiggle 200ms ease-in-out infinite;

    @keyframes wiggle {
        0%,
        100% {
            transform: rotate(-3deg);
        }
        50% {
            transform: rotate(3deg);
        }
    }
}

:root {
    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);

    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
}

.dark {
    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
}

@custom-variant with-contrast (&:where([data-contrast="increased"] *));

