/* Source: https://trylle.com/home, reference/tokens-source.json.
 * Merged by cascade layer and source order using the supported color-mix branch.
 * Component rules and marketing dither/preview tokens are excluded.
 */

[data-trylle-theme] {
  --font-sans: "Inter Variable", "Inter", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", "Fira Code", monospace;
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-900: oklch(39.6% .141 25.723);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-amber-50: oklch(98.7% .022 95.277);
  --color-amber-100: oklch(96.2% .059 95.617);
  --color-amber-200: oklch(92.4% .12 95.746);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-amber-500: oklch(76.9% .188 70.08);
  --color-amber-600: oklch(66.6% .179 58.318);
  --color-amber-700: oklch(55.5% .163 48.998);
  --color-amber-800: oklch(47.3% .137 46.201);
  --color-amber-900: oklch(41.4% .112 45.904);
  --color-amber-950: oklch(27.9% .077 45.635);
  --color-yellow-300: oklch(90.5% .182 98.111);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-yellow-500: oklch(79.5% .184 86.047);
  --color-yellow-600: oklch(68.1% .162 75.834);
  --color-yellow-700: oklch(55.4% .135 66.442);
  --color-yellow-800: oklch(47.6% .114 61.907);
  --color-yellow-950: oklch(28.6% .066 53.813);
  --color-lime-400: oklch(84.1% .238 128.85);
  --color-green-400: oklch(79.2% .209 151.711);
  --color-green-600: oklch(62.7% .194 149.214);
  --color-green-700: oklch(52.7% .154 150.069);
  --color-emerald-50: oklch(97.9% .021 166.113);
  --color-emerald-100: oklch(95% .052 163.051);
  --color-emerald-300: oklch(84.5% .143 164.978);
  --color-emerald-400: oklch(76.5% .177 163.223);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-emerald-600: oklch(59.6% .145 163.225);
  --color-emerald-700: oklch(50.8% .118 165.612);
  --color-emerald-900: oklch(37.8% .077 168.94);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-teal-600: oklch(60% .118 184.704);
  --color-cyan-400: oklch(78.9% .154 211.53);
  --color-cyan-500: oklch(71.5% .143 215.221);
  --color-sky-100: oklch(95.1% .026 236.824);
  --color-sky-200: oklch(90.1% .058 230.902);
  --color-sky-300: oklch(82.8% .111 230.318);
  --color-sky-400: oklch(74.6% .16 232.661);
  --color-sky-500: oklch(68.5% .169 237.323);
  --color-sky-600: oklch(58.8% .158 241.966);
  --color-sky-700: oklch(50% .134 242.749);
  --color-sky-900: oklch(39.1% .09 240.876);
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-100: oklch(93.2% .032 255.585);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-blue-900: oklch(37.9% .146 265.522);
  --color-indigo-400: oklch(67.3% .182 276.935);
  --color-indigo-500: oklch(58.5% .233 277.117);
  --color-indigo-600: oklch(51.1% .262 276.966);
  --color-violet-50: oklch(96.9% .016 293.756);
  --color-violet-100: oklch(94.3% .029 294.588);
  --color-violet-300: oklch(81.1% .111 293.571);
  --color-violet-400: oklch(70.2% .183 293.541);
  --color-violet-500: oklch(60.6% .25 292.717);
  --color-violet-600: oklch(54.1% .281 293.009);
  --color-violet-700: oklch(49.1% .27 292.581);
  --color-violet-900: oklch(38% .189 293.745);
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-purple-500: oklch(62.7% .265 303.9);
  --color-purple-700: oklch(49.6% .265 301.924);
  --color-purple-800: oklch(43.8% .218 303.724);
  --color-fuchsia-400: oklch(74% .238 322.16);
  --color-fuchsia-500: oklch(66.7% .295 322.15);
  --color-rose-400: oklch(71.2% .194 13.428);
  --color-rose-600: oklch(58.6% .253 17.585);
  --color-zinc-100: oklch(96.7% .001 286.375);
  --color-zinc-400: oklch(70.5% .015 286.067);
  --color-zinc-500: oklch(55.2% .016 285.938);
  --color-zinc-600: oklch(44.2% .017 285.786);
  --color-zinc-800: oklch(27.4% .006 286.033);
  --color-zinc-950: oklch(14.1% .005 285.823);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: 1.45;
  --text-base: 1rem;
  --text-base--line-height: 1.55;
  --text-lg: 1.0625rem;
  --text-lg--line-height: 1.45;
  --text-xl: 1.1875rem;
  --text-xl--line-height: 1.4;
  --text-2xl: 1.375rem;
  --text-2xl--line-height: 1.3;
  --text-3xl: 1.625rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 1.875rem;
  --text-4xl--line-height: 1.15;
  --text-5xl: 2rem;
  --text-5xl--line-height: 1.1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --tracking-normal: 0em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xs: .125rem;
  --radius-2xl: 1rem;
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-sm: 8px;
  --perspective-dramatic: 100px;
  --perspective-distant: 1200px;
  --aspect-video: 16 / 9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-brand: var(--brand);
  --color-brand-dev: var(--brand-dev);
  --color-ff-surface-1: var(--ff-surface-1);
  --color-ff-surface-2: var(--ff-surface-2);
  --color-ff-surface-3: var(--ff-surface-3);
  --color-ff-surface-4: var(--ff-surface-4);
  --color-ff-surface-8: var(--ff-surface-8);
  --animate-accordion-down: accordion-down .2s ease-out;
  --animate-accordion-up: accordion-up .2s ease-out;
  --illustration: var(--color-white);
  --border-illustration: color-mix(in oklab, var(--foreground) 7.5%, transparent);
  --counter-start: 1;
  --ff-surface-1: #fafafa;
  --ff-surface-2: #fcfcfc;
  --ff-surface-3: #fff;
  --ff-surface-4: #fff;
  --ff-surface-5: #fff;
  --ff-surface-6: #fff;
  --ff-surface-7: #fff;
  --ff-surface-8: #fff;
  --ff-segmented-thumb-shadow: 0 0 0 1px #0000001f, 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color);
  --ff-shadow-1: 0 0 0 1px var(--ff-shadow-color);
  --ff-shadow-2: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color);
  --ff-shadow-3: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color);
  --ff-shadow-4: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color), 0 6px 6px -3px var(--ff-shadow-color);
  --ff-shadow-5: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color), 0 6px 6px -3px var(--ff-shadow-color), 0 12px 12px -6px var(--ff-shadow-color);
  --ff-shadow-6: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color), 0 6px 6px -3px var(--ff-shadow-color), 0 12px 12px -6px var(--ff-shadow-color), 0 24px 24px -12px var(--ff-shadow-color);
  --ff-shadow-7: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color), 0 6px 6px -3px var(--ff-shadow-color), 0 12px 12px -6px var(--ff-shadow-color), 0 24px 24px -12px var(--ff-shadow-color), 0 48px 48px -24px var(--ff-shadow-color);
  --ff-shadow-8: 0 0 0 1px var(--ff-shadow-color), 0 1px 1px -.5px var(--ff-shadow-color), 0 3px 3px -1.5px var(--ff-shadow-color), 0 6px 6px -3px var(--ff-shadow-color), 0 12px 12px -6px var(--ff-shadow-color), 0 24px 24px -12px var(--ff-shadow-color), 0 48px 48px -24px var(--ff-shadow-color), 0 96px 96px -48px var(--ff-shadow-color);
  --ff-shadow-color: #0000000f;
  --card: oklch(100% 0 0);
  --card-foreground: oklch(14.1% 0 0);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(14.1% 0 0);
  --primary: oklch(21% .006 285.885);
  --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(96.7% 0 0);
  --secondary-foreground: oklch(21% 0 0);
  --muted: oklch(96.7% 0 0);
  --muted-foreground: oklch(55.2% 0 0);
  --accent: oklch(96.7% 0 0);
  --accent-foreground: oklch(21% 0 0);
  --destructive: #d9070d;
  --destructive-foreground: oklch(98.5% 0 0);
  --form-error-foreground: #d9070d;
  --border: oklch(92% 0 0);
  --input: oklch(92% 0 0);
  --ring: oklch(87.1% 0 0);
  --chart-1: oklch(64.6% .222 41.116);
  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);
  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);
  --radius: .625rem;
  --sidebar: oklch(98.5% 0 0);
  --sidebar-foreground: oklch(14.1% 0 0);
  --sidebar-primary: oklch(21% .006 285.885);
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  --sidebar-accent: oklch(96.7% 0 0);
  --sidebar-accent-foreground: oklch(21% 0 0);
  --sidebar-border: oklch(92% 0 0);
  --sidebar-ring: oklch(87.1% 0 0);
  --background: oklch(100% 0 0);
  --foreground: oklch(14.1% 0 0);
  --container: #fff;
  --surface-0: oklch(96.7% 0 0);
  --surface-1: oklch(97% 0 0/.5);
  --surface-2: oklch(92.2% 0 0/.4);
  --surface-3: #f8f8f8;
  --input-surface: oklch(94.8% 0 0);
  --card-edge-shadow: inset 0 1px 0 0 #fff, 0 0 0 1px #0000000a, 0 1px 2px #0000000d;
  --overview-metric-card-shadow: inset 0 1.8px 0 0 #fff, 0 0 0 1px #0000000a, 0 2.5px 1.5px 0px #0000000a;
  --overview-metric-card-shadow-hover: inset 0 1.5px 0 0 #fff, 0 0 0 1px #f700000b, 0 2px 3px #0000000d;
  --input-edge-shadow: inset 0 1px 0 0 #fff, 0 0 0 1px #0000000a, 0 1px 2px #0000000d;
  --switch-track-off: oklch(97.4% 0 0);
  --switch-track-shadow: inset 0 1.5px 0 0 #fff, inset 0 -1px 0 0 #00000012, 0 0 0 1px #0000000d, 0 1px 2px #00000014;
  --switch-thumb-off-shadow: 0 0 0 1px #0000000f, 0 1px 1px #0000001a, 0 2px 4px #0000001a;
  --switch-thumb-on: oklch(30% 0 0);
  --switch-thumb-on-shadow: none;
  --color-green-500: oklch(62% .194 149.214);
  --brand: oklch(68% .2 150);
  --brand-dev: oklch(75% .17 85);
  --button-tone-fills-ring: #fafafac7;
  --button-tone-fills-ring-hover: #fcfcfce0;
  --button-success: #16a34a;
  --button-success-hover: #1d9047;
  --button-success-border: #1aac50;
  --button-success-border-hover: #1d9047;
  --button-destructive-border: #ff2e35;
  --button-destructive-border-hover: #b6080e;
  --button-gold: #f2c214;
  --button-gold-hover: #e8b612;
  --button-gold-border: #f2c214;
  --button-gold-border-hover: #e8b612;
  --button-gold-foreground: oklch(32% .05 75);
  --button-purple: #7919d2;
  --button-purple-border: #7c3aed;
  --button-tone-purple-stack-rest: inset 0 1.3px 0 0 #ffffff59, inset 0 8px 14px -6px #ffffff38, 0 0 0 1px var(--button-purple-border), 0 1px 2px #5b21b63d, 0 3px 5px -1px #5b21b64d;
  --button-tone-purple-stack-hover: inset 0 1px 0 0 #ffffff80, inset 0 8px 14px -6px #ffffff47, 0 0 0 1px var(--button-purple-border), 0 2px 3px #5b21b642, 0 4px 7px -1px #5b21b657;
  --button-tone-green-stack-rest: inset 0 1px 0 0 #ffffff73, inset 0 8px 14px -6px #ffffff38, 0 0 0 1px var(--button-success-border), 0 1px 2px #0c4a2638, 0 3px 5px -1px #0c4a2647;
  --button-tone-green-stack-hover: inset 0 1px 0 0 #ffffff80, inset 0 8px 14px -6px #ffffff47, 0 0 0 1px var(--button-success-border-hover), 0 2px 3px #0c4a2642, 0 4px 7px -1px #0c4a2657;
  --button-tone-red-stack-rest: inset 0 1.2px 0 0 #ffffff80, inset 0 8px 14px -6px #fff3, 0 0 0 1px var(--button-destructive-border), 0 1px 2px #7808083d, 0 3px 5px -1px #7808084d;
  --button-tone-red-stack-hover: inset 0 1.2px 0 0 #ffffff80, inset 0 8px 14px -6px #ffffff42, 0 0 0 1px var(--button-destructive-border-hover), 0 2px 3px #78080847, 0 4px 7px -1px #7808085c;
  --button-tone-gold-stack-rest: inset 0 1.2px 0 0 #ffffff80, inset 0 8px 14px -6px #ffffff4d, 0 0 0 1px var(--button-gold-border), 0 1px 2px #a073062e, 0 3px 5px -1px #a073063d;
  --button-tone-gold-stack-hover: inset 0 1.5px 0 0 #ffffff80, inset 0 8px 14px -6px #ffffff5c, 0 0 0 1px var(--button-gold-border-hover), 0 2px 3px #a0730633, 0 4px 7px -1px #a0730647;
  --button-primary-border: oklch(14% 0 0);
  --button-primary-border-hover: oklch(12% 0 0);
  --button-primary-border-inset: #ffffff2e;
  --button-primary-border-inset-hover: #ffffff3d;
  --button-tone-primary-stack-rest: inset 0 1.2px 0 0 #ffffff73, inset 0 8px 14px -6px #ffffff38, inset 0 0 0 1px var(--button-primary-border-inset), 0 0 0 1px var(--button-primary-border), 0 1px 2px #00000038, 0 3px 5px -1px #00000047;
  --button-tone-primary-stack-hover: inset 0 1.5px 0 0 #ffffff80, inset 0 8px 14px -6px #ffffff47, inset 0 0 0 1px var(--button-primary-border-inset-hover), 0 0 0 1px var(--button-primary-border-hover), 0 2px 3px #00000042, 0 4px 7px -1px #00000057;
}

