@ariaui/tokens 0.1.0

package/dist/tokens.css

@@ -0,0 +1,937 @@
+:root {
+  /* Base colors */
+    --color-white: 100% 0 0;
+    --color-black: 0% 0 0;
+
+  /* Primitives — OKLCH channels sourced from Tailwind CSS v4 */
+    --color-zinc-50: 98.5% 0 0;
+    --color-zinc-100: 96.7% 0.001 285;
+    --color-zinc-200: 92% 0.004 286;
+    --color-zinc-300: 87.1% 0.006 286;
+    --color-zinc-400: 71.2% 0.013 286;
+    --color-zinc-500: 55.2% 0.014 286;
+    --color-zinc-600: 44.2% 0.015 286;
+    --color-zinc-700: 37% 0.012 286;
+    --color-zinc-800: 27.4% 0.006 286;
+    --color-zinc-900: 21% 0.006 286;
+    --color-zinc-950: 14.1% 0.004 286;
+    --color-neutral-50: 98.5% 0 0;
+    --color-neutral-100: 97% 0 0;
+    --color-neutral-200: 92.2% 0 0;
+    --color-neutral-300: 87% 0 0;
+    --color-neutral-400: 70.8% 0 0;
+    --color-neutral-500: 55.6% 0 0;
+    --color-neutral-600: 43.9% 0 0;
+    --color-neutral-700: 37.1% 0 0;
+    --color-neutral-800: 26.9% 0 0;
+    --color-neutral-900: 20.5% 0 0;
+    --color-neutral-950: 14.5% 0 0;
+    --color-violet-50: 96.9% 0.016 294;
+    --color-violet-100: 94.3% 0.029 295;
+    --color-violet-200: 89.4% 0.055 293;
+    --color-violet-300: 81.1% 0.101 294;
+    --color-violet-400: 70.9% 0.159 294;
+    --color-violet-500: 60.6% 0.219 293;
+    --color-violet-600: 54.1% 0.247 293;
+    --color-violet-700: 49.1% 0.241 293;
+    --color-violet-800: 43.2% 0.211 293;
+    --color-violet-900: 38% 0.178 294;
+    --color-violet-950: 28.3% 0.135 291;
+    --color-red-50: 97.1% 0.013 17;
+    --color-red-100: 93.6% 0.031 18;
+    --color-red-200: 88.5% 0.059 18;
+    --color-red-300: 80.8% 0.104 20;
+    --color-red-400: 71.1% 0.166 22;
+    --color-red-500: 63.7% 0.208 25;
+    --color-red-600: 57.7% 0.215 27;
+    --color-red-700: 50.5% 0.191 28;
+    --color-red-800: 44.4% 0.161 27;
+    --color-red-900: 39.6% 0.133 26;
+    --color-red-950: 25.8% 0.089 26;
+    --color-green-50: 98.2% 0.018 156;
+    --color-green-100: 96.2% 0.043 157;
+    --color-green-200: 92.5% 0.081 156;
+    --color-green-300: 87.1% 0.136 155;
+    --color-green-400: 80% 0.182 152;
+    --color-green-500: 72.3% 0.192 150;
+    --color-green-600: 62.7% 0.17 149;
+    --color-green-700: 52.7% 0.137 150;
+    --color-green-800: 44.8% 0.108 151;
+    --color-green-900: 39.3% 0.09 153;
+    --color-green-950: 26.6% 0.063 153;
+    --color-amber-50: 98.7% 0.021 95;
+    --color-amber-100: 96.2% 0.058 96;
+    --color-amber-200: 92.4% 0.115 96;
+    --color-amber-300: 87.9% 0.153 92;
+    --color-amber-400: 83.7% 0.164 84;
+    --color-amber-500: 76.9% 0.165 70;
+    --color-amber-600: 66.6% 0.157 58;
+    --color-amber-700: 55.5% 0.146 49;
+    --color-amber-800: 47.3% 0.125 46;
+    --color-amber-900: 41.4% 0.105 46;
+    --color-amber-950: 27.9% 0.074 46;
+    --color-brand-50: 96.9% 0.016 294;
+    --color-brand-100: 94.3% 0.029 295;
+    --color-brand-200: 89.4% 0.055 293;
+    --color-brand-300: 81.1% 0.101 294;
+    --color-brand-400: 70.9% 0.159 294;
+    --color-brand-500: 60.6% 0.219 293;
+    --color-brand-600: 54.1% 0.247 293;
+    --color-brand-700: 49.1% 0.241 293;
+    --color-brand-800: 43.2% 0.211 293;
+    --color-brand-900: 38% 0.178 294;
+    --color-brand-950: 28.3% 0.135 291;
+    --color-orange-50: 98% 0.016 74;
+    --color-orange-100: 95.4% 0.037 75;
+    --color-orange-200: 90.1% 0.073 71;
+    --color-orange-300: 83.7% 0.117 66;
+    --color-orange-400: 75.8% 0.159 56;
+    --color-orange-500: 70.5% 0.187 48;
+    --color-orange-600: 64.6% 0.194 41;
+    --color-orange-700: 55.3% 0.174 38;
+    --color-orange-800: 47% 0.143 37;
+    --color-orange-900: 40.8% 0.116 38;
+    --color-orange-950: 26.6% 0.076 36;
+    --color-yellow-50: 98.7% 0.026 102;
+    --color-yellow-100: 97.3% 0.069 103;
+    --color-yellow-200: 94.5% 0.124 102;
+    --color-yellow-300: 90.5% 0.166 98;
+    --color-yellow-400: 86.1% 0.173 92;
+    --color-yellow-500: 79.5% 0.162 86;
+    --color-yellow-600: 68.1% 0.142 76;
+    --color-yellow-700: 55.4% 0.121 66;
+    --color-yellow-800: 47.6% 0.103 62;
+    --color-yellow-900: 42.1% 0.09 58;
+    --color-yellow-950: 28.6% 0.064 54;
+    --color-lime-50: 98.6% 0.031 121;
+    --color-lime-100: 96.7% 0.066 122;
+    --color-lime-200: 93.8% 0.122 124;
+    --color-lime-300: 89.7% 0.179 127;
+    --color-lime-400: 84.9% 0.207 129;
+    --color-lime-500: 76.8% 0.204 131;
+    --color-lime-600: 64.8% 0.175 132;
+    --color-lime-700: 53.2% 0.141 132;
+    --color-lime-800: 45.3% 0.113 131;
+    --color-lime-900: 40.5% 0.096 131;
+    --color-lime-950: 27.4% 0.069 132;
+    --color-emerald-50: 97.9% 0.021 166;
+    --color-emerald-100: 95% 0.051 163;
+    --color-emerald-200: 90.5% 0.089 164;
+    --color-emerald-300: 84.5% 0.13 165;
+    --color-emerald-400: 77.3% 0.153 163;
+    --color-emerald-500: 69.6% 0.149 162;
+    --color-emerald-600: 59.6% 0.127 163;
+    --color-emerald-700: 50.8% 0.105 166;
+    --color-emerald-800: 43.2% 0.086 167;
+    --color-emerald-900: 37.8% 0.073 169;
+    --color-emerald-950: 26.2% 0.049 173;
+    --color-teal-50: 98.4% 0.014 181;
+    --color-teal-100: 95.3% 0.05 181;
+    --color-teal-200: 91% 0.093 180;
+    --color-teal-300: 85.5% 0.125 181;
+    --color-teal-400: 78.5% 0.133 182;
+    --color-teal-500: 70.4% 0.123 183;
+    --color-teal-600: 60% 0.104 185;
+    --color-teal-700: 51.1% 0.086 186;
+    --color-teal-800: 43.7% 0.071 188;
+    --color-teal-900: 38.6% 0.059 188;
+    --color-teal-950: 27.7% 0.045 193;
+    --color-cyan-50: 98.4% 0.019 201;
+    --color-cyan-100: 95.6% 0.044 203;
+    --color-cyan-200: 91.7% 0.077 205;
+    --color-cyan-300: 86.5% 0.115 207;
+    --color-cyan-400: 79.7% 0.134 212;
+    --color-cyan-500: 71.5% 0.126 215;
+    --color-cyan-600: 60.9% 0.111 222;
+    --color-cyan-700: 52% 0.094 223;
+    --color-cyan-800: 45% 0.077 224;
+    --color-cyan-900: 39.8% 0.066 227;
+    --color-cyan-950: 30.2% 0.054 230;
+    --color-sky-50: 97.7% 0.012 237;
+    --color-sky-100: 95.1% 0.025 237;
+    --color-sky-200: 90.1% 0.055 231;
+    --color-sky-300: 82.8% 0.101 230;
+    --color-sky-400: 75.4% 0.139 233;
+    --color-sky-500: 68.5% 0.148 237;
+    --color-sky-600: 58.8% 0.139 242;
+    --color-sky-700: 50% 0.119 243;
+    --color-sky-800: 44.3% 0.1 241;
+    --color-sky-900: 39.1% 0.085 241;
+    --color-sky-950: 29.3% 0.063 243;
+    --color-blue-50: 97% 0.014 255;
+    --color-blue-100: 93.2% 0.032 256;
+    --color-blue-200: 88.2% 0.057 254;
+    --color-blue-300: 80.9% 0.096 252;
+    --color-blue-400: 71.4% 0.143 255;
+    --color-blue-500: 62.3% 0.188 260;
+    --color-blue-600: 54.6% 0.215 263;
+    --color-blue-700: 48.8% 0.217 264;
+    --color-blue-800: 42.4% 0.181 266;
+    --color-blue-900: 37.9% 0.138 266;
+    --color-blue-950: 28.2% 0.087 268;
+    --color-indigo-50: 96.2% 0.018 272;
+    --color-indigo-100: 93% 0.033 273;
+    --color-indigo-200: 87% 0.062 274;
+    --color-indigo-300: 78.5% 0.104 275;
+    --color-indigo-400: 68% 0.158 277;
+    --color-indigo-500: 58.5% 0.204 277;
+    --color-indigo-600: 51.1% 0.23 277;
+    --color-indigo-700: 45.7% 0.215 277;
+    --color-indigo-800: 39.8% 0.177 277;
+    --color-indigo-900: 35.9% 0.135 279;
+    --color-indigo-950: 25.7% 0.086 281;
+    --color-purple-50: 97.7% 0.014 308;
+    --color-purple-100: 94.6% 0.033 307;
+    --color-purple-200: 90.2% 0.06 307;
+    --color-purple-300: 82.7% 0.108 306;
+    --color-purple-400: 72.2% 0.177 306;
+    --color-purple-500: 62.7% 0.233 304;
+    --color-purple-600: 55.8% 0.252 302;
+    --color-purple-700: 49.6% 0.237 302;
+    --color-purple-800: 43.8% 0.198 304;
+    --color-purple-900: 38.1% 0.166 305;
+    --color-purple-950: 29.1% 0.143 303;
+    --color-fuchsia-50: 97.7% 0.017 320;
+    --color-fuchsia-100: 95.2% 0.036 319;
+    --color-fuchsia-200: 90.3% 0.073 320;
+    --color-fuchsia-300: 83.3% 0.132 321;
+    --color-fuchsia-400: 74.8% 0.207 322;
+    --color-fuchsia-500: 66.7% 0.259 322;
+    --color-fuchsia-600: 59.1% 0.257 323;
+    --color-fuchsia-700: 51.8% 0.226 324;
+    --color-fuchsia-800: 45.2% 0.192 325;
+    --color-fuchsia-900: 40.1% 0.16 326;
+    --color-fuchsia-950: 29.3% 0.131 326;
+    --color-pink-50: 97.1% 0.014 343;
+    --color-pink-100: 94.8% 0.028 342;
+    --color-pink-200: 89.9% 0.059 343;
+    --color-pink-300: 82.3% 0.11 346;
+    --color-pink-400: 72.5% 0.175 350;
+    --color-pink-500: 65.6% 0.212 354;
+    --color-pink-600: 59.2% 0.218 1;
+    --color-pink-700: 52.5% 0.199 4;
+    --color-pink-800: 45.9% 0.17 4;
+    --color-pink-900: 40.8% 0.144 2;
+    --color-pink-950: 28.4% 0.105 4;
+    --color-rose-50: 96.9% 0.015 12;
+    --color-rose-100: 94.1% 0.03 13;
+    --color-rose-200: 89.2% 0.056 10;
+    --color-rose-300: 81% 0.106 12;
+    --color-rose-400: 71.9% 0.169 13;
+    --color-rose-500: 64.5% 0.215 16;
+    --color-rose-600: 58.6% 0.222 18;
+    --color-rose-700: 51.4% 0.198 17;
+    --color-rose-800: 45.5% 0.171 14;
+    --color-rose-900: 41% 0.15 10;
+    --color-rose-950: 27.1% 0.101 12;
+    --color-slate-50: 98.4% 0.003 248;
+    --color-slate-100: 96.8% 0.007 248;
+    --color-slate-200: 92.9% 0.013 256;
+    --color-slate-300: 86.9% 0.02 253;
+    --color-slate-400: 71.1% 0.035 257;
+    --color-slate-500: 55.4% 0.041 257;
+    --color-slate-600: 44.6% 0.037 257;
+    --color-slate-700: 37.2% 0.039 257;
+    --color-slate-800: 27.9% 0.037 260;
+    --color-slate-900: 20.8% 0.04 266;
+    --color-slate-950: 12.9% 0.041 265;
+    --color-gray-50: 98.5% 0.002 248;
+    --color-gray-100: 96.7% 0.003 265;
+    --color-gray-200: 92.8% 0.006 265;
+    --color-gray-300: 87.2% 0.009 258;
+    --color-gray-400: 71.4% 0.019 261;
+    --color-gray-500: 55.1% 0.023 264;
+    --color-gray-600: 44.6% 0.026 257;
+    --color-gray-700: 37.3% 0.031 260;
+    --color-gray-800: 27.8% 0.03 257;
+    --color-gray-900: 21% 0.032 265;
+    --color-gray-950: 13% 0.027 262;
+    --color-stone-50: 98.5% 0.001 106;
+    --color-stone-100: 97% 0.001 106;
+    --color-stone-200: 92.3% 0.003 49;
+    --color-stone-300: 86.9% 0.004 56;
+    --color-stone-400: 71.6% 0.009 56;
+    --color-stone-500: 55.3% 0.012 58;
+    --color-stone-600: 44.4% 0.01 74;
+    --color-stone-700: 37.4% 0.009 68;
+    --color-stone-800: 26.8% 0.006 34;
+    --color-stone-900: 21.6% 0.006 56;
+    --color-stone-950: 14.7% 0.004 49;
+    --color-taupe-50: 98.6% 0.002 68;
+    --color-taupe-100: 96% 0.002 17;
+    --color-taupe-200: 92.2% 0.005 34;
+    --color-taupe-300: 86.8% 0.007 39;
+    --color-taupe-400: 71.4% 0.014 41;
+    --color-taupe-500: 54.7% 0.021 43;
+    --color-taupe-600: 43.8% 0.017 39;
+    --color-taupe-700: 36.7% 0.016 36;
+    --color-taupe-800: 26.8% 0.011 36;
+    --color-taupe-900: 21.4% 0.009 43;
+    --color-taupe-950: 14.7% 0.004 49;
+    --color-mauve-50: 98.5% 0 90;
+    --color-mauve-100: 96% 0.003 326;
+    --color-mauve-200: 92.2% 0.005 326;
+    --color-mauve-300: 86.5% 0.012 326;
+    --color-mauve-400: 71.1% 0.019 323;
+    --color-mauve-500: 54.2% 0.034 323;
+    --color-mauve-600: 43.5% 0.029 322;
+    --color-mauve-700: 36.4% 0.029 324;
+    --color-mauve-800: 26.3% 0.024 320;
+    --color-mauve-900: 21.2% 0.019 322;
+    --color-mauve-950: 14.5% 0.008 326;
+    --color-mist-50: 98.7% 0.002 197;
+    --color-mist-100: 96.3% 0.002 197;
+    --color-mist-200: 92.5% 0.005 214;
+    --color-mist-300: 87.2% 0.007 220;
+    --color-mist-400: 72.3% 0.014 214;
+    --color-mist-500: 56% 0.021 214;
+    --color-mist-600: 45% 0.017 213;
+    --color-mist-700: 37.8% 0.015 216;
+    --color-mist-800: 27.5% 0.011 217;
+    --color-mist-900: 21.8% 0.008 224;
+    --color-mist-950: 14.8% 0.004 229;
+    --color-olive-50: 98.8% 0.003 106;
+    --color-olive-100: 96.6% 0.005 106;
+    --color-olive-200: 93% 0.007 107;
+    --color-olive-300: 88% 0.011 107;
+    --color-olive-400: 73.7% 0.021 107;
+    --color-olive-500: 58% 0.031 107;
+    --color-olive-600: 46.6% 0.025 107;
+    --color-olive-700: 39.4% 0.023 107;
+    --color-olive-800: 28.6% 0.016 107;
+    --color-olive-900: 22.8% 0.013 107;
+    --color-olive-950: 15.3% 0.006 107;
+
+  /* Semantic aliases — light mode */
+    --bg-primary: var(--color-white);
+    --bg-primary_alt: var(--color-white);
+    --bg-primary_hover: var(--color-neutral-50);
+    --bg-primary-solid: var(--color-neutral-950);
+    --bg-secondary: var(--color-neutral-50);
+    --bg-secondary_alt: var(--color-neutral-50);
+    --bg-secondary_hover: var(--color-neutral-100);
+    --bg-secondary_subtle: var(--color-white);
+    --bg-secondary-solid: var(--color-neutral-600);
+    --bg-tertiary: var(--color-neutral-100);
+    --bg-quaternary: var(--color-neutral-200);
+    --bg-active: var(--color-neutral-50);
+    --bg-disabled: var(--color-neutral-100);
+    --bg-overlay: var(--color-neutral-950);
+    --bg-brand-primary: var(--color-brand-50);
+    --bg-brand-primary_alt: var(--color-brand-50);
+    --bg-brand-secondary: var(--color-brand-100);
+    --bg-brand-solid: var(--color-brand-600);
+    --bg-brand-solid_hover: var(--color-brand-700);
+    --bg-brand-section: var(--color-brand-800);
+    --bg-brand-section_subtle: var(--color-brand-700);
+    --bg-error-primary: var(--color-red-50);
+    --bg-error-secondary: var(--color-red-100);
+    --bg-error-solid: var(--color-red-600);
+    --bg-error-solid_hover: var(--color-red-700);
+    --bg-warning-primary: var(--color-amber-50);
+    --bg-warning-secondary: var(--color-amber-100);
+    --bg-warning-solid: var(--color-amber-600);
+    --bg-success-primary: var(--color-green-50);
+    --bg-success-secondary: var(--color-green-100);
+    --bg-success-solid: var(--color-green-600);
+    --text-primary: var(--color-neutral-950);
+    --text-primary_on-brand: var(--color-white);
+    --text-secondary: var(--color-neutral-700);
+    --text-secondary_hover: var(--color-neutral-800);
+    --text-secondary_on-brand: var(--color-brand-200);
+    --text-tertiary: var(--color-neutral-600);
+    --text-tertiary_hover: var(--color-neutral-700);
+    --text-tertiary_on-brand: var(--color-brand-200);
+    --text-quaternary: var(--color-neutral-500);
+    --text-quaternary_on-brand: var(--color-brand-300);
+    --text-white: var(--color-white);
+    --text-disabled: var(--color-neutral-500);
+    --text-placeholder: var(--color-neutral-500);
+    --text-placeholder_subtle: var(--color-neutral-300);
+    --text-brand-primary: var(--color-brand-600);
+    --text-brand-secondary: var(--color-brand-700);
+    --text-brand-secondary_hover: var(--color-brand-800);
+    --text-brand-tertiary: var(--color-brand-600);
+    --text-brand-tertiary_alt: var(--color-brand-600);
+    --text-error-primary: var(--color-red-600);
+    --text-warning-primary: var(--color-amber-600);
+    --text-success-primary: var(--color-green-600);
+    --fg-primary: var(--color-neutral-900);
+    --fg-secondary: var(--color-neutral-700);
+    --fg-secondary_hover: var(--color-neutral-800);
+    --fg-tertiary: var(--color-neutral-600);
+    --fg-tertiary_hover: var(--color-neutral-700);
+    --fg-quaternary: var(--color-neutral-400);
+    --fg-quaternary_hover: var(--color-neutral-500);
+    --fg-white: var(--color-white);
+    --fg-disabled: var(--color-neutral-400);
+    --fg-disabled_subtle: var(--color-neutral-300);
+    --fg-brand-primary: var(--color-brand-600);
+    --fg-brand-primary_alt: var(--color-brand-600);
+    --fg-brand-secondary: var(--color-brand-500);
+    --fg-brand-secondary_alt: var(--color-brand-500);
+    --fg-error-primary: var(--color-red-600);
+    --fg-error-secondary: var(--color-red-500);
+    --fg-warning-primary: var(--color-amber-600);
+    --fg-warning-secondary: var(--color-amber-500);
+    --fg-success-primary: var(--color-green-600);
+    --fg-success-secondary: var(--color-green-500);
+    --border-primary: var(--color-neutral-300);
+    --border-secondary: var(--color-neutral-200);
+    --border-secondary_alt: var(--color-black);
+    --border-tertiary: var(--color-neutral-100);
+    --border-disabled: var(--color-neutral-300);
+    --border-disabled_subtle: var(--color-neutral-200);
+    --border-brand: var(--color-brand-600);
+    --border-brand_alt: var(--color-brand-600);
+    --border-error: var(--color-red-500);
+    --border-error_subtle: var(--color-red-300);
+    --border-success: var(--color-green-600);
+    --border-warning: var(--color-amber-600);
+    --gradient-neutral-600-500-90: linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%);
+    --gradient-neutral-700-600-45: linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-800-600-45: linear-gradient(45deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-800-600-90: linear-gradient(90deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-800-700-26_5: linear-gradient(26.5deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-700)) 100%);
+    --gradient-neutral-900-600-45: linear-gradient(45deg, oklch(var(--color-neutral-900)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-900-700-45: linear-gradient(45deg, oklch(var(--color-neutral-900)) 0%, oklch(var(--color-neutral-700)) 100%);
+    --gradient-neutral-50-white-180: linear-gradient(180deg, oklch(var(--color-neutral-50)) 0%, oklch(var(--color-white)) 100%);
+    --gradient-neutral-100-white-180: linear-gradient(180deg, oklch(var(--color-neutral-100)) 0%, oklch(var(--color-white)) 100%);
+    --gradient-neutral-100-50-180: linear-gradient(180deg, oklch(var(--color-neutral-100)) 0%, oklch(var(--color-neutral-50)) 100%);
+    --gradient-neutral-200-50-180: linear-gradient(180deg, oklch(var(--color-neutral-200)) 0%, oklch(var(--color-neutral-50)) 100%);
+    --gradient-neutral-200-100-180: linear-gradient(180deg, oklch(var(--color-neutral-200)) 0%, oklch(var(--color-neutral-100)) 100%);
+    --gradient-neutral-white-50-180: linear-gradient(180deg, oklch(var(--color-white)) 0%, oklch(var(--color-neutral-50)) 100%);
+    --gradient-neutral-50-100-180: linear-gradient(180deg, oklch(var(--color-neutral-50)) 0%, oklch(var(--color-neutral-100)) 100%);
+    --gradient-brand-600-500-90: linear-gradient(90deg, oklch(var(--color-brand-600)) 0%, oklch(var(--color-brand-500)) 100%);
+    --gradient-brand-700-600-45: linear-gradient(45deg, oklch(var(--color-brand-700)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-800-600-45: linear-gradient(45deg, oklch(var(--color-brand-800)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-800-600-90: linear-gradient(90deg, oklch(var(--color-brand-800)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-800-700-26_5: linear-gradient(26.5deg, oklch(var(--color-brand-800)) 0%, oklch(var(--color-brand-700)) 100%);
+    --gradient-brand-900-600-45: linear-gradient(45deg, oklch(var(--color-brand-900)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-900-700-45: linear-gradient(45deg, oklch(var(--color-brand-900)) 0%, oklch(var(--color-brand-700)) 100%);
+    --utility-neutral-50: var(--color-neutral-50);
+    --utility-neutral-100: var(--color-neutral-100);
+    --utility-neutral-200: var(--color-neutral-200);
+    --utility-neutral-300: var(--color-neutral-300);
+    --utility-neutral-400: var(--color-neutral-400);
+    --utility-neutral-500: var(--color-neutral-500);
+    --utility-neutral-600: var(--color-neutral-600);
+    --utility-neutral-700: var(--color-neutral-700);
+    --utility-neutral-800: var(--color-neutral-800);
+    --utility-neutral-900: var(--color-neutral-900);
+    --utility-brand-50: var(--color-brand-50);
+    --utility-brand-100: var(--color-brand-100);
+    --utility-brand-200: var(--color-brand-200);
+    --utility-brand-300: var(--color-brand-300);
+    --utility-brand-400: var(--color-brand-400);
+    --utility-brand-500: var(--color-brand-500);
+    --utility-brand-600: var(--color-brand-600);
+    --utility-brand-700: var(--color-brand-700);
+    --utility-brand-800: var(--color-brand-800);
+    --utility-brand-900: var(--color-brand-900);
+    --utility-red-50: var(--color-red-50);
+    --utility-red-100: var(--color-red-100);
+    --utility-red-200: var(--color-red-200);
+    --utility-red-300: var(--color-red-300);
+    --utility-red-400: var(--color-red-400);
+    --utility-red-500: var(--color-red-500);
+    --utility-red-600: var(--color-red-600);
+    --utility-red-700: var(--color-red-700);
+    --utility-yellow-50: var(--color-yellow-50);
+    --utility-yellow-100: var(--color-yellow-100);
+    --utility-yellow-200: var(--color-yellow-200);
+    --utility-yellow-300: var(--color-yellow-300);
+    --utility-yellow-400: var(--color-yellow-400);
+    --utility-yellow-500: var(--color-yellow-500);
+    --utility-yellow-600: var(--color-yellow-600);
+    --utility-yellow-700: var(--color-yellow-700);
+    --utility-green-50: var(--color-green-50);
+    --utility-green-100: var(--color-green-100);
+    --utility-green-200: var(--color-green-200);
+    --utility-green-300: var(--color-green-300);
+    --utility-green-400: var(--color-green-400);
+    --utility-green-500: var(--color-green-500);
+    --utility-green-600: var(--color-green-600);
+    --utility-green-700: var(--color-green-700);
+    --utility-orange-50: var(--color-orange-50);
+    --utility-orange-100: var(--color-orange-100);
+    --utility-orange-200: var(--color-orange-200);
+    --utility-orange-300: var(--color-orange-300);
+    --utility-orange-400: var(--color-orange-400);
+    --utility-orange-500: var(--color-orange-500);
+    --utility-orange-600: var(--color-orange-600);
+    --utility-orange-700: var(--color-orange-700);
+    --utility-sky-50: var(--color-sky-50);
+    --utility-sky-100: var(--color-sky-100);
+    --utility-sky-200: var(--color-sky-200);
+    --utility-sky-300: var(--color-sky-300);
+    --utility-sky-400: var(--color-sky-400);
+    --utility-sky-500: var(--color-sky-500);
+    --utility-sky-600: var(--color-sky-600);
+    --utility-sky-700: var(--color-sky-700);
+    --utility-blue-50: var(--color-blue-50);
+    --utility-blue-100: var(--color-blue-100);
+    --utility-blue-200: var(--color-blue-200);
+    --utility-blue-300: var(--color-blue-300);
+    --utility-blue-400: var(--color-blue-400);
+    --utility-blue-500: var(--color-blue-500);
+    --utility-blue-600: var(--color-blue-600);
+    --utility-blue-700: var(--color-blue-700);
+    --utility-indigo-50: var(--color-indigo-50);
+    --utility-indigo-100: var(--color-indigo-100);
+    --utility-indigo-200: var(--color-indigo-200);
+    --utility-indigo-300: var(--color-indigo-300);
+    --utility-indigo-400: var(--color-indigo-400);
+    --utility-indigo-500: var(--color-indigo-500);
+    --utility-indigo-600: var(--color-indigo-600);
+    --utility-indigo-700: var(--color-indigo-700);
+    --utility-purple-50: var(--color-purple-50);
+    --utility-purple-100: var(--color-purple-100);
+    --utility-purple-200: var(--color-purple-200);
+    --utility-purple-300: var(--color-purple-300);
+    --utility-purple-400: var(--color-purple-400);
+    --utility-purple-500: var(--color-purple-500);
+    --utility-purple-600: var(--color-purple-600);
+    --utility-purple-700: var(--color-purple-700);
+    --utility-fuchsia-50: var(--color-fuchsia-50);
+    --utility-fuchsia-100: var(--color-fuchsia-100);
+    --utility-fuchsia-200: var(--color-fuchsia-200);
+    --utility-fuchsia-300: var(--color-fuchsia-300);
+    --utility-fuchsia-400: var(--color-fuchsia-400);
+    --utility-fuchsia-500: var(--color-fuchsia-500);
+    --utility-fuchsia-600: var(--color-fuchsia-600);
+    --utility-fuchsia-700: var(--color-fuchsia-700);
+    --utility-pink-50: var(--color-pink-50);
+    --utility-pink-100: var(--color-pink-100);
+    --utility-pink-200: var(--color-pink-200);
+    --utility-pink-300: var(--color-pink-300);
+    --utility-pink-400: var(--color-pink-400);
+    --utility-pink-500: var(--color-pink-500);
+    --utility-pink-600: var(--color-pink-600);
+    --utility-pink-700: var(--color-pink-700);
+    --utility-slate-50: var(--color-slate-50);
+    --utility-slate-100: var(--color-slate-100);
+    --utility-slate-200: var(--color-slate-200);
+    --utility-slate-300: var(--color-slate-300);
+    --utility-slate-400: var(--color-slate-400);
+    --utility-slate-500: var(--color-slate-500);
+    --utility-slate-600: var(--color-slate-600);
+    --utility-slate-700: var(--color-slate-700);
+    --alpha-white-10: oklch(var(--color-white) / 0.1);
+    --alpha-white-20: oklch(var(--color-white) / 0.2);
+    --alpha-white-30: oklch(var(--color-white) / 0.3);
+    --alpha-white-40: oklch(var(--color-white) / 0.4);
+    --alpha-white-50: oklch(var(--color-white) / 0.5);
+    --alpha-white-60: oklch(var(--color-white) / 0.6);
+    --alpha-white-70: oklch(var(--color-white) / 0.7);
+    --alpha-white-80: oklch(var(--color-white) / 0.8);
+    --alpha-white-90: oklch(var(--color-white) / 0.9);
+    --alpha-white-100: oklch(var(--color-white) / 1);
+    --alpha-black-10: oklch(var(--color-black) / 0.1);
+    --alpha-black-20: oklch(var(--color-black) / 0.2);
+    --alpha-black-30: oklch(var(--color-black) / 0.3);
+    --alpha-black-40: oklch(var(--color-black) / 0.4);
+    --alpha-black-50: oklch(var(--color-black) / 0.5);
+    --alpha-black-60: oklch(var(--color-black) / 0.6);
+    --alpha-black-70: oklch(var(--color-black) / 0.7);
+    --alpha-black-80: oklch(var(--color-black) / 0.8);
+    --alpha-black-90: oklch(var(--color-black) / 0.9);
+    --alpha-black-100: oklch(var(--color-black) / 1);
+    --container-padding-mobile: 1rem;
+    --container-padding-desktop: 2rem;
+    --container-max-width-desktop: 80rem;
+    --paragraph-max-width: 45rem;
+    --radius-none: 0px;
+    --radius-xxs: 2px;
+    --radius-xs: 4px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-2xl: 16px;
+    --radius-3xl: 20px;
+    --radius-4xl: 24px;
+    --radius-full: 9999px;
+    --radius: 8px;
+    --ring-width: 2px;
+    --ring-offset: 2px;
+}
+
+.dark {
+  /* Semantic aliases — dark mode overrides */
+    --bg-primary: var(--color-neutral-950);
+    --bg-primary_alt: var(--color-neutral-950);
+    --bg-primary_hover: var(--color-neutral-900);
+    --bg-primary-solid: var(--color-white);
+    --bg-secondary: var(--color-neutral-900);
+    --bg-secondary_alt: var(--color-neutral-900);
+    --bg-secondary_hover: var(--color-neutral-800);
+    --bg-secondary_subtle: var(--color-neutral-950);
+    --bg-secondary-solid: var(--color-neutral-500);
+    --bg-tertiary: var(--color-neutral-800);
+    --bg-quaternary: var(--color-neutral-700);
+    --bg-active: var(--color-neutral-800);
+    --bg-disabled: var(--color-neutral-800);
+    --bg-overlay: var(--color-neutral-950);
+    --bg-brand-primary: var(--color-brand-950);
+    --bg-brand-primary_alt: var(--color-brand-950);
+    --bg-brand-secondary: var(--color-brand-900);
+    --bg-brand-solid: var(--color-brand-400);
+    --bg-brand-solid_hover: var(--color-brand-300);
+    --bg-brand-section: var(--color-brand-950);
+    --bg-brand-section_subtle: var(--color-brand-900);
+    --bg-error-primary: var(--color-red-950);
+    --bg-error-secondary: var(--color-red-900);
+    --bg-error-solid: var(--color-red-600);
+    --bg-error-solid_hover: var(--color-red-500);
+    --bg-warning-primary: var(--color-amber-950);
+    --bg-warning-secondary: var(--color-amber-900);
+    --bg-warning-solid: var(--color-amber-600);
+    --bg-success-primary: var(--color-green-950);
+    --bg-success-secondary: var(--color-green-900);
+    --bg-success-solid: var(--color-green-600);
+    --text-primary: var(--color-neutral-50);
+    --text-primary_on-brand: var(--color-white);
+    --text-secondary: var(--color-neutral-300);
+    --text-secondary_hover: var(--color-neutral-100);
+    --text-secondary_on-brand: var(--color-brand-300);
+    --text-tertiary: var(--color-neutral-400);
+    --text-tertiary_hover: var(--color-neutral-300);
+    --text-tertiary_on-brand: var(--color-brand-300);
+    --text-quaternary: var(--color-neutral-500);
+    --text-quaternary_on-brand: var(--color-brand-400);
+    --text-white: var(--color-white);
+    --text-disabled: var(--color-neutral-500);
+    --text-placeholder: var(--color-neutral-500);
+    --text-placeholder_subtle: var(--color-neutral-700);
+    --text-brand-primary: var(--color-brand-600);
+    --text-brand-secondary: var(--color-brand-200);
+    --text-brand-secondary_hover: var(--color-brand-100);
+    --text-brand-tertiary: var(--color-brand-400);
+    --text-brand-tertiary_alt: var(--color-brand-400);
+    --text-error-primary: var(--color-red-200);
+    --text-warning-primary: var(--color-amber-200);
+    --text-success-primary: var(--color-green-200);
+    --fg-primary: var(--color-neutral-50);
+    --fg-secondary: var(--color-neutral-300);
+    --fg-secondary_hover: var(--color-neutral-100);
+    --fg-tertiary: var(--color-neutral-400);
+    --fg-tertiary_hover: var(--color-neutral-300);
+    --fg-quaternary: var(--color-neutral-500);
+    --fg-quaternary_hover: var(--color-neutral-400);
+    --fg-white: var(--color-white);
+    --fg-disabled: var(--color-neutral-600);
+    --fg-disabled_subtle: var(--color-neutral-700);
+    --fg-brand-primary: var(--color-brand-400);
+    --fg-brand-primary_alt: var(--color-brand-400);
+    --fg-brand-secondary: var(--color-brand-300);
+    --fg-brand-secondary_alt: var(--color-brand-300);
+    --fg-error-primary: var(--color-red-400);
+    --fg-error-secondary: var(--color-red-300);
+    --fg-warning-primary: var(--color-amber-400);
+    --fg-warning-secondary: var(--color-amber-300);
+    --fg-success-primary: var(--color-green-400);
+    --fg-success-secondary: var(--color-green-300);
+    --border-primary: var(--color-neutral-800);
+    --border-secondary: var(--color-neutral-900);
+    --border-secondary_alt: var(--color-white);
+    --border-tertiary: var(--color-neutral-950);
+    --border-disabled: var(--color-neutral-800);
+    --border-disabled_subtle: var(--color-neutral-900);
+    --border-brand: var(--color-brand-600);
+    --border-brand_alt: var(--color-brand-500);
+    --border-error: var(--color-red-400);
+    --border-error_subtle: var(--color-red-800);
+    --border-success: var(--color-green-400);
+    --border-warning: var(--color-amber-400);
+    --gradient-neutral-600-500-90: linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%);
+    --gradient-neutral-700-600-45: linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-800-600-45: linear-gradient(45deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-800-600-90: linear-gradient(90deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-800-700-26_5: linear-gradient(26.5deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-700)) 100%);
+    --gradient-neutral-900-600-45: linear-gradient(45deg, oklch(var(--color-neutral-900)) 0%, oklch(var(--color-neutral-600)) 100%);
+    --gradient-neutral-900-700-45: linear-gradient(45deg, oklch(var(--color-neutral-900)) 0%, oklch(var(--color-neutral-700)) 100%);
+    --gradient-neutral-50-white-180: linear-gradient(180deg, oklch(var(--color-neutral-50)) 0%, oklch(var(--color-white)) 100%);
+    --gradient-neutral-100-white-180: linear-gradient(180deg, oklch(var(--color-neutral-100)) 0%, oklch(var(--color-white)) 100%);
+    --gradient-neutral-100-50-180: linear-gradient(180deg, oklch(var(--color-neutral-100)) 0%, oklch(var(--color-neutral-50)) 100%);
+    --gradient-neutral-200-50-180: linear-gradient(180deg, oklch(var(--color-neutral-200)) 0%, oklch(var(--color-neutral-50)) 100%);
+    --gradient-neutral-200-100-180: linear-gradient(180deg, oklch(var(--color-neutral-200)) 0%, oklch(var(--color-neutral-100)) 100%);
+    --gradient-neutral-white-50-180: linear-gradient(180deg, oklch(var(--color-white)) 0%, oklch(var(--color-neutral-50)) 100%);
+    --gradient-neutral-50-100-180: linear-gradient(180deg, oklch(var(--color-neutral-50)) 0%, oklch(var(--color-neutral-100)) 100%);
+    --gradient-brand-600-500-90: linear-gradient(90deg, oklch(var(--color-brand-600)) 0%, oklch(var(--color-brand-500)) 100%);
+    --gradient-brand-700-600-45: linear-gradient(45deg, oklch(var(--color-brand-700)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-800-600-45: linear-gradient(45deg, oklch(var(--color-brand-800)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-800-600-90: linear-gradient(90deg, oklch(var(--color-brand-800)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-800-700-26_5: linear-gradient(26.5deg, oklch(var(--color-brand-800)) 0%, oklch(var(--color-brand-700)) 100%);
+    --gradient-brand-900-600-45: linear-gradient(45deg, oklch(var(--color-brand-900)) 0%, oklch(var(--color-brand-600)) 100%);
+    --gradient-brand-900-700-45: linear-gradient(45deg, oklch(var(--color-brand-900)) 0%, oklch(var(--color-brand-700)) 100%);
+    --utility-neutral-50: var(--color-neutral-50);
+    --utility-neutral-100: var(--color-neutral-100);
+    --utility-neutral-200: var(--color-neutral-200);
+    --utility-neutral-300: var(--color-neutral-300);
+    --utility-neutral-400: var(--color-neutral-400);
+    --utility-neutral-500: var(--color-neutral-500);
+    --utility-neutral-600: var(--color-neutral-600);
+    --utility-neutral-700: var(--color-neutral-700);
+    --utility-neutral-800: var(--color-neutral-800);
+    --utility-neutral-900: var(--color-neutral-900);
+    --utility-brand-50: var(--color-brand-50);
+    --utility-brand-100: var(--color-brand-100);
+    --utility-brand-200: var(--color-brand-200);
+    --utility-brand-300: var(--color-brand-300);
+    --utility-brand-400: var(--color-brand-400);
+    --utility-brand-500: var(--color-brand-500);
+    --utility-brand-600: var(--color-brand-600);
+    --utility-brand-700: var(--color-brand-700);
+    --utility-brand-800: var(--color-brand-800);
+    --utility-brand-900: var(--color-brand-900);
+    --utility-red-50: var(--color-red-50);
+    --utility-red-100: var(--color-red-100);
+    --utility-red-200: var(--color-red-200);
+    --utility-red-300: var(--color-red-300);
+    --utility-red-400: var(--color-red-400);
+    --utility-red-500: var(--color-red-500);
+    --utility-red-600: var(--color-red-600);
+    --utility-red-700: var(--color-red-700);
+    --utility-yellow-50: var(--color-yellow-50);
+    --utility-yellow-100: var(--color-yellow-100);
+    --utility-yellow-200: var(--color-yellow-200);
+    --utility-yellow-300: var(--color-yellow-300);
+    --utility-yellow-400: var(--color-yellow-400);
+    --utility-yellow-500: var(--color-yellow-500);
+    --utility-yellow-600: var(--color-yellow-600);
+    --utility-yellow-700: var(--color-yellow-700);
+    --utility-green-50: var(--color-green-50);
+    --utility-green-100: var(--color-green-100);
+    --utility-green-200: var(--color-green-200);
+    --utility-green-300: var(--color-green-300);
+    --utility-green-400: var(--color-green-400);
+    --utility-green-500: var(--color-green-500);
+    --utility-green-600: var(--color-green-600);
+    --utility-green-700: var(--color-green-700);
+    --utility-orange-50: var(--color-orange-50);
+    --utility-orange-100: var(--color-orange-100);
+    --utility-orange-200: var(--color-orange-200);
+    --utility-orange-300: var(--color-orange-300);
+    --utility-orange-400: var(--color-orange-400);
+    --utility-orange-500: var(--color-orange-500);
+    --utility-orange-600: var(--color-orange-600);
+    --utility-orange-700: var(--color-orange-700);
+    --utility-sky-50: var(--color-sky-50);
+    --utility-sky-100: var(--color-sky-100);
+    --utility-sky-200: var(--color-sky-200);
+    --utility-sky-300: var(--color-sky-300);
+    --utility-sky-400: var(--color-sky-400);
+    --utility-sky-500: var(--color-sky-500);
+    --utility-sky-600: var(--color-sky-600);
+    --utility-sky-700: var(--color-sky-700);
+    --utility-blue-50: var(--color-blue-50);
+    --utility-blue-100: var(--color-blue-100);
+    --utility-blue-200: var(--color-blue-200);
+    --utility-blue-300: var(--color-blue-300);
+    --utility-blue-400: var(--color-blue-400);
+    --utility-blue-500: var(--color-blue-500);
+    --utility-blue-600: var(--color-blue-600);
+    --utility-blue-700: var(--color-blue-700);
+    --utility-indigo-50: var(--color-indigo-50);
+    --utility-indigo-100: var(--color-indigo-100);
+    --utility-indigo-200: var(--color-indigo-200);
+    --utility-indigo-300: var(--color-indigo-300);
+    --utility-indigo-400: var(--color-indigo-400);
+    --utility-indigo-500: var(--color-indigo-500);
+    --utility-indigo-600: var(--color-indigo-600);
+    --utility-indigo-700: var(--color-indigo-700);
+    --utility-purple-50: var(--color-purple-50);
+    --utility-purple-100: var(--color-purple-100);
+    --utility-purple-200: var(--color-purple-200);
+    --utility-purple-300: var(--color-purple-300);
+    --utility-purple-400: var(--color-purple-400);
+    --utility-purple-500: var(--color-purple-500);
+    --utility-purple-600: var(--color-purple-600);
+    --utility-purple-700: var(--color-purple-700);
+    --utility-fuchsia-50: var(--color-fuchsia-50);
+    --utility-fuchsia-100: var(--color-fuchsia-100);
+    --utility-fuchsia-200: var(--color-fuchsia-200);
+    --utility-fuchsia-300: var(--color-fuchsia-300);
+    --utility-fuchsia-400: var(--color-fuchsia-400);
+    --utility-fuchsia-500: var(--color-fuchsia-500);
+    --utility-fuchsia-600: var(--color-fuchsia-600);
+    --utility-fuchsia-700: var(--color-fuchsia-700);
+    --utility-pink-50: var(--color-pink-50);
+    --utility-pink-100: var(--color-pink-100);
+    --utility-pink-200: var(--color-pink-200);
+    --utility-pink-300: var(--color-pink-300);
+    --utility-pink-400: var(--color-pink-400);
+    --utility-pink-500: var(--color-pink-500);
+    --utility-pink-600: var(--color-pink-600);
+    --utility-pink-700: var(--color-pink-700);
+    --utility-slate-50: var(--color-slate-50);
+    --utility-slate-100: var(--color-slate-100);
+    --utility-slate-200: var(--color-slate-200);
+    --utility-slate-300: var(--color-slate-300);
+    --utility-slate-400: var(--color-slate-400);
+    --utility-slate-500: var(--color-slate-500);
+    --utility-slate-600: var(--color-slate-600);
+    --utility-slate-700: var(--color-slate-700);
+    --alpha-white-10: oklch(var(--color-white) / 0.1);
+    --alpha-white-20: oklch(var(--color-white) / 0.2);
+    --alpha-white-30: oklch(var(--color-white) / 0.3);
+    --alpha-white-40: oklch(var(--color-white) / 0.4);
+    --alpha-white-50: oklch(var(--color-white) / 0.5);
+    --alpha-white-60: oklch(var(--color-white) / 0.6);
+    --alpha-white-70: oklch(var(--color-white) / 0.7);
+    --alpha-white-80: oklch(var(--color-white) / 0.8);
+    --alpha-white-90: oklch(var(--color-white) / 0.9);
+    --alpha-white-100: oklch(var(--color-white) / 1);
+    --alpha-black-10: oklch(var(--color-black) / 0.1);
+    --alpha-black-20: oklch(var(--color-black) / 0.2);
+    --alpha-black-30: oklch(var(--color-black) / 0.3);
+    --alpha-black-40: oklch(var(--color-black) / 0.4);
+    --alpha-black-50: oklch(var(--color-black) / 0.5);
+    --alpha-black-60: oklch(var(--color-black) / 0.6);
+    --alpha-black-70: oklch(var(--color-black) / 0.7);
+    --alpha-black-80: oklch(var(--color-black) / 0.8);
+    --alpha-black-90: oklch(var(--color-black) / 0.9);
+    --alpha-black-100: oklch(var(--color-black) / 1);
+}
+
+@theme {
+  /* Background Colors */
+  --background-color-primary: oklch(var(--bg-primary));
+  --background-color-primary_alt: oklch(var(--bg-primary_alt));
+  --background-color-primary_hover: oklch(var(--bg-primary_hover));
+  --background-color-primary-solid: oklch(var(--bg-primary-solid));
+  --background-color-secondary: oklch(var(--bg-secondary));
+  --background-color-secondary_alt: oklch(var(--bg-secondary_alt));
+  --background-color-secondary_hover: oklch(var(--bg-secondary_hover));
+  --background-color-secondary_subtle: oklch(var(--bg-secondary_subtle));
+  --background-color-secondary-solid: oklch(var(--bg-secondary-solid));
+  --background-color-tertiary: oklch(var(--bg-tertiary));
+  --background-color-quaternary: oklch(var(--bg-quaternary));
+  --background-color-active: oklch(var(--bg-active));
+  --background-color-disabled: oklch(var(--bg-disabled));
+  --background-color-overlay: oklch(var(--bg-overlay));
+  
+  --background-color-brand-primary: oklch(var(--bg-brand-primary));
+  --background-color-brand-primary_alt: oklch(var(--bg-brand-primary_alt));
+  --background-color-brand-secondary: oklch(var(--bg-brand-secondary));
+  --background-color-brand-solid: oklch(var(--bg-brand-solid));
+  --background-color-brand-solid_hover: oklch(var(--bg-brand-solid_hover));
+  --background-color-brand-section: oklch(var(--bg-brand-section));
+  --background-color-brand-section_subtle: oklch(var(--bg-brand-section_subtle));
+
+  --background-color-error-primary: oklch(var(--bg-error-primary));
+  --background-color-error-secondary: oklch(var(--bg-error-secondary));
+  --background-color-error-solid: oklch(var(--bg-error-solid));
+  --background-color-error-solid_hover: oklch(var(--bg-error-solid_hover));
+
+  --background-color-warning-primary: oklch(var(--bg-warning-primary));
+  --background-color-warning-secondary: oklch(var(--bg-warning-secondary));
+  --background-color-warning-solid: oklch(var(--bg-warning-solid));
+
+  --background-color-success-primary: oklch(var(--bg-success-primary));
+  --background-color-success-secondary: oklch(var(--bg-success-secondary));
+  --background-color-success-solid: oklch(var(--bg-success-solid));
+
+  /* Text Colors */
+  --text-color-primary: oklch(var(--text-primary));
+  --text-color-secondary: oklch(var(--text-secondary));
+  --text-color-secondary_hover: oklch(var(--text-secondary_hover));
+  --text-color-tertiary: oklch(var(--text-tertiary));
+  --text-color-tertiary_hover: oklch(var(--text-tertiary_hover));
+  --text-color-quaternary: oklch(var(--text-quaternary));
+  --text-color-white: oklch(var(--text-white));
+  --text-color-disabled: oklch(var(--text-disabled));
+  --text-color-placeholder: oklch(var(--text-placeholder));
+  --text-color-placeholder_subtle: oklch(var(--text-placeholder_subtle));
+  
+  --text-color-brand-primary: oklch(var(--text-brand-primary));
+  --text-color-brand-secondary: oklch(var(--text-brand-secondary));
+  --text-color-brand-secondary_hover: oklch(var(--text-brand-secondary_hover));
+  --text-color-brand-tertiary: oklch(var(--text-brand-tertiary));
+  --text-color-brand-tertiary_alt: oklch(var(--text-brand-tertiary_alt));
+
+  --text-color-error-primary: oklch(var(--text-error-primary));
+  --text-color-warning-primary: oklch(var(--text-warning-primary));
+  --text-color-success-primary: oklch(var(--text-success-primary));
+
+  /* Icon/Foreground Colors (mapped to text-fg-*) */
+  --text-color-fg-primary: oklch(var(--fg-primary));
+  --text-color-fg-secondary: oklch(var(--fg-secondary));
+  --text-color-fg-secondary_hover: oklch(var(--fg-secondary_hover));
+  --text-color-fg-tertiary: oklch(var(--fg-tertiary));
+  --text-color-fg-tertiary_hover: oklch(var(--fg-tertiary_hover));
+  --text-color-fg-quaternary: oklch(var(--fg-quaternary));
+  --text-color-fg-quaternary_hover: oklch(var(--fg-quaternary_hover));
+  --text-color-fg-white: oklch(var(--fg-white));
+  --text-color-fg-disabled: oklch(var(--fg-disabled));
+  --text-color-fg-disabled_subtle: oklch(var(--fg-disabled_subtle));
+  --text-color-fg-brand-primary: oklch(var(--fg-brand-primary));
+  --text-color-fg-brand-primary_alt: oklch(var(--fg-brand-primary_alt));
+  --text-color-fg-brand-secondary: oklch(var(--fg-brand-secondary));
+  --text-color-fg-brand-secondary_alt: oklch(var(--fg-brand-secondary_alt));
+  --text-color-fg-error-primary: oklch(var(--fg-error-primary));
+  --text-color-fg-error-secondary: oklch(var(--fg-error-secondary));
+  --text-color-fg-warning-primary: oklch(var(--fg-warning-primary));
+  --text-color-fg-warning-secondary: oklch(var(--fg-warning-secondary));
+  --text-color-fg-success-primary: oklch(var(--fg-success-primary));
+  --text-color-fg-success-secondary: oklch(var(--fg-success-secondary));
+
+  /* Border Colors */
+  --border-color-primary: oklch(var(--border-primary));
+  --border-color-secondary: oklch(var(--border-secondary));
+  --border-color-secondary_alt: oklch(var(--border-secondary_alt));
+  --border-color-tertiary: oklch(var(--border-tertiary));
+  --border-color-disabled: oklch(var(--border-disabled));
+  --border-color-disabled_subtle: oklch(var(--border-disabled_subtle));
+  --border-color-brand: oklch(var(--border-brand));
+  --border-color-brand_alt: oklch(var(--border-brand_alt));
+  --border-color-error: oklch(var(--border-error));
+  --border-color-error_subtle: oklch(var(--border-error_subtle));
+  --border-color-success: oklch(var(--border-success));
+  --border-color-warning: oklch(var(--border-warning));
+
+  /* Border Radius */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-xs: var(--radius-xs);
+  --radius-radius-sm: var(--radius-sm);
+  --radius-radius-md: var(--radius-md);
+  --radius-radius-xl: var(--radius-xl);
+
+  /* Containers & Layout */
+  --container-padding-mobile: var(--container-padding-mobile);
+  --container-padding-desktop: var(--container-padding-desktop);
+  --container-max-width-desktop: var(--container-max-width-desktop);
+  --paragraph-max-width: var(--paragraph-max-width);
+
+  /* Typography — Untitled UI PRO v7 type scale */
+  --font-size-display-2xl: 4.5rem;
+  --font-size-display-2xl--line-height: 5.625rem;
+  --font-size-display-2xl--letter-spacing: -0.02em;
+  --font-size-display-xl: 3.75rem;
+  --font-size-display-xl--line-height: 4.5rem;
+  --font-size-display-xl--letter-spacing: -0.02em;
+  --font-size-display-lg: 3rem;
+  --font-size-display-lg--line-height: 3.75rem;
+  --font-size-display-lg--letter-spacing: -0.02em;
+  --font-size-display-md: 2.25rem;
+  --font-size-display-md--line-height: 2.75rem;
+  --font-size-display-md--letter-spacing: -0.02em;
+  --font-size-display-sm: 1.875rem;
+  --font-size-display-sm--line-height: 2.375rem;
+  --font-size-display-sm--letter-spacing: -0.01em;
+  --font-size-display-xs: 1.5rem;
+  --font-size-display-xs--line-height: 2rem;
+  --font-size-text-xl: 1.25rem;
+  --font-size-text-xl--line-height: 1.875rem;
+  --font-size-text-lg: 1.125rem;
+  --font-size-text-lg--line-height: 1.75rem;
+  --font-size-text-md: 1rem;
+  --font-size-text-md--line-height: 1.5rem;
+  --font-size-text-sm: 0.875rem;
+  --font-size-text-sm--line-height: 1.25rem;
+  --font-size-text-xs: 0.75rem;
+  --font-size-text-xs--line-height: 1.125rem;
+}