@7onic-ui/tokens 0.1.0

package/css/variables.css

@@ -0,0 +1,924 @@
+/**
+ * Design System - CSS Variables
+ * ⚠️ Auto-generated from figma-tokens.json — DO NOT EDIT
+ *
+ * No Tailwind required. Just import:
+ * @import '@7onic-ui/tokens/css/variables.css';
+ *
+ * Regenerate: npx sync-tokens
+ */
+
+:root {
+  /* ========================================
+     Primitive Colors
+     Raw color palette — the building blocks
+     for semantic color tokens
+     ======================================== */
+
+  /* Base */
+  --color-white: #FFFFFF;
+  --color-white-rgb: 255 255 255;
+  --color-black: #000000;
+  --color-black-rgb: 0 0 0;
+
+  /* Gray */
+  --color-gray-50: #F9F9FA;
+  --color-gray-50-rgb: 249 249 250;
+  --color-gray-100: #F4F4F5;
+  --color-gray-100-rgb: 244 244 245;
+  --color-gray-200: #E4E4E6;
+  --color-gray-200-rgb: 228 228 230;
+  --color-gray-300: #D4D4D5;
+  --color-gray-300-rgb: 212 212 213;
+  --color-gray-400: #9A9A9B;
+  --color-gray-400-rgb: 154 154 155;
+  --color-gray-500: #6B6B6C;
+  --color-gray-500-rgb: 107 107 108;
+  --color-gray-600: #4A4A4B;
+  --color-gray-600-rgb: 74 74 75;
+  --color-gray-700: #3A3A3E;
+  --color-gray-700-rgb: 58 58 62;
+  --color-gray-800: #2D2D31;
+  --color-gray-800-rgb: 45 45 49;
+  --color-gray-900: #222225;
+  --color-gray-900-rgb: 34 34 37;
+
+  /* Primary */
+  --color-primary-50: #DBF8FB;
+  --color-primary-50-rgb: 219 248 251;
+  --color-primary-100: #B2F0F5;
+  --color-primary-100-rgb: 178 240 245;
+  --color-primary-200: #89E8F0;
+  --color-primary-200-rgb: 137 232 240;
+  --color-primary-300: #60E0EB;
+  --color-primary-300-rgb: 96 224 235;
+  --color-primary-400: #37D8E6;
+  --color-primary-400-rgb: 55 216 230;
+  --color-primary-500: #1AC6D5;
+  --color-primary-500-rgb: 26 198 213;
+  --color-primary-600: #15A0AC;
+  --color-primary-600-rgb: 21 160 172;
+  --color-primary-700: #107A84;
+  --color-primary-700-rgb: 16 122 132;
+  --color-primary-800: #0B545B;
+  --color-primary-800-rgb: 11 84 91;
+  --color-primary-900: #062E32;
+  --color-primary-900-rgb: 6 46 50;
+
+  /* Secondary */
+  --color-secondary-50: #F5F5FB;
+  --color-secondary-50-rgb: 245 245 251;
+  --color-secondary-100: #EBEBF5;
+  --color-secondary-100-rgb: 235 235 245;
+  --color-secondary-200: #D9D9E9;
+  --color-secondary-200-rgb: 217 217 233;
+  --color-secondary-300: #BCBCD2;
+  --color-secondary-300-rgb: 188 188 210;
+  --color-secondary-400: #8F8FA9;
+  --color-secondary-400-rgb: 143 143 169;
+  --color-secondary-500: #69697F;
+  --color-secondary-500-rgb: 105 105 127;
+  --color-secondary-600: #4E4E60;
+  --color-secondary-600-rgb: 78 78 96;
+  --color-secondary-700: #3B3B4A;
+  --color-secondary-700-rgb: 59 59 74;
+  --color-secondary-800: #2F2F3B;
+  --color-secondary-800-rgb: 47 47 59;
+  --color-secondary-900: #23232D;
+  --color-secondary-900-rgb: 35 35 45;
+
+  /* Blue */
+  --color-blue-50: #EFF6FF;
+  --color-blue-50-rgb: 239 246 255;
+  --color-blue-100: #DBEAFE;
+  --color-blue-100-rgb: 219 234 254;
+  --color-blue-200: #BFDBFE;
+  --color-blue-200-rgb: 191 219 254;
+  --color-blue-300: #93C5FD;
+  --color-blue-300-rgb: 147 197 253;
+  --color-blue-400: #60A5FA;
+  --color-blue-400-rgb: 96 165 250;
+  --color-blue-500: #3B82F6;
+  --color-blue-500-rgb: 59 130 246;
+  --color-blue-600: #2563EB;
+  --color-blue-600-rgb: 37 99 235;
+  --color-blue-700: #1D4ED8;
+  --color-blue-700-rgb: 29 78 216;
+  --color-blue-800: #1E40AF;
+  --color-blue-800-rgb: 30 64 175;
+  --color-blue-900: #1E3A8A;
+  --color-blue-900-rgb: 30 58 138;
+
+  /* Green */
+  --color-green-50: #ECFDF5;
+  --color-green-50-rgb: 236 253 245;
+  --color-green-100: #D1FAE5;
+  --color-green-100-rgb: 209 250 229;
+  --color-green-200: #A7F3D0;
+  --color-green-200-rgb: 167 243 208;
+  --color-green-300: #6EE7B7;
+  --color-green-300-rgb: 110 231 183;
+  --color-green-400: #34D399;
+  --color-green-400-rgb: 52 211 153;
+  --color-green-500: #10B981;
+  --color-green-500-rgb: 16 185 129;
+  --color-green-600: #059669;
+  --color-green-600-rgb: 5 150 105;
+  --color-green-700: #047857;
+  --color-green-700-rgb: 4 120 87;
+  --color-green-800: #065F46;
+  --color-green-800-rgb: 6 95 70;
+  --color-green-900: #064E3B;
+  --color-green-900-rgb: 6 78 59;
+
+  /* Yellow */
+  --color-yellow-50: #FFFBEB;
+  --color-yellow-50-rgb: 255 251 235;
+  --color-yellow-100: #FEF3C7;
+  --color-yellow-100-rgb: 254 243 199;
+  --color-yellow-200: #FDE68A;
+  --color-yellow-200-rgb: 253 230 138;
+  --color-yellow-300: #FCD34D;
+  --color-yellow-300-rgb: 252 211 77;
+  --color-yellow-400: #FBBF24;
+  --color-yellow-400-rgb: 251 191 36;
+  --color-yellow-500: #F59E0B;
+  --color-yellow-500-rgb: 245 158 11;
+  --color-yellow-600: #D97706;
+  --color-yellow-600-rgb: 217 119 6;
+  --color-yellow-700: #B45309;
+  --color-yellow-700-rgb: 180 83 9;
+  --color-yellow-800: #92400E;
+  --color-yellow-800-rgb: 146 64 14;
+  --color-yellow-900: #78350F;
+  --color-yellow-900-rgb: 120 53 15;
+
+  /* Red */
+  --color-red-50: #FEF2F2;
+  --color-red-50-rgb: 254 242 242;
+  --color-red-100: #FEE2E2;
+  --color-red-100-rgb: 254 226 226;
+  --color-red-200: #FECACA;
+  --color-red-200-rgb: 254 202 202;
+  --color-red-300: #FCA5A5;
+  --color-red-300-rgb: 252 165 165;
+  --color-red-400: #F87171;
+  --color-red-400-rgb: 248 113 113;
+  --color-red-500: #EF4444;
+  --color-red-500-rgb: 239 68 68;
+  --color-red-600: #DC2626;
+  --color-red-600-rgb: 220 38 38;
+  --color-red-700: #B91C1C;
+  --color-red-700-rgb: 185 28 28;
+  --color-red-800: #991B1B;
+  --color-red-800-rgb: 153 27 27;
+  --color-red-900: #7F1D1D;
+  --color-red-900-rgb: 127 29 29;
+
+  /* Chart */
+  --color-chart-blue-light: #4570E8;
+  --color-chart-blue-light-rgb: 69 112 232;
+  --color-chart-blue-dark: #6B8FF5;
+  --color-chart-blue-dark-rgb: 107 143 245;
+  --color-chart-pink-light: #D94F9A;
+  --color-chart-pink-light-rgb: 217 79 154;
+  --color-chart-pink-dark: #E870B8;
+  --color-chart-pink-dark-rgb: 232 112 184;
+  --color-chart-lavender-light: #A888F0;
+  --color-chart-lavender-light-rgb: 168 136 240;
+  --color-chart-lavender-dark: #C4A8F8;
+  --color-chart-lavender-dark-rgb: 196 168 248;
+  --color-chart-sky-light: #68C8F5;
+  --color-chart-sky-light-rgb: 104 200 245;
+  --color-chart-sky-dark: #8DD8F8;
+  --color-chart-sky-dark-rgb: 141 216 248;
+  --color-chart-rose-light: #F0A0CC;
+  --color-chart-rose-light-rgb: 240 160 204;
+  --color-chart-rose-dark: #F8C0DE;
+  --color-chart-rose-dark-rgb: 248 192 222;
+
+  /* ========================================
+     Font Family
+     ======================================== */
+  --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-family-mono: 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+
+  /* ========================================
+     Typography
+     ======================================== */
+  --font-size-2xs: 0.6875rem; /* 11px */
+  --line-height-2xs: 1rem; /* 16px */
+  --font-size-xs: 0.75rem; /* 12px */
+  --line-height-xs: 1.125rem; /* 18px */
+  --font-size-sm: 0.8125rem; /* 13px */
+  --line-height-sm: 1.25rem; /* 20px */
+  --font-size-md: 0.875rem; /* 14px */
+  --line-height-md: 1.375rem; /* 22px */
+  --font-size-base: 1rem; /* 16px */
+  --line-height-base: 1.625rem; /* 26px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --line-height-lg: 1.75rem; /* 28px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --line-height-xl: 1.875rem; /* 30px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --line-height-2xl: 2.125rem; /* 34px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --line-height-3xl: 2.5rem; /* 40px */
+  --font-size-4xl: 2.25rem; /* 36px */
+  --line-height-4xl: 2.875rem; /* 46px */
+  --font-size-5xl: 3rem; /* 48px */
+  --line-height-5xl: 3.625rem; /* 58px */
+
+  /* ========================================
+     Font Weight
+     ======================================== */
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* ========================================
+     Spacing
+     0~12px: 2px increments, 12px~: 4px increments
+     ======================================== */
+  --spacing-0: 0; 
+  --spacing-0-5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2-5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+
+  /* ========================================
+     Border Radius
+     ======================================== */
+  --radius-none: 0px;
+  --radius-sm: 2px;
+  --radius-base: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+
+  /* ========================================
+     Border Width
+     ======================================== */
+  --border-width-0: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
+  /* ========================================
+     Shadows (Light Mode)
+     ======================================== */
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-primary-glow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
+
+  /* ========================================
+     Icon Size (5-step scale)
+     ======================================== */
+  --icon-size-2xs: 0.75rem; /* 12px */
+  --icon-size-xs: 0.875rem; /* 14px */
+  --icon-size-sm: 1rem; /* 16px */
+  --icon-size-md: 1.25rem; /* 20px */
+  --icon-size-lg: 1.5rem; /* 24px */
+  --icon-size-xl: 2rem; /* 32px */
+
+  /* ========================================
+     Scale
+     ======================================== */
+  --scale-50: 0.5;
+  --scale-75: 0.75;
+  --scale-95: 0.95;
+  --scale-pressed: 0.98;
+
+  /* ========================================
+     Z-Index
+     ======================================== */
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-sticky: 100;
+  --z-index-dropdown: 1000;
+  --z-index-overlay: 1100;
+  --z-index-modal: 2000;
+  --z-index-popover: 2100;
+  --z-index-tooltip: 2200;
+  --z-index-toast: 3000;
+
+  /* ========================================
+     Opacity
+     ======================================== */
+  --opacity-0: 0%;
+  --opacity-5: 5%;
+  --opacity-10: 10%;
+  --opacity-15: 15%;
+  --opacity-20: 20%;
+  --opacity-25: 25%;
+  --opacity-30: 30%;
+  --opacity-35: 35%;
+  --opacity-40: 40%;
+  --opacity-45: 45%;
+  --opacity-50: 50%;
+  --opacity-55: 55%;
+  --opacity-60: 60%;
+  --opacity-65: 65%;
+  --opacity-70: 70%;
+  --opacity-75: 75%;
+  --opacity-80: 80%;
+  --opacity-85: 85%;
+  --opacity-90: 90%;
+  --opacity-95: 95%;
+  --opacity-100: 100%;
+
+  /* ========================================
+     Duration
+     ======================================== */
+  --duration-instant: 0ms;
+  --duration-fast: 100ms;
+  --duration-micro: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 400ms;
+  --duration-slowest: 500ms;
+  --duration-spin: 1000ms;
+
+  /* ========================================
+     Easing
+     ======================================== */
+  --easing-linear: linear;
+  --easing-ease: ease;
+  --easing-ease-in: ease-in;
+  --easing-ease-out: ease-out;
+  --easing-ease-in-out: ease-in-out;
+
+  /* ========================================
+     Breakpoints
+     ======================================== */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ========================================
+     Component Size
+     ======================================== */
+  --component-switch-track-sm-width: 24px;
+  --component-switch-track-sm-height: 14px;
+  --component-switch-track-default-width: 32px;
+  --component-switch-track-default-height: 18px;
+  --component-switch-track-lg-width: 40px;
+  --component-switch-track-lg-height: 22px;
+  --component-switch-thumb-sm: 12px;
+  --component-switch-thumb-default: 16px;
+  --component-switch-thumb-lg: 20px;
+  --component-slider-thumb-sm: 14px;
+  --component-slider-thumb-default: 18px;
+  --component-slider-thumb-lg: 22px;
+
+  /* ========================================
+     Semantic Typography
+     ======================================== */
+  --typography-heading-1-font-size: var(--font-size-3xl); /* 30px */
+  --typography-heading-1-line-height: var(--line-height-3xl); /* 40px */
+  --typography-heading-1-font-weight: var(--font-weight-bold); /* 700 */
+  --typography-heading-1-font-family: var(--font-family-sans);
+  --typography-heading-2-font-size: var(--font-size-2xl); /* 24px */
+  --typography-heading-2-line-height: var(--line-height-2xl); /* 34px */
+  --typography-heading-2-font-weight: var(--font-weight-bold); /* 700 */
+  --typography-heading-2-font-family: var(--font-family-sans);
+  --typography-heading-3-font-size: var(--font-size-xl); /* 20px */
+  --typography-heading-3-line-height: var(--line-height-xl); /* 30px */
+  --typography-heading-3-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-heading-3-font-family: var(--font-family-sans);
+  --typography-heading-4-font-size: var(--font-size-lg); /* 18px */
+  --typography-heading-4-line-height: var(--line-height-lg); /* 28px */
+  --typography-heading-4-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-heading-4-font-family: var(--font-family-sans);
+  --typography-heading-5-font-size: var(--font-size-base); /* 16px */
+  --typography-heading-5-line-height: var(--line-height-base); /* 26px */
+  --typography-heading-5-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-heading-5-font-family: var(--font-family-sans);
+  --typography-heading-6-font-size: var(--font-size-md); /* 14px */
+  --typography-heading-6-line-height: var(--line-height-md); /* 22px */
+  --typography-heading-6-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-heading-6-font-family: var(--font-family-sans);
+  --typography-body-lg-font-size: var(--font-size-lg); /* 18px */
+  --typography-body-lg-line-height: var(--line-height-lg); /* 28px */
+  --typography-body-lg-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-body-lg-font-family: var(--font-family-sans);
+  --typography-body-default-font-size: var(--font-size-base); /* 16px */
+  --typography-body-default-line-height: var(--line-height-base); /* 26px */
+  --typography-body-default-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-body-default-font-family: var(--font-family-sans);
+  --typography-body-md-font-size: var(--font-size-md); /* 14px */
+  --typography-body-md-line-height: var(--line-height-md); /* 22px */
+  --typography-body-md-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-body-md-font-family: var(--font-family-sans);
+  --typography-body-sm-font-size: var(--font-size-sm); /* 13px */
+  --typography-body-sm-line-height: var(--line-height-sm); /* 20px */
+  --typography-body-sm-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-body-sm-font-family: var(--font-family-sans);
+  --typography-body-xs-font-size: var(--font-size-xs); /* 12px */
+  --typography-body-xs-line-height: var(--line-height-xs); /* 18px */
+  --typography-body-xs-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-body-xs-font-family: var(--font-family-sans);
+  --typography-body-2xs-font-size: var(--font-size-2xs); /* 11px */
+  --typography-body-2xs-line-height: var(--line-height-2xs); /* 16px */
+  --typography-body-2xs-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-body-2xs-font-family: var(--font-family-sans);
+  --typography-label-lg-font-size: var(--font-size-base); /* 16px */
+  --typography-label-lg-line-height: var(--line-height-base); /* 26px */
+  --typography-label-lg-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-label-lg-font-family: var(--font-family-sans);
+  --typography-label-md-font-size: var(--font-size-md); /* 14px */
+  --typography-label-md-line-height: var(--line-height-md); /* 22px */
+  --typography-label-md-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-label-md-font-family: var(--font-family-sans);
+  --typography-label-default-font-size: var(--font-size-sm); /* 13px */
+  --typography-label-default-line-height: var(--line-height-sm); /* 20px */
+  --typography-label-default-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-label-default-font-family: var(--font-family-sans);
+  --typography-label-sm-font-size: var(--font-size-xs); /* 12px */
+  --typography-label-sm-line-height: var(--line-height-xs); /* 18px */
+  --typography-label-sm-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-label-sm-font-family: var(--font-family-sans);
+  --typography-label-xs-font-size: var(--font-size-2xs); /* 11px */
+  --typography-label-xs-line-height: var(--line-height-2xs); /* 16px */
+  --typography-label-xs-font-weight: var(--font-weight-semibold); /* 600 */
+  --typography-label-xs-font-family: var(--font-family-sans);
+  --typography-caption-font-size: var(--font-size-xs); /* 12px */
+  --typography-caption-line-height: var(--line-height-xs); /* 18px */
+  --typography-caption-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-caption-font-family: var(--font-family-sans);
+  --typography-code-block-font-size: var(--font-size-sm); /* 13px */
+  --typography-code-block-line-height: 1.375rem; /* override: sm default = 20px */
+  --typography-code-block-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-code-block-font-family: var(--font-family-mono);
+  --typography-code-inline-font-size: var(--font-size-sm); /* 13px */
+  --typography-code-inline-line-height: var(--line-height-sm); /* 20px */
+  --typography-code-inline-font-weight: var(--font-weight-normal); /* 400 */
+  --typography-code-inline-font-family: var(--font-family-mono);
+
+}
+
+/* ========================================
+   Component Animations
+   Generated from semantic.animation in figma-tokens.json
+   Token name = keyframe name = class name (1:1)
+   ======================================== */
+
+@keyframes checkbox-enter {
+  from { opacity: 0; transform: scale(0.75); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-checkbox-enter {
+  animation: checkbox-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes radio-enter {
+  from { opacity: 0; transform: scale(0.5); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-radio-enter {
+  animation: radio-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.animate-fade-in {
+  animation: fade-in var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+.animate-fade-out {
+  animation: fade-out var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes modal-overlay-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.animate-modal-overlay-enter {
+  animation: modal-overlay-enter var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes modal-overlay-exit {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+.animate-modal-overlay-exit {
+  animation: modal-overlay-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes modal-content-enter {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.animate-modal-content-enter {
+  animation: modal-content-enter var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes modal-content-exit {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.95) translateY(8px); }
+}
+.animate-modal-content-exit {
+  animation: modal-content-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes nav-viewport-enter {
+  from { opacity: 0; transform: scale(0.98) translateY(-2px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.animate-nav-viewport-enter {
+  animation: nav-viewport-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes nav-viewport-exit {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.98) translateY(-2px); }
+}
+.animate-nav-viewport-exit {
+  animation: nav-viewport-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+.animate-accordion-down {
+  animation: accordion-down var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+.animate-accordion-up {
+  animation: accordion-up var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+.animate-collapsible-down {
+  animation: collapsible-down var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+.animate-collapsible-up {
+  animation: collapsible-up var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes drawer-right-enter {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.animate-drawer-right-enter {
+  animation: drawer-right-enter var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes drawer-right-exit {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+.animate-drawer-right-exit {
+  animation: drawer-right-exit var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes drawer-left-enter {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+.animate-drawer-left-enter {
+  animation: drawer-left-enter var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes drawer-left-exit {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+.animate-drawer-left-exit {
+  animation: drawer-left-exit var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes drawer-top-enter {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+.animate-drawer-top-enter {
+  animation: drawer-top-enter var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes drawer-top-exit {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+.animate-drawer-top-exit {
+  animation: drawer-top-exit var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes drawer-bottom-enter {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+.animate-drawer-bottom-enter {
+  animation: drawer-bottom-enter var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes drawer-bottom-exit {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+.animate-drawer-bottom-exit {
+  animation: drawer-bottom-exit var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes tooltip-top-enter {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-tooltip-top-enter {
+  animation: tooltip-top-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes tooltip-top-exit {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(4px); }
+}
+.animate-tooltip-top-exit {
+  animation: tooltip-top-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes tooltip-bottom-enter {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-tooltip-bottom-enter {
+  animation: tooltip-bottom-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes tooltip-bottom-exit {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); }
+}
+.animate-tooltip-bottom-exit {
+  animation: tooltip-bottom-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes tooltip-right-enter {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.animate-tooltip-right-enter {
+  animation: tooltip-right-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes tooltip-right-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-4px); }
+}
+.animate-tooltip-right-exit {
+  animation: tooltip-right-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes tooltip-left-enter {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.animate-tooltip-left-enter {
+  animation: tooltip-left-enter var(--duration-micro) var(--easing-ease-out);
+}
+
+@keyframes tooltip-left-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(4px); }
+}
+.animate-tooltip-left-exit {
+  animation: tooltip-left-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes popover-top-enter {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-popover-top-enter {
+  animation: popover-top-enter var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes popover-top-exit {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(4px); }
+}
+.animate-popover-top-exit {
+  animation: popover-top-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes popover-bottom-enter {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-popover-bottom-enter {
+  animation: popover-bottom-enter var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes popover-bottom-exit {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); }
+}
+.animate-popover-bottom-exit {
+  animation: popover-bottom-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes popover-right-enter {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.animate-popover-right-enter {
+  animation: popover-right-enter var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes popover-right-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-4px); }
+}
+.animate-popover-right-exit {
+  animation: popover-right-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes popover-left-enter {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.animate-popover-left-enter {
+  animation: popover-left-enter var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes popover-left-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(4px); }
+}
+.animate-popover-left-exit {
+  animation: popover-left-exit var(--duration-fast) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-in-right {
+  from { opacity: 0; transform: translateX(100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.animate-toast-slide-in-right {
+  animation: toast-slide-in-right var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-out-right {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(100%); }
+}
+.animate-toast-slide-out-right {
+  animation: toast-slide-out-right var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-in-left {
+  from { opacity: 0; transform: translateX(-100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.animate-toast-slide-in-left {
+  animation: toast-slide-in-left var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-out-left {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-100%); }
+}
+.animate-toast-slide-out-left {
+  animation: toast-slide-out-left var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-in-top {
+  from { opacity: 0; transform: translateY(-100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-toast-slide-in-top {
+  animation: toast-slide-in-top var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-out-top {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-100%); }
+}
+.animate-toast-slide-out-top {
+  animation: toast-slide-out-top var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-in-bottom {
+  from { opacity: 0; transform: translateY(100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-toast-slide-in-bottom {
+  animation: toast-slide-in-bottom var(--duration-slow) var(--easing-ease-out);
+}
+
+@keyframes toast-slide-out-bottom {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(100%); }
+}
+.animate-toast-slide-out-bottom {
+  animation: toast-slide-out-bottom var(--duration-normal) var(--easing-ease-out);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.animate-spin {
+  animation: spin var(--duration-spin) var(--easing-linear) infinite;
+}
+
+@keyframes progress-stripe {
+  from { background-position: 1rem 0; }
+  to { background-position: 0 0; }
+}
+.animate-progress-stripe {
+  animation: progress-stripe var(--duration-spin) var(--easing-linear) infinite;
+}
+
+@keyframes spinner-orbit {
+  from { transform: rotateY(0deg); }
+  to { transform: rotateY(360deg); }
+}
+.animate-spinner-orbit {
+  animation: spinner-orbit var(--duration-spin) var(--easing-linear) infinite;
+}
+
+@keyframes spinner-dot {
+  0%, 100% { opacity: 0.2; }
+  50% { opacity: 1; }
+}
+.animate-spinner-dot {
+  animation: spinner-dot var(--duration-spin) var(--easing-ease-in-out) infinite;
+}
+
+@keyframes spinner-bar {
+  0%, 100% { transform: scaleY(0.4); }
+  50% { transform: scaleY(1); }
+}
+.animate-spinner-bar {
+  animation: spinner-bar var(--duration-spin) var(--easing-ease-in-out) infinite;
+}
+
+@keyframes spinner-morph {
+  0%, 100% { border-radius: 50%; transform: rotateY(0deg) rotate(0deg); }
+  25% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotateY(90deg) rotate(90deg); }
+  50% { border-radius: 50%; transform: rotateY(180deg) rotate(180deg); }
+  75% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; transform: rotateY(270deg) rotate(270deg); }
+}
+.animate-spinner-morph {
+  animation: spinner-morph var(--duration-spin) var(--easing-ease-in-out) infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+.animate-skeleton-pulse {
+  animation: skeleton-pulse var(--duration-spin) var(--easing-ease-in-out) infinite;
+}
+
+@keyframes skeleton-wave {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+.animate-skeleton-wave {
+  animation: skeleton-wave var(--duration-spin) var(--easing-linear) infinite;
+}