[data-trylle-theme="dark"] {
  --illustration: color-mix(in oklab, var(--color-zinc-800) 60%, #000);
  --ff-dm-hi-base: #ffffff05;
  --ff-dm-hi-mid: #ffffff0d;
  --ff-dm-hi-high: #ffffff14;
  --ff-dm-hi-peak: #ffffff1c;
  --ff-dm-ring-base: #ffffff05;
  --ff-dm-ring-mid: #ffffff0a;
  --ff-dm-ring-high: #ffffff0f;
  --ff-dm-drop: #0000002e;
  --ff-segmented-thumb-shadow: var(--ff-shadow-4);
  --ff-shadow-1: inset 0 0 0 1px var(--ff-dm-ring-base);
  --ff-shadow-2: inset 0 1px 0 0 var(--ff-dm-hi-base), inset 0 0 0 1px var(--ff-dm-ring-base), 0 1px 1px -.5px var(--ff-dm-drop);
  --ff-shadow-5: inset 0 1px 0 0 var(--ff-dm-hi-high), inset 0 0 0 1px var(--ff-dm-ring-mid), 0 0 0 1px #00000029, 0 1px 1px -.5px var(--ff-dm-drop), 0 3px 3px -1.5px var(--ff-dm-drop), 0 6px 6px -3px var(--ff-dm-drop), 0 12px 12px -6px var(--ff-dm-drop);
  --ff-shadow-6: inset 0 1px 0 0 var(--ff-dm-hi-high), inset 0 0 0 1px var(--ff-dm-ring-high), 0 0 0 1px #0000002e, 0 1px 1px -.5px var(--ff-dm-drop), 0 3px 3px -1.5px var(--ff-dm-drop), 0 6px 6px -3px var(--ff-dm-drop), 0 12px 12px -6px var(--ff-dm-drop), 0 24px 24px -12px var(--ff-dm-drop);
  --ff-shadow-7: inset 0 1px 0 0 var(--ff-dm-hi-peak), inset 0 0 0 1px var(--ff-dm-ring-high), 0 0 0 1px #0003, 0 1px 1px -.5px var(--ff-dm-drop), 0 3px 3px -1.5px var(--ff-dm-drop), 0 6px 6px -3px var(--ff-dm-drop), 0 12px 12px -6px var(--ff-dm-drop), 0 24px 24px -12px var(--ff-dm-drop), 0 48px 48px -24px var(--ff-dm-drop);
  --ff-shadow-8: inset 0 1px 0 0 var(--ff-dm-hi-peak), inset 0 0 0 1px var(--ff-dm-ring-high), 0 0 0 1px #00000038, 0 1px 1px -.5px var(--ff-dm-drop), 0 3px 3px -1.5px var(--ff-dm-drop), 0 6px 6px -3px var(--ff-dm-drop), 0 12px 12px -6px var(--ff-dm-drop), 0 24px 24px -12px var(--ff-dm-drop), 0 48px 48px -24px var(--ff-dm-drop), 0 96px 96px -48px var(--ff-dm-drop);
  --background: oklch(14.1% 0 0);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(20.5% 0 0);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(22.5% 0 0);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: #dcdcdc;
  --primary-foreground: oklch(21% 0 0);
  --secondary: oklch(27.4% 0 0);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(16% 0 0);
  --muted-foreground: oklch(70.5% 0 0);
  --accent: oklch(27.4% 0 0);
  --accent-foreground: oklch(98.5% 0 0);
  --destructive: oklch(39.6% .141 25.723);
  --destructive-foreground: oklch(63.7% .237 25.331);
  --form-error-foreground: oklch(72% .17 25.331);
  --border: oklch(27.4% 0 0);
  --input: oklch(27.4% 0 0);
  --ring: oklch(68% 0 0);
  --chart-1: oklch(48.8% .243 264.376);
  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);
  --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);
  --sidebar: oklch(21% 0 0);
  --sidebar-foreground: oklch(98.5% 0 0);
  --sidebar-primary: oklch(48.8% .243 264.376);
  --sidebar-accent: oklch(27.4% 0 0);
  --sidebar-accent-foreground: oklch(98.5% 0 0);
  --sidebar-border: oklch(27.4% 0 0);
  --sidebar-ring: oklch(68% 0 0);
  --container: oklch(13.2% 0 0);
  --surface-0: oklch(21% 0 0);
  --surface-1: oklch(24.5% 0 0);
  --surface-2: oklch(28% 0 0);
  --surface-3: oklch(21.7% 0 0);
  --input-surface: oklch(26.2% 0 0);
  --ff-surface-1: oklch(17.4% 0 0);
  --ff-surface-2: oklch(19.1% 0 0);
  --ff-surface-3: oklch(21.7% 0 0);
  --ff-surface-4: oklch(24.6% 0 0);
  --ff-surface-5: oklch(28.2% 0 0);
  --ff-surface-6: oklch(31.9% 0 0);
  --ff-surface-7: oklch(35.5% 0 0);
  --ff-surface-8: oklch(38.9% 0 0);
  --card-edge-shadow: inset 0 1px 0 0 #ffffff0d, 0 1px 2px #0000008c;
  --overview-metric-card-shadow: inset 0 .5px 0 0 #ffffff0a, 0 0 0 1px #ffffff1a, 0 2px 3px #00000080;
  --input-edge-shadow: inset 0 .5px 0 0 #ffffff0f, 0 1px 2px #0000006b;
  --brand: oklch(75% .2 150);
  --brand-dev: oklch(80% .17 85);
  --button-tone-green-stack-rest: inset 0 1px 0 0 #d6f6e280, inset 0 5px 10px -4px #ffffff0a, var(--ff-shadow-3);
  --button-tone-green-stack-hover: inset 0 1px 0 0 #e1fbec94, inset 0 5px 10px -4px #ffffff0c, var(--ff-shadow-4);
  --button-tone-red-stack-rest: inset 0 1px 0 0 #f8717142, var(--ff-shadow-3);
  --button-tone-red-stack-hover: inset 0 1px 0 0 #fca5a55c, var(--ff-shadow-4);
  --button-tone-purple-stack-rest: inset 0 1px 0 0 #d8b4fe47, var(--ff-shadow-3);
  --button-tone-purple-stack-hover: inset 0 1px 0 0 #e9d5ff5c, var(--ff-shadow-4);
  --button-tone-gold-stack-rest: inset 0 1px 0 0 #fbefb085, inset 0 5px 10px -4px #fffbdf13, var(--ff-shadow-3);
  --button-tone-gold-stack-hover: inset 0 1px 0 0 #fdf4bc9c, inset 0 5px 10px -4px #fffde718, var(--ff-shadow-4);
  --button-primary-border: #b3b2b2;
  --button-primary-border-hover: #cfcfcf;
  --button-primary-border-inset: #ededed;
  --button-primary-border-inset-hover: #ffffffa8;
  --button-tone-primary-stack-rest: inset 0 1.5px 0 0 #fff, inset 0 5px 10px -4px #ffffff6b, inset 0 1.5px 0 0px var(--button-primary-border-inset), 0 0 0 1.5px var(--button-primary-border), 0 1px 1px -.5px #0000002e, 0 3px 3px -1.5px #0000002e;
  --button-tone-primary-stack-hover: inset 0 1.5px 0 0 #ffffffe0, inset 0 5px 10px -4px #ffffff80, inset 0 2px 0 0px var(--button-primary-border-inset-hover), 0 0 0 1px var(--button-primary-border-hover), 0 1px 1px -.5px #00000038, 0 3px 3px -1.5px #00000038, 0 6px 6px -3px #0000001f;
  --ff-shadow-3: inset 0 1px 0 0 var(--ff-dm-hi-mid), inset 0 0 0 1px var(--ff-dm-ring-base), 0 2px 6px #0006, 0 8px 20px #00000059;
  --ff-shadow-4: inset 0 1px 0 0 var(--ff-dm-hi-mid), inset 0 0 0 1px var(--ff-dm-ring-mid), 0 2px 6px #0000006b, 0 10px 24px #00000061;
}