@aziontech/theme 2.6.0 → 4.1.0

package/dist/v4/globals.scss

@@ -1,7 +1,186 @@
-/* generated by build-tokens.mjs — target: v4 — do not edit */
+/* 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;
@@ -187,28 +366,28 @@
   --color-alpha-blue-900: #0072F5E5;
   --color-alpha-absolute-black: #000000E5;
   --color-alpha-absolute-white: #FFFFFFE5;
-  --color-primary-50: #FFF5EF;
-  --color-primary-100: #FFE7D8;
-  --color-primary-200: #FFCFB3;
-  --color-primary-300: #FFB180;
-  --color-primary-400: #FF8E4D;
-  --color-primary-500: #F3652B;
-  --color-primary-600: #D94A03;
-  --color-primary-700: #B03C02;
-  --color-primary-800: #8A2F02;
-  --color-primary-900: #692402;
-  --color-primary-950: #401602;
-  --color-accent-50: #F6F6FF;
-  --color-accent-100: #ECECFF;
-  --color-accent-200: #D9D7FA;
-  --color-accent-300: #B5B1F4;
-  --color-accent-400: #9F9AF1;
-  --color-accent-500: #8A84EC;
-  --color-accent-600: #756FE5;
-  --color-accent-700: #625BD5;
-  --color-accent-800: #524BBB;
-  --color-accent-900: #1F1E48;
-  --color-accent-950: #100F24;
+  --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;
@@ -216,6 +395,24 @@
   --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 {
@@ -371,7 +568,7 @@
   --text-4xl--line-height: calc(2.5 / 2.25);
   --text-5xl: 3rem;
   --text-5xl--line-height: 1;
-  --text-6xl: 3.75rem;
+  --text-6xl: 3.5rem;
   --text-6xl--line-height: 1;
   --text-7xl: 4.5rem;
   --text-7xl--line-height: 1;
@@ -447,8 +644,20 @@
   --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;
@@ -461,28 +670,38 @@
   --spacing-xs: 0.5rem;
   --spacing-xxs: 0.25rem;
   --text-big-number-md-font-size: 1.25rem;
-  --text-big-number-md-line-height: 1.20;
+  --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.20;
+  --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.20;
+  --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.1;
+  --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.1;
+  --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.2;
+  --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.3;
+  --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.4;
+  --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.4;
+  --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.4;
+  --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;
@@ -492,6 +711,21 @@
   --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;
@@ -500,38 +734,38 @@
   --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.6875rem;
-  --text-tag-sm-line-height: 1;
+  --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;
+  --text-tag-md-line-height: 1.25;
   --text-tag-md-font-weight: 600;
-  --text-body-xxs-font-size: 0.625rem;
+  --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.4;
+  --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.4;
+  --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.625rem;
-  --text-overline-xs-line-height: 1.4;
+  --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: 600;
-  --text-button-lg-line-height: 1;
+  --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: 600;
-  --text-button-md-line-height: 1;
+  --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;
@@ -558,8 +792,8 @@
 
   @media (min-width: 768px) {
     --text-big-number-md-font-size: 2.25rem;
-    --text-big-number-lg-font-size: 3.75rem;
-    --text-heading-2xl-font-size: 3.75rem;
+    --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;
@@ -576,6 +810,215 @@
   }
 }
 
+/* ── 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); }
@@ -598,36 +1041,341 @@
   .gap-spacing-xxs { gap: var(--spacing-xxs); }
   .p-spacing-xxs { padding: var(--spacing-xxs); }
 
-  /* ── Texts ── */
-  .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); font-family: var(--text-big-number-md-font-family); }
-  .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); font-family: var(--text-big-number-sm-font-family); }
-  .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); font-family: var(--text-big-number-lg-font-family); }
-  .text-heading-2xl { font-size: var(--text-heading-2xl-font-size); line-height: var(--text-heading-2xl-line-height); }
-  .text-heading-xl { font-size: var(--text-heading-xl-font-size); line-height: var(--text-heading-xl-line-height); }
-  .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
-  .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
-  .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
-  .text-heading-xs { font-size: var(--text-heading-xs-font-size); line-height: var(--text-heading-xs-line-height); }
-  .text-heading-xxs { font-size: var(--text-heading-xxs-font-size); line-height: var(--text-heading-xxs-line-height); }
-  .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); }
-  .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); }
-  .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); }
-  .text-body-lg { font-size: var(--text-body-lg-font-size); line-height: var(--text-body-lg-line-height); }
-  .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
-  .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
-  .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
-  .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); }
-  .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); }
-  .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
-  .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); }
-  .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); }
-  .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); }
-  .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); }
-  .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); }
-  .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); }
-  .text-link:hover { color: var(--text-link-hover); text-decoration: underline; }
-  .text-link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
-  @media (prefers-reduced-motion: reduce) {
-    .text-link { transition: none; }
+  /* ── 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;
   }
 }