/* generated by build-tokens.mjs — do not edit */

@import "tailwindcss";

/**
 * @font-face declarations for the Azion type system.
 *
 * Prepended verbatim into `dist/v4/globals.css` by `scripts/build-tokens.mjs`
 * so any consumer of `@aziontech/theme/globals.css` gets the same faces the
 * design system was authored against — no separate <link rel="stylesheet"> or
 * per-app `@import "@fontsource/…"` needed.
 *
 * Fonts are hosted at fonts.azion.com under a permissive CORS policy; the
 * requests are subresource-cached with `font-display: swap` so first paint
 * uses the system fallback while the .woff2 loads.
 */

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.azion.com/roboto/roboto-black.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('https://fonts.azion.com/roboto-mono/roboto-mono-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('https://fonts.azion.com/roboto-mono/roboto-mono-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src: url('https://fonts.azion.com/sora/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proto Mono';
  src: url('https://fonts.azion.com/proto-mono/ProtoMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proto Mono';
  src: url('https://fonts.azion.com/proto-mono/ProtoMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proto Mono';
  src: url('https://fonts.azion.com/proto-mono/ProtoMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proto Mono';
  src: url('https://fonts.azion.com/proto-mono/ProtoMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src:
    url('https://fonts.azion.com/roboto-condensed/RobotoCondensed-Italic.woff') format('woff'),
    url('https://fonts.azion.com/roboto-condensed/RobotoCondensed-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium Web';
  src:
    url('https://fonts.azion.com/titillium-web/TitilliumWeb-Italic.woff') format('woff'),
    url('https://fonts.azion.com/titillium-web/TitilliumWeb-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/*
 * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that
 * Tailwind v4 only picks up when the source files are inside the scan.
 * Auto-detect scans the CWD only, so we point `@source` at the webkit
 * package via a monorepo-relative path (this file is under
 * `packages/theme/dist/v4/`; walking up three levels reaches `packages/`).
 */
@source "../../../webkit/src";

@theme {
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;
  --color-blue-50: #E5F1FF;
  --color-blue-100: #CCE4FF;
  --color-blue-200: #99C9FF;
  --color-blue-300: #66ADFF;
  --color-blue-400: #3392FF;
  --color-blue-500: #0072F5;
  --color-blue-600: #005FCC;
  --color-blue-700: #004799;
  --color-blue-800: #003066;
  --color-blue-900: #001833;
  --color-blue-950: #000C1A;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #B2B2B2;
  --color-gray-400: #999999;
  --color-gray-500: #808080;
  --color-gray-600: #666666;
  --color-gray-700: #4D4D4D;
  --color-gray-800: #1A1A1A;
  --color-gray-900: #141414;
  --color-gray-950: #0A0A0A;
  --color-violet-50: #F6F6FF;
  --color-violet-100: #ECECFF;
  --color-violet-200: #D9D7FA;
  --color-violet-300: #B5B1F4;
  --color-violet-400: #9F9AF1;
  --color-violet-500: #8A84EC;
  --color-violet-600: #756FE5;
  --color-violet-700: #625BD5;
  --color-violet-800: #524BBB;
  --color-violet-900: #1F1E48;
  --color-violet-950: #100F24;
  --color-orange-50: #FFF5EF;
  --color-orange-100: #FFE7D8;
  --color-orange-200: #FFCFB3;
  --color-orange-300: #FFB180;
  --color-orange-400: #FF8E4D;
  --color-orange-500: #F3652B;
  --color-orange-600: #D94A03;
  --color-orange-700: #B03C02;
  --color-orange-800: #8A2F02;
  --color-orange-900: #692402;
  --color-orange-950: #401602;
  --color-slate-50: #F8F7FC;
  --color-slate-100: #F0EFF8;
  --color-slate-200: #E3E1F0;
  --color-slate-300: #D3D2E6;
  --color-slate-400: #BEBBD6;
  --color-slate-500: #A39FBE;
  --color-slate-600: #8884A4;
  --color-slate-700: #6D698B;
  --color-slate-800: #534F70;
  --color-slate-900: #353040;
  --color-slate-950: #13131A;
  --color-yellow-50: #FEF8E6;
  --color-yellow-100: #FDF2CE;
  --color-yellow-200: #FCE49C;
  --color-yellow-300: #FAD76B;
  --color-yellow-400: #F8CA3A;
  --color-yellow-500: #F7BD08;
  --color-yellow-600: #C59707;
  --color-yellow-700: #947105;
  --color-yellow-800: #634B03;
  --color-yellow-900: #312602;
  --color-yellow-950: #191301;
  --color-green-50: #F0FDF4;
  --color-green-100: #D0FBDF;
  --color-green-200: #A4F4C0;
  --color-green-300: #78EDA2;
  --color-green-400: #52E086;
  --color-green-500: #26D968;
  --color-green-600: #18B452;
  --color-green-700: #16833F;
  --color-green-800: #12542B;
  --color-green-900: #0A2916;
  --color-green-950: #03170B;
  --color-red-50: #FCE8E8;
  --color-red-100: #F9D2D2;
  --color-red-200: #F3A5A5;
  --color-red-300: #ED7878;
  --color-red-400: #E74B4B;
  --color-red-500: #E51A1A;
  --color-red-600: #B71515;
  --color-red-700: #891010;
  --color-red-800: #5B0B0B;
  --color-red-900: #2E0606;
  --color-red-950: #170303;
  --color-surface-0: #FFFFFF;
  --color-surface-50: #FAFAFA;
  --color-surface-100: #F5F5F5;
  --color-surface-200: #E5E5E5;
  --color-surface-300: #B2B2B2;
  --color-surface-400: #999999;
  --color-surface-500: #808080;
  --color-surface-600: #666666;
  --color-surface-700: #4D4D4D;
  --color-surface-800: #1A1A1A;
  --color-surface-900: #141414;
  --color-surface-950: #0A0A0A;
  --color-alpha-violet-50: #8A84EC0D;
  --color-alpha-violet-100: #8A84EC1A;
  --color-alpha-violet-200: #8A84EC33;
  --color-alpha-violet-300: #8A84EC4D;
  --color-alpha-violet-400: #8A84EC66;
  --color-alpha-violet-500: #8A84EC80;
  --color-alpha-violet-600: #8A84EC99;
  --color-alpha-violet-700: #8A84ECB2;
  --color-alpha-violet-800: #8A84ECCC;
  --color-alpha-violet-900: #8A84ECE5;
  --color-alpha-orange-50: #FE601F0D;
  --color-alpha-orange-100: #FE601F1A;
  --color-alpha-orange-200: #FE601F33;
  --color-alpha-orange-300: #FE601F4D;
  --color-alpha-orange-400: #FE601F66;
  --color-alpha-orange-500: #FE601F80;
  --color-alpha-orange-600: #FE601F99;
  --color-alpha-orange-700: #FE601FB2;
  --color-alpha-orange-800: #FE601FCC;
  --color-alpha-orange-900: #FE601FE5;
  --color-alpha-white-50: #FFFFFF0D;
  --color-alpha-white-100: #FFFFFF1A;
  --color-alpha-white-200: #FFFFFF33;
  --color-alpha-white-300: #FFFFFF4D;
  --color-alpha-white-400: #FFFFFF66;
  --color-alpha-white-500: #FFFFFF80;
  --color-alpha-white-600: #FFFFFF99;
  --color-alpha-white-700: #FFFFFFB2;
  --color-alpha-white-800: #FFFFFFCC;
  --color-alpha-white-900: #FFFFFFE5;
  --color-alpha-black-50: #00000005;
  --color-alpha-black-100: #00000014;
  --color-alpha-black-200: #00000033;
  --color-alpha-black-300: #0000004D;
  --color-alpha-black-400: #00000066;
  --color-alpha-black-500: #00000080;
  --color-alpha-black-600: #00000099;
  --color-alpha-black-700: #000000B2;
  --color-alpha-black-800: #000000CC;
  --color-alpha-black-900: #000000E5;
  --color-alpha-green-50: #22C55E0D;
  --color-alpha-green-100: #22C55E1A;
  --color-alpha-green-200: #22C55E33;
  --color-alpha-green-300: #22C55E4D;
  --color-alpha-green-400: #22C55E66;
  --color-alpha-green-500: #22C55E80;
  --color-alpha-green-600: #22C55E99;
  --color-alpha-green-700: #22C55EB2;
  --color-alpha-green-800: #22C55ECC;
  --color-alpha-green-900: #22C55EE5;
  --color-alpha-red-50: #E51A1A0D;
  --color-alpha-red-100: #E51A1A1A;
  --color-alpha-red-200: #E51A1A33;
  --color-alpha-red-300: #E51A1A4D;
  --color-alpha-red-400: #E51A1A66;
  --color-alpha-red-500: #E51A1A80;
  --color-alpha-red-600: #E51A1A99;
  --color-alpha-red-700: #E51A1AB2;
  --color-alpha-red-800: #E51A1ACC;
  --color-alpha-red-900: #E51A1AE5;
  --color-alpha-yellow-50: #F7BD080D;
  --color-alpha-yellow-100: #F7BD081A;
  --color-alpha-yellow-200: #F7BD0833;
  --color-alpha-yellow-300: #F7BD084D;
  --color-alpha-yellow-400: #F7BD0866;
  --color-alpha-yellow-500: #F7BD0880;
  --color-alpha-yellow-600: #F7BD0899;
  --color-alpha-yellow-700: #F7BD08B2;
  --color-alpha-yellow-800: #F7BD08CC;
  --color-alpha-yellow-900: #F7BD08E5;
  --color-alpha-blue-50: #0072F50D;
  --color-alpha-blue-100: #0072F51A;
  --color-alpha-blue-200: #0072F533;
  --color-alpha-blue-300: #0072F54D;
  --color-alpha-blue-400: #0072F566;
  --color-alpha-blue-500: #0072F580;
  --color-alpha-blue-600: #0072F599;
  --color-alpha-blue-700: #0072F5B2;
  --color-alpha-blue-800: #0072F5CC;
  --color-alpha-blue-900: #0072F5E5;
  --color-alpha-absolute-black: #000000E5;
  --color-alpha-absolute-white: #FFFFFFE5;
  --color-brand-primary-50: #FFF5EF;
  --color-brand-primary-100: #FFE7D8;
  --color-brand-primary-200: #FFCFB3;
  --color-brand-primary-300: #FFB180;
  --color-brand-primary-400: #FF8E4D;
  --color-brand-primary-500: #F3652B;
  --color-brand-primary-600: #D94A03;
  --color-brand-primary-700: #B03C02;
  --color-brand-primary-800: #8A2F02;
  --color-brand-primary-900: #692402;
  --color-brand-primary-950: #401602;
  --color-brand-accent-50: #F6F6FF;
  --color-brand-accent-100: #ECECFF;
  --color-brand-accent-200: #D9D7FA;
  --color-brand-accent-300: #B5B1F4;
  --color-brand-accent-400: #9F9AF1;
  --color-brand-accent-500: #8A84EC;
  --color-brand-accent-600: #756FE5;
  --color-brand-accent-700: #625BD5;
  --color-brand-accent-800: #524BBB;
  --color-brand-accent-900: #1F1E48;
  --color-brand-accent-950: #100F24;
  --color-absolute-black: #0A0A0A;
  --color-absolute-white: #FAFAFA;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;
  --animate-shimmer: shimmer 1.6s linear infinite;
  --animate-blink: blink 1s step-end infinite;
  --animate-fade-in: fadeIn 220ms ease-in-out;
  --animate-fade-out: fadeOut 220ms ease-in-out;
  --animate-slide-down: slideDown 220ms ease-in-out;
  --animate-highlight-fade: highlight ease-in forwards;
  --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
  --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
  --animate-slide-out-left: slideOutLeft 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  --animate-slide-in-right: slideInRight 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
  --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
  --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
}

:root, [data-theme=light], .azion.azion-light {
  --border-0: 0;
  --border-1: 0.8px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;
  --container-3xs: 256px;
  --container-2xs: 288px;
  --container-xs: 320px;
  --container-sm: 384px;
  --container-md: 448px;
  --container-lg: 512px;
  --container-xl: 576px;
  --container-2xl: 672px;
  --container-3xl: 768px;
  --container-4xl: 896px;
  --container-5xl: 1024px;
  --container-6xl: 1152px;
  --container-7xl: 1280px;
  --height-2: 8px;
  --height-3: 12px;
  --height-4: 16px;
  --height-5: 20px;
  --height-6: 24px;
  --height-7: 28px;
  --height-8: 32px;
  --height-9: 36px;
  --height-10: 40px;
  --height-11: 44px;
  --height-12: 48px;
  --height-14: 56px;
  --height-16: 64px;
  --height-20: 80px;
  --height-24: 96px;
  --height-28: 112px;
  --height-32: 128px;
  --height-36: 144px;
  --height-40: 160px;
  --height-44: 176px;
  --height-48: 192px;
  --height-52: 208px;
  --height-56: 224px;
  --height-60: 240px;
  --height-64: 256px;
  --height-72: 288px;
  --height-80: 320px;
  --height-96: 384px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 28px;
  --size-8: 32px;
  --size-9: 36px;
  --size-10: 40px;
  --size-11: 44px;
  --size-12: 48px;
  --size-14: 56px;
  --size-16: 64px;
  --size-20: 80px;
  --size-24: 96px;
  --size-28: 112px;
  --size-32: 128px;
  --size-36: 144px;
  --size-40: 160px;
  --size-44: 176px;
  --size-48: 192px;
  --size-52: 208px;
  --size-56: 224px;
  --size-60: 240px;
  --size-64: 256px;
  --size-72: 288px;
  --size-80: 320px;
  --size-96: 384px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --width-3xs: 256px;
  --width-2xs: 288px;
  --width-xs: 320px;
  --width-sm: 384px;
  --width-md: 448px;
  --width-lg: 512px;
  --width-xl: 576px;
  --width-2xl: 672px;
  --width-3xl: 768px;
  --width-4xl: 896px;
  --width-5xl: 1024px;
  --width-6xl: 1152px;
  --width-7xl: 1280px;
  --aspect-video: 16 / 9;
  --shape-flat: 0;
  --shape-card: 8px;
  --shape-button: 6px;
  --shape-elements: 6px;
  --border-width-default: 0.8px;
  --font-sans: Sora;
  --font-code: Roboto Mono;
  --font-display: Proto Mono;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.5rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --line-height-3: 12px;
  --line-height-4: 16px;
  --line-height-5: 20px;
  --line-height-6: 24px;
  --line-height-7: 28px;
  --line-height-8: 32px;
  --line-height-9: 36px;
  --line-height-10: 40px;
  --line-height-none: 0;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;
  --perspective-dramatic: 100px;
  --perspective-near: 300px;
  --perspective-normal: 500px;
  --perspective-midrange: 800px;
  --perspective-distant: 1200px;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;
  --animate-shimmer: shimmer 1.6s linear infinite;
  --animate-blink: blink 1s step-end infinite;
  --animate-fade-in: fadeIn 220ms ease-in-out;
  --animate-fade-out: fadeOut 220ms ease-in-out;
  --animate-slide-down: slideDown 220ms ease-in-out;
  --animate-highlight-fade: highlight ease-in forwards;
  --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
  --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
  --animate-slide-out-left: slideOutLeft 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  --animate-slide-in-right: slideInRight 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
  --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
  --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
  --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
  --ring-offset: 0.5px;
  --container-px: 1rem;
  --container-py: 4rem;
  --container-max-width: 28rem;
  --spacing-xxl: 2rem;
  --spacing-xl: 1.5rem;
  --spacing-lg: 1rem;
  --spacing-md: 1rem;
  --spacing-sm: 0.75rem;
  --spacing-xs: 0.5rem;
  --spacing-xxs: 0.25rem;
  --z-input-field: 1;
  --z-input-popup: 10;
  --z-input-overlay: 1100;
  --text-big-number-md-font-size: 1.25rem;
  --text-big-number-md-line-height: 1.25;
  --text-big-number-md-font-weight: 400;
  --text-big-number-md-font-family: Proto Mono;
  --text-big-number-sm-font-size: 1rem;
  --text-big-number-sm-line-height: 1.25;
  --text-big-number-sm-font-weight: 400;
  --text-big-number-sm-font-family: Proto Mono;
  --text-big-number-lg-font-size: 1.5rem;
  --text-big-number-lg-line-height: 1.25;
  --text-big-number-lg-font-weight: 400;
  --text-big-number-lg-font-family: Proto Mono;
  --text-heading-2xl-font-size: 1.875rem;
  --text-heading-2xl-line-height: 1.25;
  --text-heading-2xl-font-weight: 400;
  --text-heading-xl-font-size: 1.25rem;
  --text-heading-xl-line-height: 1.25;
  --text-heading-xl-font-weight: 400;
  --text-heading-lg-font-size: 1.125rem;
  --text-heading-lg-line-height: 1.25;
  --text-heading-lg-font-weight: 400;
  --text-heading-md-font-size: 1rem;
  --text-heading-md-line-height: 1.25;
  --text-heading-md-font-weight: 400;
  --text-heading-sm-font-size: 0.875rem;
  --text-heading-sm-line-height: 1.375;
  --text-heading-sm-font-weight: 400;
  --text-heading-xs-font-size: 1rem;
  --text-heading-xs-line-height: 1.375;
  --text-heading-xs-font-weight: 400;
  --text-heading-xxs-font-size: 0.875rem;
  --text-heading-xxs-line-height: 1.375;
  --text-heading-xxs-font-weight: 400;
  --text-label-lg-font-size: 1rem;
  --text-label-lg-line-height: 1.5;
  --text-label-lg-font-weight: 500;
  --text-label-md-font-size: 0.875rem;
  --text-label-md-line-height: 1.5;
  --text-label-md-font-weight: 500;
  --text-label-sm-font-size: 0.75rem;
  --text-label-sm-line-height: 1.5;
  --text-label-sm-font-weight: 500;
  --text-label-code-sm-font-family: Roboto Mono;
  --text-label-code-sm-font-size: 0.75rem;
  --text-label-code-sm-line-height: 1;
  --text-label-code-sm-font-weight: 400;
  --text-label-code-sm-letter-spacing: 0;
  --text-label-code-md-font-family: Roboto Mono;
  --text-label-code-md-font-size: 0.875rem;
  --text-label-code-md-line-height: 1;
  --text-label-code-md-font-weight: 400;
  --text-label-code-md-letter-spacing: 0;
  --text-label-code-lg-font-family: Roboto Mono;
  --text-label-code-lg-font-size: 1rem;
  --text-label-code-lg-line-height: 1;
  --text-label-code-lg-font-weight: 400;
  --text-label-code-lg-letter-spacing: 0;
  --text-body-lg-font-size: 1rem;
  --text-body-lg-line-height: 1.5;
  --text-body-md-font-size: 1rem;
  --text-body-md-line-height: 1.5;
  --text-body-sm-font-size: 0.875rem;
  --text-body-sm-line-height: 1.5;
  --text-body-xs-font-size: 0.75rem;
  --text-body-xs-line-height: 1.5;
  --text-tag-sm-font-size: 0.75rem;
  --text-tag-sm-line-height: 1.25;
  --text-tag-sm-font-weight: 600;
  --text-tag-md-font-size: 0.75rem;
  --text-tag-md-line-height: 1.25;
  --text-tag-md-font-weight: 600;
  --text-body-xxs-font-size: 0.75rem;
  --text-body-xxs-line-height: 1.5;
  --text-overline-md-font-family: Proto Mono;
  --text-overline-md-font-size: 0.75rem;
  --text-overline-md-line-height: 1.375;
  --text-overline-md-letter-spacing: 0.08em;
  --text-overline-md-text-transform: uppercase;
  --text-overline-sm-font-family: Proto Mono;
  --text-overline-sm-font-size: 0.75rem;
  --text-overline-sm-line-height: 1.375;
  --text-overline-sm-letter-spacing: 0.08em;
  --text-overline-sm-text-transform: uppercase;
  --text-overline-xs-font-family: Proto Mono;
  --text-overline-xs-font-size: 0.75rem;
  --text-overline-xs-line-height: 1.375;
  --text-overline-xs-letter-spacing: 0.08em;
  --text-overline-xs-text-transform: uppercase;
  --text-button-lg-font-family: Sora;
  --text-button-lg-font-size: 0.875rem;
  --text-button-lg-font-weight: 400;
  --text-button-lg-line-height: 1.25;
  --text-button-lg-letter-spacing: 0;
  --text-button-md-font-family: Sora;
  --text-button-md-font-size: 0.75rem;
  --text-button-md-font-weight: 400;
  --text-button-md-line-height: 1.25;
  --text-button-md-letter-spacing: 0;
  --text-link-font-size: inherit;
  --text-link-line-height: inherit;
  --text-link-color: var(--text-link);
  --text-link-border-radius: var(--shape-elements);
  --text-link-transition: all 110ms cubic-bezier(0.39, 0.57, 0.56, 1);

  @media (min-width: 640px) {
    --container-px: 2.5rem;
    --container-py: 8rem;
    --container-max-width: 64rem;
    --spacing-xxl: 4rem;
    --spacing-xl: 2rem;
    --spacing-lg: 1.5rem;
    --text-big-number-md-font-size: 1.5rem;
    --text-big-number-sm-font-size: 1.25rem;
    --text-big-number-lg-font-size: 2.25rem;
    --text-heading-2xl-font-size: 3rem;
    --text-heading-xl-font-size: 1.875rem;
    --text-heading-md-font-size: 1.25rem;
    --text-heading-sm-font-size: 1rem;
    --text-overline-md-font-size: 0.875rem;
  }

  @media (min-width: 768px) {
    --text-big-number-md-font-size: 2.25rem;
    --text-big-number-lg-font-size: 3.5rem;
    --text-heading-2xl-font-size: 3.5rem;
    --text-heading-xl-font-size: 2.25rem;
    --text-heading-lg-font-size: 1.875rem;
    --text-heading-md-font-size: 1.5rem;
    --text-heading-sm-font-size: 1.125rem;
    --text-body-lg-font-size: 1.125rem;
  }

  @media (min-width: 1280px) {
    --container-px: 0;
    --container-py: 12rem;
    --container-max-width: 80rem;
    --spacing-xxl: 6rem;
    --spacing-xl: 3rem;
  }
}

/* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */
:root, [data-theme=light], .azion.azion-light {
  --surface-0: #FFFFFF;
  --surface-50: #FAFAFA;
  --surface-100: #F5F5F5;
  --surface-200: #E5E5E5;
  --surface-300: #B2B2B2;
  --surface-400: #999999;
  --surface-500: #808080;
  --surface-600: #666666;
  --surface-700: #4D4D4D;
  --surface-800: #1A1A1A;
  --surface-900: #141414;
  --surface-950: #0A0A0A;
  --primary: #F3652B;
  --primary-mask: #FE601F33;
  --primary-selected: #FE601F33;
  --primary-contrast: #000000;
  --secondary: #0A0A0A;
  --secondary-mask: #00000005;
  --secondary-selected: #0A0A0A;
  --secondary-contrast: #FFFFFF;
  --accent: #756FE5;
  --accent-mask: #8A84EC0D;
  --accent-selected: #8A84EC;
  --accent-contrast: #000000;
  --bg-canvas: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-mask: #00000005;
  --bg-surface-overlay: #FAFAFA;
  --bg-hover: #00000014;
  --bg-active: #00000005;
  --bg-backdrop: #000000CC;
  --bg-selected: #E5E5E5;
  --bg-contrast: #141414;
  --bg-disabled: #E5E5E5;
  --border-default: #00000014;
  --border-muted: #00000014;
  --border-strong: #000000;
  --border-selected: #F3652B;
  --text-default: #141414;
  --text-muted: #666666;
  --text-disabled: #999999;
  --text-link: #005FCC;
  --text-link-hover: #004799;
  --text-contrast: #FAFAFA;
  --ring-color: #666666;
  --code-sintax-identifier: #141414;
  --code-sintax-line-number: #808080;
  --code-sintax-keyword: #005FCC;
  --code-sintax-punctuation: #808080;
  --code-sintax-function: #F3652B;
  --code-sintax-type: #947105;
  --code-sintax-string: #005FCC;
  --success: #A4F4C0;
  --success-border: #22C55E66;
  --success-contrast: #12542B;
  --warning: #FCE49C;
  --warning-border: #F7BD0880;
  --warning-contrast: #634B03;
  --danger: #F9D2D2;
  --danger-border: #E51A1A66;
  --danger-contrast: #891010;
  --info: #CCE4FF;
  --info-border: #8A84EC66;
  --info-contrast: #004799;
}

[data-theme=dark], .dark, .azion.azion-dark {
  --surface-0: #FFFFFF;
  --surface-50: #FAFAFA;
  --surface-100: #F5F5F5;
  --surface-200: #E5E5E5;
  --surface-300: #B2B2B2;
  --surface-400: #999999;
  --surface-500: #808080;
  --surface-600: #666666;
  --surface-700: #4D4D4D;
  --surface-800: #1A1A1A;
  --surface-900: #141414;
  --surface-950: #0A0A0A;
  --primary: #F3652B;
  --primary-mask: #FE601F33;
  --primary-selected: #FE601F33;
  --primary-contrast: #FFFFFF;
  --secondary: #FFFFFF;
  --secondary-mask: #FFFFFF1A;
  --secondary-selected: #FFFFFF;
  --secondary-contrast: #000000;
  --accent: #8A84EC;
  --accent-mask: #8A84EC1A;
  --accent-selected: #8A84EC;
  --accent-contrast: #000000;
  --bg-canvas: #000000;
  --bg-surface: #0A0A0A;
  --bg-surface-raised: #141414;
  --bg-mask: #FFFFFF0D;
  --bg-surface-overlay: #4D4D4D;
  --bg-hover: #00000033;
  --bg-active: #00000014;
  --bg-backdrop: #000000CC;
  --bg-selected: #1A1A1A;
  --bg-contrast: #FAFAFA;
  --bg-disabled: #1A1A1A;
  --border-default: #FFFFFF1A;
  --border-muted: #FFFFFF0D;
  --border-strong: #FFFFFF;
  --border-selected: #F3652B;
  --text-default: #FAFAFA;
  --text-muted: #999999;
  --text-disabled: #4D4D4D;
  --text-link: #3392FF;
  --text-link-hover: #66ADFF;
  --text-contrast: #000000;
  --ring-color: #4D4D4D;
  --code-sintax-identifier: #FAFAFA;
  --code-sintax-line-number: #999999;
  --code-sintax-keyword: #3392FF;
  --code-sintax-punctuation: #999999;
  --code-sintax-function: #F3652B;
  --code-sintax-type: #FAD76B;
  --code-sintax-string: #3392FF;
  --success: #0A2916;
  --success-border: #22C55E66;
  --success-contrast: #52E086;
  --warning: #312602;
  --warning-border: #F7BD0880;
  --warning-contrast: #F7BD08;
  --danger: #5B0B0B;
  --danger-border: #E51A1A66;
  --danger-contrast: #ED7878;
  --info: #001833;
  --info-border: #0072F580;
  --info-contrast: #66ADFF;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slideDown {
  0% { height: 0; }
  100% { height: auto; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes highlight {
  0% { background-color: var(--surface-hover); font-weight: 500; }
  100% { background-color: var(--surface-hover); font-weight: 500; }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes popupScaleIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes popupScaleOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

@keyframes slideInLeft {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes slideOutLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes slideInRight {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes slideOutRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes progressIndeterminate {
  0% { inset-inline-start: -35%; inset-inline-end: 100%; }
  60% { inset-inline-start: 100%; inset-inline-end: -90%; }
  100% { inset-inline-start: 100%; inset-inline-end: -90%; }
}

@keyframes progressIndeterminateShort {
  0% { inset-inline-start: -200%; inset-inline-end: 100%; }
  60% { inset-inline-start: 107%; inset-inline-end: -8%; }
  100% { inset-inline-start: 107%; inset-inline-end: -8%; }
}

@layer components {
  /* ── Containers ── */
  .px-container { padding-left: var(--container-px); padding-right: var(--container-px); }
  .py-container { padding-top: var(--container-py); padding-bottom: var(--container-py); }
  .max-container-width { max-width: var(--container-max-width); }

  /* ── Spacings ── */
  .gap-spacing-xxl { gap: var(--spacing-xxl); }
  .p-spacing-xxl { padding: var(--spacing-xxl); }
  .gap-spacing-xl { gap: var(--spacing-xl); }
  .p-spacing-xl { padding: var(--spacing-xl); }
  .gap-spacing-lg { gap: var(--spacing-lg); }
  .p-spacing-lg { padding: var(--spacing-lg); }
  .gap-spacing-md { gap: var(--spacing-md); }
  .p-spacing-md { padding: var(--spacing-md); }
  .gap-spacing-sm { gap: var(--spacing-sm); }
  .p-spacing-sm { padding: var(--spacing-sm); }
  .gap-spacing-xs { gap: var(--spacing-xs); }
  .p-spacing-xs { padding: var(--spacing-xs); }
  .gap-spacing-xxs { gap: var(--spacing-xxs); }
  .p-spacing-xxs { padding: var(--spacing-xxs); }

  /* ── Animation extras (properties beyond the animation shorthand) ── */
  .animate-popup-scale-in { transform-origin: var(--popup-origin, center); }
  .animate-popup-scale-out { transform-origin: var(--popup-origin, center); }
}

@utility text-big-number-md {
  font-size: var(--text-big-number-md-font-size);
  line-height: var(--text-big-number-md-line-height);
  font-weight: var(--text-big-number-md-font-weight);
  font-family: var(--text-big-number-md-font-family);
}

@utility text-big-number-sm {
  font-size: var(--text-big-number-sm-font-size);
  line-height: var(--text-big-number-sm-line-height);
  font-weight: var(--text-big-number-sm-font-weight);
  font-family: var(--text-big-number-sm-font-family);
}

@utility text-big-number-lg {
  font-size: var(--text-big-number-lg-font-size);
  line-height: var(--text-big-number-lg-line-height);
  font-weight: var(--text-big-number-lg-font-weight);
  font-family: var(--text-big-number-lg-font-family);
}

@utility text-heading-2xl {
  font-size: var(--text-heading-2xl-font-size);
  line-height: var(--text-heading-2xl-line-height);
  font-weight: var(--text-heading-2xl-font-weight);
}

@utility text-heading-xl {
  font-size: var(--text-heading-xl-font-size);
  line-height: var(--text-heading-xl-line-height);
  font-weight: var(--text-heading-xl-font-weight);
}

@utility text-heading-lg {
  font-size: var(--text-heading-lg-font-size);
  line-height: var(--text-heading-lg-line-height);
  font-weight: var(--text-heading-lg-font-weight);
}

@utility text-heading-md {
  font-size: var(--text-heading-md-font-size);
  line-height: var(--text-heading-md-line-height);
  font-weight: var(--text-heading-md-font-weight);
}

@utility text-heading-sm {
  font-size: var(--text-heading-sm-font-size);
  line-height: var(--text-heading-sm-line-height);
  font-weight: var(--text-heading-sm-font-weight);
}

@utility text-heading-xs {
  font-size: var(--text-heading-xs-font-size);
  line-height: var(--text-heading-xs-line-height);
  font-weight: var(--text-heading-xs-font-weight);
}

@utility text-heading-xxs {
  font-size: var(--text-heading-xxs-font-size);
  line-height: var(--text-heading-xxs-line-height);
  font-weight: var(--text-heading-xxs-font-weight);
}

@utility text-label-lg {
  font-size: var(--text-label-lg-font-size);
  line-height: var(--text-label-lg-line-height);
  font-weight: var(--text-label-lg-font-weight);
}

@utility text-label-md {
  font-size: var(--text-label-md-font-size);
  line-height: var(--text-label-md-line-height);
  font-weight: var(--text-label-md-font-weight);
}

@utility text-label-sm {
  font-size: var(--text-label-sm-font-size);
  line-height: var(--text-label-sm-line-height);
  font-weight: var(--text-label-sm-font-weight);
}

@utility text-label-code-sm {
  font-family: var(--text-label-code-sm-font-family);
  font-size: var(--text-label-code-sm-font-size);
  line-height: var(--text-label-code-sm-line-height);
  font-weight: var(--text-label-code-sm-font-weight);
  letter-spacing: var(--text-label-code-sm-letter-spacing);
}

@utility text-label-code-md {
  font-family: var(--text-label-code-md-font-family);
  font-size: var(--text-label-code-md-font-size);
  line-height: var(--text-label-code-md-line-height);
  font-weight: var(--text-label-code-md-font-weight);
  letter-spacing: var(--text-label-code-md-letter-spacing);
}

@utility text-label-code-lg {
  font-family: var(--text-label-code-lg-font-family);
  font-size: var(--text-label-code-lg-font-size);
  line-height: var(--text-label-code-lg-line-height);
  font-weight: var(--text-label-code-lg-font-weight);
  letter-spacing: var(--text-label-code-lg-letter-spacing);
}

@utility text-body-lg {
  font-size: var(--text-body-lg-font-size);
  line-height: var(--text-body-lg-line-height);
}

@utility text-body-md {
  font-size: var(--text-body-md-font-size);
  line-height: var(--text-body-md-line-height);
}

@utility text-body-sm {
  font-size: var(--text-body-sm-font-size);
  line-height: var(--text-body-sm-line-height);
}

@utility text-body-xs {
  font-size: var(--text-body-xs-font-size);
  line-height: var(--text-body-xs-line-height);
}

@utility text-tag-sm {
  font-size: var(--text-tag-sm-font-size);
  line-height: var(--text-tag-sm-line-height);
  font-weight: var(--text-tag-sm-font-weight);
}

@utility text-tag-md {
  font-size: var(--text-tag-md-font-size);
  line-height: var(--text-tag-md-line-height);
  font-weight: var(--text-tag-md-font-weight);
}

@utility text-body-xxs {
  font-size: var(--text-body-xxs-font-size);
  line-height: var(--text-body-xxs-line-height);
}

@utility text-overline-md {
  font-family: var(--text-overline-md-font-family);
  font-size: var(--text-overline-md-font-size);
  line-height: var(--text-overline-md-line-height);
  letter-spacing: var(--text-overline-md-letter-spacing);
  text-transform: var(--text-overline-md-text-transform);
}

@utility text-overline-sm {
  font-family: var(--text-overline-sm-font-family);
  font-size: var(--text-overline-sm-font-size);
  line-height: var(--text-overline-sm-line-height);
  letter-spacing: var(--text-overline-sm-letter-spacing);
  text-transform: var(--text-overline-sm-text-transform);
}

@utility text-overline-xs {
  font-family: var(--text-overline-xs-font-family);
  font-size: var(--text-overline-xs-font-size);
  line-height: var(--text-overline-xs-line-height);
  letter-spacing: var(--text-overline-xs-letter-spacing);
  text-transform: var(--text-overline-xs-text-transform);
}

@utility text-button-lg {
  font-family: var(--text-button-lg-font-family);
  font-size: var(--text-button-lg-font-size);
  font-weight: var(--text-button-lg-font-weight);
  line-height: var(--text-button-lg-line-height);
  letter-spacing: var(--text-button-lg-letter-spacing);
}

@utility text-button-md {
  font-family: var(--text-button-md-font-family);
  font-size: var(--text-button-md-font-size);
  font-weight: var(--text-button-md-font-weight);
  line-height: var(--text-button-md-line-height);
  letter-spacing: var(--text-button-md-letter-spacing);
}

@utility text-link {
  font-size: var(--text-link-font-size);
  line-height: var(--text-link-line-height);
  color: var(--text-link-color);
  border-radius: var(--text-link-border-radius);
  transition: var(--text-link-transition);
  &:hover { color: var(--text-link-hover); text-decoration: underline; }
  &:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .text-link { transition: none; }
}

@utility bg-surface-0 { background-color: var(--surface-0); }
@utility text-surface-0 { color: var(--surface-0); }
@utility border-surface-0 { border-color: var(--surface-0); }
@utility bg-surface-50 { background-color: var(--surface-50); }
@utility text-surface-50 { color: var(--surface-50); }
@utility border-surface-50 { border-color: var(--surface-50); }
@utility bg-surface-100 { background-color: var(--surface-100); }
@utility text-surface-100 { color: var(--surface-100); }
@utility border-surface-100 { border-color: var(--surface-100); }
@utility bg-surface-200 { background-color: var(--surface-200); }
@utility text-surface-200 { color: var(--surface-200); }
@utility border-surface-200 { border-color: var(--surface-200); }
@utility bg-surface-300 { background-color: var(--surface-300); }
@utility text-surface-300 { color: var(--surface-300); }
@utility border-surface-300 { border-color: var(--surface-300); }
@utility bg-surface-400 { background-color: var(--surface-400); }
@utility text-surface-400 { color: var(--surface-400); }
@utility border-surface-400 { border-color: var(--surface-400); }
@utility bg-surface-500 { background-color: var(--surface-500); }
@utility text-surface-500 { color: var(--surface-500); }
@utility border-surface-500 { border-color: var(--surface-500); }
@utility bg-surface-600 { background-color: var(--surface-600); }
@utility text-surface-600 { color: var(--surface-600); }
@utility border-surface-600 { border-color: var(--surface-600); }
@utility bg-surface-700 { background-color: var(--surface-700); }
@utility text-surface-700 { color: var(--surface-700); }
@utility border-surface-700 { border-color: var(--surface-700); }
@utility bg-surface-800 { background-color: var(--surface-800); }
@utility text-surface-800 { color: var(--surface-800); }
@utility border-surface-800 { border-color: var(--surface-800); }
@utility bg-surface-900 { background-color: var(--surface-900); }
@utility text-surface-900 { color: var(--surface-900); }
@utility border-surface-900 { border-color: var(--surface-900); }
@utility bg-surface-950 { background-color: var(--surface-950); }
@utility text-surface-950 { color: var(--surface-950); }
@utility border-surface-950 { border-color: var(--surface-950); }
@utility bg-primary { background-color: var(--primary); }
@utility text-primary { color: var(--primary); }
@utility border-primary { border-color: var(--primary); }
@utility bg-primary-mask { background-color: var(--primary-mask); }
@utility text-primary-mask { color: var(--primary-mask); }
@utility border-primary-mask { border-color: var(--primary-mask); }
@utility bg-primary-selected { background-color: var(--primary-selected); }
@utility text-primary-selected { color: var(--primary-selected); }
@utility border-primary-selected { border-color: var(--primary-selected); }
@utility bg-primary-contrast { background-color: var(--primary-contrast); }
@utility text-primary-contrast { color: var(--primary-contrast); }
@utility border-primary-contrast { border-color: var(--primary-contrast); }
@utility bg-secondary { background-color: var(--secondary); }
@utility text-secondary { color: var(--secondary); }
@utility border-secondary { border-color: var(--secondary); }
@utility bg-secondary-mask { background-color: var(--secondary-mask); }
@utility text-secondary-mask { color: var(--secondary-mask); }
@utility border-secondary-mask { border-color: var(--secondary-mask); }
@utility bg-secondary-selected { background-color: var(--secondary-selected); }
@utility text-secondary-selected { color: var(--secondary-selected); }
@utility border-secondary-selected { border-color: var(--secondary-selected); }
@utility bg-secondary-contrast { background-color: var(--secondary-contrast); }
@utility text-secondary-contrast { color: var(--secondary-contrast); }
@utility border-secondary-contrast { border-color: var(--secondary-contrast); }
@utility bg-accent { background-color: var(--accent); }
@utility text-accent { color: var(--accent); }
@utility border-accent { border-color: var(--accent); }
@utility bg-accent-mask { background-color: var(--accent-mask); }
@utility text-accent-mask { color: var(--accent-mask); }
@utility border-accent-mask { border-color: var(--accent-mask); }
@utility bg-accent-selected { background-color: var(--accent-selected); }
@utility text-accent-selected { color: var(--accent-selected); }
@utility border-accent-selected { border-color: var(--accent-selected); }
@utility bg-accent-contrast { background-color: var(--accent-contrast); }
@utility text-accent-contrast { color: var(--accent-contrast); }
@utility border-accent-contrast { border-color: var(--accent-contrast); }
@utility bg-canvas { background-color: var(--bg-canvas); }
@utility bg-surface { background-color: var(--bg-surface); }
@utility bg-surface-raised { background-color: var(--bg-surface-raised); }
@utility bg-mask { background-color: var(--bg-mask); }
@utility bg-surface-overlay { background-color: var(--bg-surface-overlay); }
@utility bg-hover { background-color: var(--bg-hover); }
@utility bg-active { background-color: var(--bg-active); }
@utility bg-backdrop { background-color: var(--bg-backdrop); }
@utility bg-selected { background-color: var(--bg-selected); }
@utility bg-contrast { background-color: var(--bg-contrast); }
@utility bg-disabled { background-color: var(--bg-disabled); }
@utility border-default { border-color: var(--border-default); }
@utility border-muted { border-color: var(--border-muted); }
@utility border-strong { border-color: var(--border-strong); }
@utility border-selected { border-color: var(--border-selected); }
@utility text-default { color: var(--text-default); }
@utility text-muted { color: var(--text-muted); }
@utility text-disabled { color: var(--text-disabled); }
@utility text-link-hover { color: var(--text-link-hover); }
@utility text-contrast { color: var(--text-contrast); }
@utility ring-color { --tw-ring-color: var(--ring-color); }
@utility bg-success { background-color: var(--success); }
@utility text-success { color: var(--success); }
@utility border-success { border-color: var(--success); }
@utility bg-success-border { background-color: var(--success-border); }
@utility text-success-border { color: var(--success-border); }
@utility border-success-border { border-color: var(--success-border); }
@utility bg-success-contrast { background-color: var(--success-contrast); }
@utility text-success-contrast { color: var(--success-contrast); }
@utility border-success-contrast { border-color: var(--success-contrast); }
@utility bg-warning { background-color: var(--warning); }
@utility text-warning { color: var(--warning); }
@utility border-warning { border-color: var(--warning); }
@utility bg-warning-border { background-color: var(--warning-border); }
@utility text-warning-border { color: var(--warning-border); }
@utility border-warning-border { border-color: var(--warning-border); }
@utility bg-warning-contrast { background-color: var(--warning-contrast); }
@utility text-warning-contrast { color: var(--warning-contrast); }
@utility border-warning-contrast { border-color: var(--warning-contrast); }
@utility bg-danger { background-color: var(--danger); }
@utility text-danger { color: var(--danger); }
@utility border-danger { border-color: var(--danger); }
@utility bg-danger-border { background-color: var(--danger-border); }
@utility text-danger-border { color: var(--danger-border); }
@utility border-danger-border { border-color: var(--danger-border); }
@utility bg-danger-contrast { background-color: var(--danger-contrast); }
@utility text-danger-contrast { color: var(--danger-contrast); }
@utility border-danger-contrast { border-color: var(--danger-contrast); }
@utility bg-info { background-color: var(--info); }
@utility text-info { color: var(--info); }
@utility border-info { border-color: var(--info); }
@utility bg-info-border { background-color: var(--info-border); }
@utility text-info-border { color: var(--info-border); }
@utility border-info-border { border-color: var(--info-border); }
@utility bg-info-contrast { background-color: var(--info-contrast); }
@utility text-info-contrast { color: var(--info-contrast); }
@utility border-info-contrast { border-color: var(--info-contrast); }

@layer base {
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  summary {
    cursor: pointer;
  }
}