@invopop/popui 0.1.3 → 0.1.4-beta.1

package/dist/tailwind.theme.css

@@ -0,0 +1,998 @@
+/**
+ * PopUI Tailwind v4 Theme Configuration
+ * 
+ * This file can be imported in any project using:
+ * @import "@invopop/popui/tailwind.theme.css";
+ * 
+ * Three-tier color system:
+ * 1. Primitive colors: Raw color values from Figma (e.g., mint-100)
+ * 2. Semantic colors: Named palettes using base colors (e.g., positive-100)
+ * 3. Token colors: Application-specific using semantic colors (e.g., foreground-default)
+ */
+
+@theme {
+  /* ============================================
+     PRIMITIVE COLORS
+     ============================================ */
+
+  /* Mint */
+  --color-mint-10: #fdfffd;
+  --color-mint-20: #f6fef6;
+  --color-mint-30: #ecfeeb;
+  --color-mint-40: #dffddf;
+  --color-mint-50: #d3fcd2;
+  --color-mint-60: #b1d4b0;
+  --color-mint-70: #8fab8f;
+  --color-mint-80: #6e836d;
+  --color-mint-90: #4c5b4c;
+  --color-mint-100: #2a322a;
+  --color-mint-alpha-5: rgba(211, 252, 210, 0.05);
+  --color-mint-alpha-10: rgba(211, 252, 210, 0.1);
+  --color-mint-alpha-20: rgba(211, 252, 210, 0.2);
+  --color-mint-alpha-30: rgba(211, 252, 210, 0.3);
+  --color-mint-alpha-40: rgba(211, 252, 210, 0.4);
+  --color-mint-alpha-50: rgba(211, 252, 210, 0.5);
+  --color-mint-alpha-60: rgba(211, 252, 210, 0.6);
+  --color-mint-alpha-70: rgba(211, 252, 210, 0.7);
+  --color-mint-alpha-80: rgba(211, 252, 210, 0.8);
+  --color-mint-alpha-90: rgba(211, 252, 210, 0.9);
+
+  /* Sherwood */
+  --color-sherwood-10: #f5f7f7;
+  --color-sherwood-20: #ccd9d7;
+  --color-sherwood-30: #8faca6;
+  --color-sherwood-40: #47776e;
+  --color-sherwood-50: #004235;
+  --color-sherwood-60: #00372d;
+  --color-sherwood-70: #002d24;
+  --color-sherwood-80: #00221c;
+  --color-sherwood-90: #001813;
+  --color-sherwood-100: #000d0b;
+  --color-sherwood-alpha-5: rgba(0, 66, 53, 0.05);
+  --color-sherwood-alpha-10: rgba(0, 66, 53, 0.1);
+  --color-sherwood-alpha-20: rgba(0, 66, 53, 0.2);
+  --color-sherwood-alpha-30: rgba(0, 66, 53, 0.3);
+  --color-sherwood-alpha-40: rgba(0, 66, 53, 0.4);
+  --color-sherwood-alpha-50: rgba(0, 66, 53, 0.5);
+  --color-sherwood-alpha-60: rgba(0, 66, 53, 0.6);
+  --color-sherwood-alpha-70: rgba(0, 66, 53, 0.7);
+  --color-sherwood-alpha-80: rgba(0, 66, 53, 0.8);
+  --color-sherwood-alpha-90: rgba(0, 66, 53, 0.9);
+
+  /* Grey */
+  --color-grey-5: #f8f8fa;
+  --color-grey-10: #f0f0f2;
+  --color-grey-20: #e6e7eb;
+  --color-grey-30: #c0c2cc;
+  --color-grey-40: #989aa4;
+  --color-grey-50: #6b727d;
+  --color-grey-60: #373942;
+  --color-grey-70: #20222a;
+  --color-grey-80: #1a1c23;
+  --color-grey-90: #16171c;
+  --color-grey-100: #0b0b10;
+  --color-grey-alpha-5: rgba(22, 22, 90, 0.03);
+  --color-grey-alpha-10: rgba(5, 5, 36, 0.06);
+  --color-grey-alpha-20: rgba(5, 15, 56, 0.1);
+  --color-grey-alpha-30: rgba(3, 11, 53, 0.25);
+  --color-grey-alpha-40: rgba(4, 9, 32, 0.41);
+  --color-grey-alpha-50: rgba(4, 17, 37, 0.59);
+  --color-grey-alpha-60: rgba(2, 5, 18, 0.79);
+  --color-grey-alpha-70: rgba(2, 4, 13, 0.88);
+  --color-grey-alpha-80: rgba(1, 3, 9, 0.9);
+  --color-grey-alpha-90: rgba(2, 3, 8, 0.92);
+
+  /* White */
+  --color-white: #ffffff;
+  --color-white-5: rgba(255, 255, 255, 0.05);
+  --color-white-10: rgba(255, 255, 255, 0.1);
+  --color-white-20: rgba(255, 255, 255, 0.2);
+  --color-white-30: rgba(255, 255, 255, 0.3);
+  --color-white-40: rgba(255, 255, 255, 0.4);
+  --color-white-50: rgba(255, 255, 255, 0.5);
+  --color-white-60: rgba(255, 255, 255, 0.6);
+  --color-white-70: rgba(255, 255, 255, 0.7);
+  --color-white-80: rgba(255, 255, 255, 0.8);
+  --color-white-90: rgba(255, 255, 255, 0.9);
+
+  /* DEFAULT: 'var(--workspace-accent-color, #169958)',
+          50: 'color-mix(in lab, transparent 95%, var(--workspace-accent-color, #169958))',
+          100: 'color-mix(in lab, transparent 90%, var(--workspace-accent-color, #169958))',
+          200: 'color-mix(in lab, transparent 80%, var(--workspace-accent-color, #169958))',
+          500: 'var(--workspace-accent-color, #169958)',
+          600: 'color-mix(in lab, black 16%, var(--workspace-accent-color, #169958))',
+          700: 'color-mix(in lab, black 32%, var(--workspace-accent-color, #169958))' */
+
+  /* Green */
+  --color-green-10: #f5faf8;
+  --color-green-20: #cce7dc;
+  --color-green-30: #8fc9b2;
+  --color-green-40: #48a782;
+  --color-green-50: #018551;
+  --color-green-60: #017044;
+  --color-green-70: #015a37;
+  --color-green-80: #01452a;
+  --color-green-90: #00301d;
+  --color-green-100: #001b10;
+  --color-green-alpha-5: rgba(1, 133, 81, 0.05);
+  --color-green-alpha-10: rgba(1, 133, 81, 0.1);
+  --color-green-alpha-20: rgba(1, 133, 81, 0.2);
+  --color-green-alpha-30: rgba(1, 133, 81, 0.3);
+  --color-green-alpha-40: rgba(1, 133, 81, 0.4);
+  --color-green-alpha-50: rgba(1, 133, 81, 0.5);
+  --color-green-alpha-60: rgba(1, 133, 81, 0.6);
+  --color-green-alpha-70: rgba(1, 133, 81, 0.7);
+  --color-green-alpha-80: rgba(1, 133, 81, 0.8);
+  --color-green-alpha-90: rgba(1, 133, 81, 0.9);
+
+  /* Red */
+  --color-red-10: #fdf7f7;
+  --color-red-20: #f7d5d7;
+  --color-red-30: #eda2a8;
+  --color-red-40: #e16770;
+  --color-red-50: #d52c39;
+  --color-red-60: #b32530;
+  --color-red-70: #911e27;
+  --color-red-80: #6f171e;
+  --color-red-90: #4d1015;
+  --color-red-100: #2b090b;
+  --color-red-alpha-5: rgba(213, 44, 57, 0.05);
+  --color-red-alpha-10: rgba(213, 44, 57, 0.1);
+  --color-red-alpha-20: rgba(213, 44, 57, 0.2);
+  --color-red-alpha-30: rgba(213, 44, 57, 0.3);
+  --color-red-alpha-40: rgba(213, 44, 57, 0.4);
+  --color-red-alpha-50: rgba(213, 44, 57, 0.5);
+  --color-red-alpha-60: rgba(213, 44, 57, 0.6);
+  --color-red-alpha-70: rgba(213, 44, 57, 0.7);
+  --color-red-alpha-80: rgba(213, 44, 57, 0.8);
+  --color-red-alpha-90: rgba(213, 44, 57, 0.9);
+
+  /* Orange */
+  --color-orange-10: #fef9f6;
+  --color-orange-20: #fbe2d1;
+  --color-orange-30: #f7bf9b;
+  --color-orange-40: #f1965b;
+  --color-orange-50: #ec6d1b;
+  --color-orange-60: #c65c17;
+  --color-orange-70: #a04a12;
+  --color-orange-80: #7b390e;
+  --color-orange-90: #55270a;
+  --color-orange-100: #2f1605;
+  --color-orange-alpha-5: rgba(236, 109, 27, 0.05);
+  --color-orange-alpha-10: rgba(236, 109, 27, 0.1);
+  --color-orange-alpha-20: rgba(236, 109, 27, 0.2);
+  --color-orange-alpha-30: rgba(236, 109, 27, 0.3);
+  --color-orange-alpha-40: rgba(236, 109, 27, 0.4);
+  --color-orange-alpha-50: rgba(236, 109, 27, 0.5);
+  --color-orange-alpha-60: rgba(236, 109, 27, 0.6);
+  --color-orange-alpha-70: rgba(236, 109, 27, 0.7);
+  --color-orange-alpha-80: rgba(236, 109, 27, 0.8);
+  --color-orange-alpha-90: rgba(236, 109, 27, 0.9);
+
+  /* Yellow */
+  --color-yellow-10: #fffbf5;
+  --color-yellow-20: #feecce;
+  --color-yellow-30: #fcd594;
+  --color-yellow-40: #fabb4f;
+  --color-yellow-50: #f8a00b;
+  --color-yellow-60: #d08609;
+  --color-yellow-70: #a96d07;
+  --color-yellow-80: #815306;
+  --color-yellow-90: #593a04;
+  --color-yellow-100: #322002;
+  --color-yellow-alpha-5: rgba(248, 160, 11, 0.05);
+  --color-yellow-alpha-10: rgba(248, 160, 11, 0.1);
+  --color-yellow-alpha-20: rgba(248, 160, 11, 0.2);
+  --color-yellow-alpha-30: rgba(248, 160, 11, 0.3);
+  --color-yellow-alpha-40: rgba(248, 160, 11, 0.4);
+  --color-yellow-alpha-50: rgba(248, 160, 11, 0.5);
+  --color-yellow-alpha-60: rgba(248, 160, 11, 0.6);
+  --color-yellow-alpha-70: rgba(248, 160, 11, 0.7);
+  --color-yellow-alpha-80: rgba(248, 160, 11, 0.8);
+  --color-yellow-alpha-90: rgba(248, 160, 11, 0.9);
+
+  /* Indigo */
+  --color-indigo-10: #f6f8ff;
+  --color-indigo-20: #d4dbfd;
+  --color-indigo-30: #a1affb;
+  --color-indigo-40: #667df8;
+  --color-indigo-50: #2a4af5;
+  --color-indigo-60: #233ece;
+  --color-indigo-70: #1d32a7;
+  --color-indigo-80: #16267f;
+  --color-indigo-90: #0f1b58;
+  --color-indigo-100: #080f31;
+  --color-indigo-alpha-5: rgba(42, 74, 245, 0.05);
+  --color-indigo-alpha-10: rgba(42, 74, 245, 0.1);
+  --color-indigo-alpha-20: rgba(42, 74, 245, 0.2);
+  --color-indigo-alpha-30: rgba(42, 74, 245, 0.3);
+  --color-indigo-alpha-40: rgba(42, 74, 245, 0.4);
+  --color-indigo-alpha-50: rgba(42, 74, 245, 0.5);
+  --color-indigo-alpha-60: rgba(42, 74, 245, 0.6);
+  --color-indigo-alpha-70: rgba(42, 74, 245, 0.7);
+  --color-indigo-alpha-80: rgba(42, 74, 245, 0.8);
+  --color-indigo-alpha-90: rgba(42, 74, 245, 0.9);
+
+  /* Sky */
+  --color-sky-10: #f6fbfe;
+  --color-sky-20: #d0eaf9;
+  --color-sky-30: #97d0f1;
+  --color-sky-40: #54b2e8;
+  --color-sky-50: #1294df;
+  --color-sky-60: #0f7cbb;
+  --color-sky-70: #0c6598;
+  --color-sky-80: #094d74;
+  --color-sky-90: #063550;
+  --color-sky-100: #041e2d;
+  --color-sky-alpha-5: rgba(18, 148, 223, 0.05);
+  --color-sky-alpha-10: rgba(18, 148, 223, 0.1);
+  --color-sky-alpha-20: rgba(18, 148, 223, 0.2);
+  --color-sky-alpha-30: rgba(18, 148, 223, 0.3);
+  --color-sky-alpha-40: rgba(18, 148, 223, 0.4);
+  --color-sky-alpha-50: rgba(18, 148, 223, 0.5);
+  --color-sky-alpha-60: rgba(18, 148, 223, 0.6);
+  --color-sky-alpha-70: rgba(18, 148, 223, 0.7);
+  --color-sky-alpha-80: rgba(18, 148, 223, 0.8);
+  --color-sky-alpha-90: rgba(18, 148, 223, 0.9);
+
+  /* Violet */
+  --color-violet-10: #faf7ff;
+  --color-violet-20: #e6d5fe;
+  --color-violet-30: #c9a2fc;
+  --color-violet-40: #a666fb;
+  --color-violet-50: #842bf9;
+  --color-violet-60: #6f24d1;
+  --color-violet-70: #5a1da9;
+  --color-violet-80: #451681;
+  --color-violet-90: #300f5a;
+  --color-violet-100: #1a0932;
+  --color-violet-alpha-5: rgba(132, 43, 249, 0.05);
+  --color-violet-alpha-10: rgba(132, 43, 249, 0.1);
+  --color-violet-alpha-20: rgba(132, 43, 249, 0.2);
+  --color-violet-alpha-30: rgba(132, 43, 249, 0.3);
+  --color-violet-alpha-40: rgba(132, 43, 249, 0.4);
+  --color-violet-alpha-50: rgba(132, 43, 249, 0.5);
+  --color-violet-alpha-60: rgba(132, 43, 249, 0.6);
+  --color-violet-alpha-70: rgba(132, 43, 249, 0.7);
+  --color-violet-alpha-80: rgba(132, 43, 249, 0.8);
+  --color-violet-alpha-90: rgba(132, 43, 249, 0.9);
+
+  /* Pink */
+  --color-pink-10: #fef6f9;
+  --color-pink-20: #fbd4e2;
+  --color-pink-30: #f7a0be;
+  --color-pink-40: #f26b9b;
+  --color-pink-50: #ec266c;
+  --color-pink-60: #c6205b;
+  --color-pink-70: #a01a49;
+  --color-pink-80: #7b1438;
+  --color-pink-90: #550e27;
+  --color-pink-100: #2f0816;
+  --color-pink-alpha-5: rgba(236, 38, 108, 0.05);
+  --color-pink-alpha-10: rgba(236, 38, 108, 0.1);
+  --color-pink-alpha-20: rgba(236, 38, 108, 0.2);
+  --color-pink-alpha-30: rgba(236, 38, 108, 0.3);
+  --color-pink-alpha-40: rgba(236, 38, 108, 0.4);
+  --color-pink-alpha-50: rgba(236, 38, 108, 0.5);
+  --color-pink-alpha-60: rgba(236, 38, 108, 0.6);
+  --color-pink-alpha-70: rgba(236, 38, 108, 0.7);
+  --color-pink-alpha-80: rgba(236, 38, 108, 0.8);
+  --color-pink-alpha-90: rgba(236, 38, 108, 0.9);
+
+  /* Aqua */
+  --color-aqua-10: #f6fbfb;
+  --color-aqua-20: #d1eded;
+  --color-aqua-30: #99d7d7;
+  --color-aqua-40: #59bdbd;
+  --color-aqua-50: #18a4a4;
+  --color-aqua-60: #148a8a;
+  --color-aqua-70: #107070;
+  --color-aqua-80: #0c5555;
+  --color-aqua-90: #093b3b;
+  --color-aqua-100: #052121;
+  --color-aqua-alpha-5: rgba(24, 164, 164, 0.05);
+  --color-aqua-alpha-10: rgba(24, 164, 164, 0.1);
+  --color-aqua-alpha-20: rgba(24, 164, 164, 0.2);
+  --color-aqua-alpha-30: rgba(24, 164, 164, 0.3);
+  --color-aqua-alpha-40: rgba(24, 164, 164, 0.4);
+  --color-aqua-alpha-50: rgba(24, 164, 164, 0.5);
+  --color-aqua-alpha-60: rgba(24, 164, 164, 0.6);
+  --color-aqua-alpha-70: rgba(24, 164, 164, 0.7);
+  --color-aqua-alpha-80: rgba(24, 164, 164, 0.8);
+  --color-aqua-alpha-90: rgba(24, 164, 164, 0.9);
+
+  /* PDF (Document Type) */
+  --color-pdf-10: #fcf5f5;
+  --color-pdf-20: #f0cecc;
+  --color-pdf-30: #de948f;
+  --color-pdf-40: #ce5d56;
+  --color-pdf-50: #b30b00;
+  --color-pdf-60: #960900;
+  --color-pdf-70: #7a0700;
+  --color-pdf-80: #5d0600;
+  --color-pdf-90: #400400;
+  --color-pdf-100: #240200;
+  --color-pdf-alpha-5: rgba(179, 11, 0, 0.05);
+  --color-pdf-alpha-10: rgba(179, 11, 0, 0.1);
+  --color-pdf-alpha-20: rgba(179, 11, 0, 0.2);
+  --color-pdf-alpha-30: rgba(179, 11, 0, 0.3);
+  --color-pdf-alpha-40: rgba(179, 11, 0, 0.4);
+  --color-pdf-alpha-50: rgba(179, 11, 0, 0.5);
+  --color-pdf-alpha-60: rgba(179, 11, 0, 0.6);
+  --color-pdf-alpha-70: rgba(179, 11, 0, 0.7);
+  --color-pdf-alpha-80: rgba(179, 11, 0, 0.8);
+  --color-pdf-alpha-90: rgba(179, 11, 0, 0.9);
+
+  /* XML (Document Type) */
+  --color-xml-10: #f5f9fc;
+  --color-xml-20: #cce0f1;
+  --color-xml-30: #8fbbdf;
+  --color-xml-40: #5296ce;
+  --color-xml-50: #0065b7;
+  --color-xml-60: #00559a;
+  --color-xml-70: #00457c;
+  --color-xml-80: #00355f;
+  --color-xml-90: #002442;
+  --color-xml-100: #001425;
+  --color-xml-alpha-5: rgba(0, 101, 183, 0.05);
+  --color-xml-alpha-10: rgba(0, 101, 183, 0.1);
+  --color-xml-alpha-20: rgba(0, 101, 183, 0.2);
+  --color-xml-alpha-30: rgba(0, 101, 183, 0.3);
+  --color-xml-alpha-40: rgba(0, 101, 183, 0.4);
+  --color-xml-alpha-50: rgba(0, 101, 183, 0.5);
+  --color-xml-alpha-60: rgba(0, 101, 183, 0.6);
+  --color-xml-alpha-70: rgba(0, 101, 183, 0.7);
+  --color-xml-alpha-80: rgba(0, 101, 183, 0.8);
+  --color-xml-alpha-90: rgba(0, 101, 183, 0.9);
+
+  /* IMG (Document Type) */
+  --color-img-10: #f9f6fd;
+  --color-img-20: #e2d3f6;
+  --color-img-30: #c09feb;
+  --color-img-40: #9d6ae0;
+  --color-img-50: #6f24d1;
+  --color-img-60: #5d1eb0;
+  --color-img-70: #4b188e;
+  --color-img-80: #3a136d;
+  --color-img-90: #280d4b;
+  --color-img-100: #16072a;
+  --color-img-alpha-5: rgba(111, 36, 209, 0.05);
+  --color-img-alpha-10: rgba(111, 36, 209, 0.1);
+  --color-img-alpha-20: rgba(111, 36, 209, 0.2);
+  --color-img-alpha-30: rgba(111, 36, 209, 0.3);
+  --color-img-alpha-40: rgba(111, 36, 209, 0.4);
+  --color-img-alpha-50: rgba(111, 36, 209, 0.5);
+  --color-img-alpha-60: rgba(111, 36, 209, 0.6);
+  --color-img-alpha-70: rgba(111, 36, 209, 0.7);
+  --color-img-alpha-80: rgba(111, 36, 209, 0.8);
+  --color-img-alpha-90: rgba(111, 36, 209, 0.9);
+
+  /* Black (solid) */
+  --color-black: #000000;
+
+  /* ============================================
+     SEMANTIC COLORS
+     ============================================ */
+
+  /* Accent */
+  --color-accent-40: color-mix(in srgb, var(--color-accent-50) 72%, white);
+  --color-accent-50: var(--color-base-accent, var(--color-green-50));
+  --color-accent-60: color-mix(in srgb, var(--color-accent-50) 84%, black);
+  --color-accent-70: color-mix(in srgb, var(--color-accent-50) 68%, black);
+  --color-accent-80: var(--color-base-accent-bg, color-mix(in srgb, var(--color-accent-50) 52%, black));
+  --color-accent-alpha-5: color-mix(in srgb, var(--color-accent-50) 5%, transparent);
+  --color-accent-alpha-10: color-mix(in srgb, var(--color-accent-50) 10%, transparent);
+  --color-accent-alpha-20: color-mix(in srgb, var(--color-accent-50) 20%, transparent);
+  --color-accent-alpha-30: color-mix(in srgb, var(--color-accent-50) 30%, transparent);
+  --color-accent-alpha-40: color-mix(in srgb, var(--color-accent-50) 40%, transparent);
+
+  /* Neutral */
+  --color-neutral-5: var(--color-grey-5);
+  --color-neutral-10: var(--color-grey-10);
+  --color-neutral-20: var(--color-grey-20);
+  --color-neutral-30: var(--color-grey-30);
+  --color-neutral-40: var(--color-grey-40);
+  --color-neutral-50: var(--color-grey-50);
+  --color-neutral-60: var(--color-grey-60);
+  --color-neutral-70: var(--color-grey-70);
+  --color-neutral-80: var(--color-grey-80);
+  --color-neutral-90: var(--color-grey-90);
+  --color-neutral-100: var(--color-grey-100);
+  --color-neutral-alpha-5: var(--color-grey-alpha-5);
+  --color-neutral-alpha-10: var(--color-grey-alpha-10);
+  --color-neutral-alpha-20: var(--color-grey-alpha-20);
+  --color-neutral-alpha-30: var(--color-grey-alpha-30);
+  --color-neutral-alpha-40: var(--color-grey-alpha-40);
+  --color-neutral-alpha-50: var(--color-grey-alpha-50);
+  --color-neutral-alpha-60: var(--color-grey-alpha-60);
+  --color-neutral-alpha-70: var(--color-grey-alpha-70);
+  --color-neutral-alpha-80: var(--color-grey-alpha-80);
+  --color-neutral-alpha-90: var(--color-grey-alpha-90);
+  --color-neutral-alpha-100: var(--color-grey-100);
+
+  /* Neutral/White */
+  --color-neutral-white-alpha-5: var(--color-white-5);
+  --color-neutral-white-alpha-10: var(--color-white-10);
+  --color-neutral-white-alpha-20: var(--color-white-20);
+  --color-neutral-white-alpha-30: var(--color-white-30);
+  --color-neutral-white-alpha-40: var(--color-white-40);
+  --color-neutral-white-alpha-50: var(--color-white-50);
+  --color-neutral-white-alpha-60: var(--color-white-60);
+  --color-neutral-white-alpha-70: var(--color-white-70);
+  --color-neutral-white-alpha-80: var(--color-white-80);
+  --color-neutral-white-alpha-90: var(--color-white-90);
+  --color-neutral-white-alpha-100: var(--color-white);
+
+  /* Positive */
+  --color-positive-40: var(--color-green-40);
+  --color-positive-50: var(--color-green-50);
+  --color-positive-60: var(--color-green-60);
+  --color-positive-alpha-5: var(--color-green-alpha-5);
+  --color-positive-alpha-10: var(--color-green-alpha-10);
+  --color-positive-alpha-20: var(--color-green-alpha-20);
+  --color-positive-alpha-30: var(--color-green-alpha-30);
+  --color-positive-alpha-40: var(--color-green-alpha-40);
+
+  /* Warning */
+  --color-warning-40: var(--color-orange-40);
+  --color-warning-50: var(--color-orange-50);
+  --color-warning-60: var(--color-orange-70);
+  --color-warning-alpha-5: var(--color-orange-alpha-5);
+  --color-warning-alpha-10: var(--color-orange-alpha-10);
+  --color-warning-alpha-20: var(--color-orange-alpha-20);
+  --color-warning-alpha-30: var(--color-orange-alpha-30);
+  --color-warning-alpha-40: var(--color-orange-alpha-40);
+
+  /* Info */
+  --color-info-40: var(--color-indigo-40);
+  --color-info-50: var(--color-indigo-50);
+  --color-info-60: var(--color-indigo-60);
+  --color-info-alpha-5: var(--color-indigo-alpha-5);
+  --color-info-alpha-10: var(--color-indigo-alpha-10);
+  --color-info-alpha-20: var(--color-indigo-alpha-20);
+  --color-info-alpha-30: var(--color-indigo-alpha-30);
+  --color-info-alpha-40: var(--color-indigo-alpha-40);
+
+  /* Attention */
+  --color-attention-40: var(--color-yellow-40);
+  --color-attention-50: var(--color-yellow-60);
+  --color-attention-60: var(--color-yellow-80);
+  --color-attention-alpha-5: var(--color-yellow-alpha-5);
+  --color-attention-alpha-10: var(--color-yellow-alpha-10);
+  --color-attention-alpha-20: var(--color-yellow-alpha-20);
+  --color-attention-alpha-30: var(--color-yellow-alpha-30);
+  --color-attention-alpha-40: var(--color-yellow-alpha-40);
+
+  /* Critical */
+  --color-critical-30: var(--color-red-40);
+  --color-critical-40: var(--color-red-50);
+  --color-critical-50: var(--color-red-60);
+  --color-critical-alpha-5: var(--color-red-alpha-5);
+  --color-critical-alpha-10: var(--color-red-alpha-10);
+  --color-critical-alpha-20: var(--color-red-alpha-20);
+  --color-critical-alpha-30: var(--color-red-alpha-30);
+  --color-critical-alpha-40: var(--color-red-alpha-40);
+
+  /* Personalization */
+  --color-personalization-40: var(--color-violet-40);
+  --color-personalization-50: var(--color-violet-50);
+  --color-personalization-60: var(--color-violet-60);
+  --color-personalization-alpha-5: var(--color-violet-alpha-5);
+  --color-personalization-alpha-10: var(--color-violet-alpha-10);
+  --color-personalization-alpha-20: var(--color-violet-alpha-20);
+  --color-personalization-alpha-30: var(--color-violet-alpha-30);
+  --color-personalization-alpha-40: var(--color-violet-alpha-40);
+
+  /* Personalization/Sky */
+  --color-personalization-sky-40: var(--color-sky-40);
+  --color-personalization-sky-50: var(--color-sky-50);
+  --color-personalization-sky-60: var(--color-sky-70);
+  --color-personalization-sky-alpha-5: var(--color-sky-alpha-5);
+  --color-personalization-sky-alpha-10: var(--color-sky-alpha-10);
+  --color-personalization-sky-alpha-20: var(--color-sky-alpha-20);
+  --color-personalization-sky-alpha-30: var(--color-sky-alpha-30);
+  --color-personalization-sky-alpha-40: var(--color-sky-alpha-40);
+
+  /* Personalization/Magenta */
+  --color-personalization-magenta-40: var(--color-pink-40);
+  --color-personalization-magenta-50: var(--color-pink-50);
+  --color-personalization-magenta-60: var(--color-pink-60);
+  --color-personalization-magenta-alpha-5: var(--color-pink-alpha-5);
+  --color-personalization-magenta-alpha-10: var(--color-pink-alpha-10);
+  --color-personalization-magenta-alpha-20: var(--color-pink-alpha-20);
+  --color-personalization-magenta-alpha-30: var(--color-pink-alpha-30);
+  --color-personalization-magenta-alpha-40: var(--color-pink-alpha-40);
+
+  /* Personalization/Aqua */
+  --color-personalization-aqua-40: var(--color-aqua-40);
+  --color-personalization-aqua-50: var(--color-aqua-50);
+  --color-personalization-aqua-60: var(--color-aqua-70);
+  --color-personalization-aqua-alpha-5: var(--color-aqua-alpha-5);
+  --color-personalization-aqua-alpha-10: var(--color-aqua-alpha-10);
+  --color-personalization-aqua-alpha-20: var(--color-aqua-alpha-20);
+  --color-personalization-aqua-alpha-30: var(--color-aqua-alpha-30);
+  --color-personalization-aqua-alpha-40: var(--color-aqua-alpha-40);
+
+  /* Documents */
+  --color-documents-pdf-40: var(--color-pdf-40);
+  --color-documents-pdf-50: var(--color-pdf-50);
+  --color-documents-pdf-60: var(--color-pdf-60);
+  --color-documents-pdf-alpha-5: var(--color-pdf-alpha-5);
+  --color-documents-pdf-alpha-10: var(--color-pdf-alpha-10);
+  --color-documents-pdf-alpha-20: var(--color-pdf-alpha-20);
+  --color-documents-pdf-alpha-30: var(--color-pdf-alpha-30);
+  --color-documents-pdf-alpha-40: var(--color-pdf-alpha-40);
+
+  --color-documents-xml-40: var(--color-xml-40);
+  --color-documents-xml-50: var(--color-xml-50);
+  --color-documents-xml-60: var(--color-xml-60);
+  --color-documents-xml-alpha-5: var(--color-xml-alpha-5);
+  --color-documents-xml-alpha-10: var(--color-xml-alpha-10);
+  --color-documents-xml-alpha-20: var(--color-xml-alpha-20);
+  --color-documents-xml-alpha-30: var(--color-xml-alpha-30);
+  --color-documents-xml-alpha-40: var(--color-xml-alpha-40);
+
+  --color-documents-img-40: var(--color-img-40);
+  --color-documents-img-50: var(--color-img-50);
+  --color-documents-img-60: var(--color-img-60);
+  --color-documents-img-alpha-5: var(--color-img-alpha-5);
+  --color-documents-img-alpha-10: var(--color-img-alpha-10);
+  --color-documents-img-alpha-20: var(--color-img-alpha-20);
+  --color-documents-img-alpha-30: var(--color-img-alpha-30);
+  --color-documents-img-alpha-40: var(--color-img-alpha-40);
+
+  /* Brand - Brand colors */
+  --color-brand-50: var(--color-mint-50);
+
+  /* ============================================
+     TOKEN COLORS (Application-Specific)
+     ============================================ */
+  /* Foreground */
+  --color-foreground-default-default: var(--color-neutral-100);
+  --color-foreground-default-secondary: var(--color-neutral-50);
+  --color-foreground-default-tertiary: var(--color-neutral-40);
+
+  --color-foreground-inverse-default: var(--color-white);
+  --color-foreground-inverse-secondary: var(--color-neutral-white-alpha-70);
+
+  --color-foreground-accent-default: var(--color-accent-60);
+  --color-foreground-accent-default-hover: var(--color-accent-70);
+
+  --color-foreground-selected-default: var(--color-accent-60);
+  --color-foreground-selected-default-hover: var(--color-accent-70);
+
+  --color-foreground-success-default: var(--color-positive-60);
+
+  --color-foreground-info-default: var(--color-info-50);
+
+  --color-foreground-attention-default: var(--color-attention-60);
+
+  --color-foreground-warning-default: var(--color-warning-60);
+
+  --color-foreground-critical-default: var(--color-critical-50);
+
+  --color-foreground-document-pdf: var(--color-documents-pdf-50);
+  --color-foreground-document-xml: var(--color-documents-xml-50);
+  --color-foreground-document-png: var(--color-documents-img-50);
+
+  --color-foreground-status-invalid: var(--color-critical-50);
+  --color-foreground-status-empty: var(--color-neutral-alpha-50);
+  --color-foreground-status-draft: var(--color-warning-60);
+  --color-foreground-status-processing: var(--color-attention-60);
+  --color-foreground-status-registered: var(--color-personalization-60);
+  --color-foreground-status-sent: var(--color-info-60);
+  --color-foreground-status-received: var(--color-personalization-sky-60);
+  --color-foreground-status-paid: var(--color-positive-60);
+  --color-foreground-status-completed: var(--color-personalization-aqua-60);
+  --color-foreground-status-error: var(--color-critical-50);
+  --color-foreground-status-rejected: var(--color-personalization-magenta-60);
+  --color-foreground-status-void: var(--color-neutral-alpha-50);
+
+  /* Background */
+  --color-background-default-default: var(--color-neutral-white-alpha-100);
+  --color-background-default-secondary: var(--color-neutral-alpha-5);
+  --color-background-default-tertiary: var(--color-neutral-alpha-10);
+  --color-background-default-tertiary-hover: var(--color-neutral-alpha-20);
+  --color-background-default-tertiary-press: var(--color-neutral-alpha-30);
+  --color-background-default-bold: var(--color-accent-80);
+  --color-background-default-accent: var(--color-brand-50);
+  --color-background-default-negative: var(--color-neutral-100);
+
+  --color-background-selected-default: var(--color-accent-alpha-10);
+  --color-background-selected-default-hover: var(--color-accent-alpha-20);
+  --color-background-selected-default-press: var(--color-accent-alpha-30);
+  --color-background-selected-inverse: var(--color-neutral-white-alpha-10);
+  --color-background-selected-inverse-hover: var(--color-neutral-white-alpha-20);
+  --color-background-selected-inverse-press: var(--color-neutral-white-alpha-30);
+
+  --color-background-accent-default: var(--color-accent-50);
+  --color-background-accent-default-hover: var(--color-accent-60);
+  --color-background-accent-default-press: var(--color-accent-70);
+
+  --color-background-info-default: var(--color-info-alpha-10);
+  --color-background-info-bold: var(--color-info-60);
+
+  --color-background-success-default: var(--color-positive-alpha-10);
+  --color-background-success-bold: var(--color-positive-50);
+
+  --color-background-attention-default: var(--color-attention-alpha-10);
+
+  --color-background-warning-default: var(--color-warning-alpha-10);
+  --color-background-warning-bold: var(--color-warning-60);
+  --color-background-warning-inverse: var(--color-warning-50);
+
+  --color-background-critical-default: var(--color-critical-alpha-10);
+  --color-background-critical-bold: var(--color-critical-50);
+  --color-background-critical-inverse: var(--color-critical-40);
+
+  --color-background-document-pdf: var(--color-documents-pdf-alpha-5);
+  --color-background-document-xml: var(--color-documents-xml-alpha-5);
+  --color-background-document-png: var(--color-documents-img-alpha-5);
+
+  --color-background-status-invalid: var(--color-critical-alpha-10);
+  --color-background-status-empty: var(--color-neutral-white-alpha-100);
+  --color-background-status-draft: var(--color-warning-alpha-10);
+  --color-background-status-processing: var(--color-attention-alpha-10);
+  --color-background-status-registered: var(--color-personalization-alpha-10);
+  --color-background-status-sent: var(--color-info-alpha-10);
+  --color-background-status-received: var(--color-personalization-sky-alpha-10);
+  --color-background-status-paid: var(--color-positive-alpha-10);
+  --color-background-status-completed: var(--color-personalization-aqua-alpha-10);
+  --color-background-status-error: var(--color-critical-alpha-10);
+  --color-background-status-rejected: var(--color-personalization-magenta-alpha-10);
+  --color-background-status-void: var(--color-neutral-alpha-10);
+
+  /* Border */
+  --color-border-default-default: var(--color-neutral-alpha-10);
+  --color-border-default-secondary: var(--color-neutral-alpha-20);
+  --color-border-default-secondary-hover: var(--color-neutral-alpha-30);
+  --color-border-default-tertiary: var(--color-neutral-alpha-40);
+
+  --color-border-inverse-default: var(--color-neutral-white-alpha-10);
+  --color-border-inverse-secondary: var(--color-neutral-white-alpha-20);
+
+  --color-border-selected-default: var(--color-accent-alpha-10);
+  --color-border-selected-bold: var(--color-accent-50);
+
+  --color-border-critical-bold: var(--color-critical-50);
+
+  --color-border-warning-default: var(--color-warning-alpha-10);
+  --color-border-warning-bold: var(--color-warning-50);
+
+  --color-border-document-pdf: var(--color-documents-pdf-alpha-10);
+  --color-border-document-xml: var(--color-documents-xml-alpha-10);
+  --color-border-document-png: var(--color-documents-img-alpha-10);
+
+  /* Icon */
+  --color-icon-default-default: var(--color-neutral-alpha-50);
+  --color-icon-default-secondary: var(--color-neutral-alpha-30);
+  --color-icon-default-bold: var(--color-neutral-100);
+
+  --color-icon-inverse-default: var(--color-neutral-white-alpha-70);
+  --color-icon-inverse-secondary: var(--color-neutral-white-alpha-40);
+  --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
+
+  --color-icon-selected-default: var(--color-positive-50);
+  --color-icon-accent-default: var(--color-accent-50);
+
+  --color-icon-success-default: var(--color-positive-50);
+
+  --color-icon-info-default: var(--color-info-50);
+
+  --color-icon-attention-default: var(--color-attention-50);
+
+  --color-icon-warning-default: var(--color-warning-50);
+  --color-icon-warning-inverse: var(--color-warning-50);
+
+  --color-icon-critical-default: var(--color-critical-50);
+  --color-icon-critical-inverse: var(--color-critical-40);
+
+  --color-icon-document-pdf: var(--color-documents-pdf-50);
+  --color-icon-document-xml: var(--color-documents-xml-50);
+  --color-icon-document-png: var(--color-documents-img-50);
+
+  --color-icon-status-invalid: var(--color-critical-40);
+  --color-icon-status-empty: var(--color-neutral-20);
+  --color-icon-status-draft: var(--color-warning-50);
+  --color-icon-status-processing: var(--color-attention-50);
+  --color-icon-status-registered: var(--color-personalization-50);
+  --color-icon-status-sent: var(--color-info-50);
+  --color-icon-status-received: var(--color-personalization-sky-50);
+  --color-icon-status-paid: var(--color-positive-50);
+  --color-icon-status-completed: var(--color-personalization-aqua-50);
+  --color-icon-status-error: var(--color-critical-40);
+  --color-icon-status-rejected: var(--color-personalization-magenta-50);
+  --color-icon-status-void: var(--color-neutral-50);
+
+  /* ============================================
+     TOKEN ALIASES (default omitted)
+     ============================================ */
+  
+  /* Foreground */
+  --color-foreground: var(--color-foreground-default-default);
+  
+  --color-foreground-inverse: var(--color-foreground-inverse-default);
+  
+  --color-foreground-accent: var(--color-foreground-accent-default);
+  --color-foreground-accent-hover: var(--color-foreground-accent-default-hover);
+  
+  --color-foreground-selected: var(--color-foreground-selected-default);
+  --color-foreground-selected-hover: var(--color-foreground-selected-default-hover);
+  
+  --color-foreground-success: var(--color-foreground-success-default);
+  --color-foreground-info: var(--color-foreground-info-default);
+  --color-foreground-attention: var(--color-foreground-attention-default);
+  --color-foreground-warning: var(--color-foreground-warning-default);
+  --color-foreground-critical: var(--color-foreground-critical-default);
+  
+  /* Background */
+  --color-background: var(--color-background-default-default);
+  
+  --color-background-selected: var(--color-background-selected-default);
+  --color-background-selected-hover: var(--color-background-selected-default-hover);
+  --color-background-selected-press: var(--color-background-selected-default-press);
+  
+  --color-background-accent: var(--color-background-accent-default);
+  --color-background-accent-hover: var(--color-background-accent-default-hover);
+  --color-background-accent-press: var(--color-background-accent-default-press);
+  
+  --color-background-info: var(--color-background-info-default);
+  
+  --color-background-success: var(--color-background-success-default);
+  
+  --color-background-attention: var(--color-background-attention-default);
+  
+  --color-background-warning: var(--color-background-warning-default);
+  
+  --color-background-critical: var(--color-background-critical-default);
+  
+  /* Border */
+  --color-border: var(--color-border-default-default);
+  
+  --color-border-inverse: var(--color-border-inverse-default);
+  
+  --color-border-selected: var(--color-border-selected-default);
+  
+  --color-border-warning: var(--color-border-warning-default);
+  
+  /* Icon */
+  --color-icon: var(--color-icon-default-default);
+  
+  --color-icon-inverse: var(--color-icon-inverse-default);
+  --color-icon-accent: var(--color-icon-accent-default);
+  --color-icon-selected: var(--color-icon-selected-default);
+  --color-icon-success: var(--color-icon-success-default);
+  --color-icon-info: var(--color-icon-info-default);
+  --color-icon-attention: var(--color-icon-attention-default);
+  --color-icon-warning: var(--color-icon-warning-default);
+  --color-icon-critical: var(--color-icon-critical-default);
+
+  /* Spacing */
+  --spacing-1\.25: 5px;
+  --spacing-18: 4.5rem;
+  --spacing-128: 32rem;
+
+  /* Border Radius */
+  --radius-xl: 0.625rem;
+  --radius-2xl: 12px;
+
+  /* Box Shadow */
+  --shadow-sm:  0 2px 20px 0 rgba(10, 10, 10, 0.04);
+  --shadow-lg:  0 8px 30px 0 rgba(10, 10, 10, 0.12);
+  --shadow-xl:  0 8px 28px -6px rgba(10, 10, 10, 0.12), 0 18px 88px -4px rgba(10, 10, 10, 0.14);
+  --shadow-active: 0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--color-background-accent-default, var(--color-positive-50)));
+  --shadow-button-default: 0 2px 6px -1px rgba(11, 11, 16, 0.04), 0 -2px 4px 0 rgba(11, 11, 16, 0.04) inset;
+  --shadow-button-primary: 0 -4px 4px 0 rgba(11, 11, 16, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.16) inset, 0 2px 4px -1px rgba(11, 11, 16, 0.08);
+  --shadow-button-pressed: 0 2px 6px 0 rgba(11, 11, 16, 0.16) inset, 0 -2px 5px -2px rgba(255, 255, 255, 0.25) inset;
+  --shadow-button-dark-pressed: 0 4px 4px -1px rgba(11, 11, 16, 0.16) inset;
+  --shadow-avatar: 0 0 0 1px var(--color-border-default-default) inset;
+  --shadow-avatar-inverse: 0 0 0 1px var(--color-border-inverse-default) inset;
+  --shadow-shortcut: 0 1px 0 0 var(--color-border-default-secondary);
+  --shadow-shortcut-inverse: 0 1px 0 0 var(--color-border-inverse-secondary);
+
+  /* Letter Spacing (tracking) */
+  --tracking-tightest: -0.29px; /* -1.2% (text-2xl) */
+  --tracking-tighter: -0.24px; /* -1.2% (text-xl) */
+  --tracking-tight: -0.16px; /* -1% (text-lg) */
+  --tracking-normal: -0.07px; /* -0.5% (text-base) */
+  --tracking-wide: -0.036px; /* -0.3% (text-sm) */
+
+  /* Font Family */
+  --font-sans: Inter, sans-serif;
+  --font-mono: "Geist Mono", CommitMono, ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;
+
+  /* Font Features for Monospace */
+  --font-mono-features: "ss02" on, "ss08" on, "ss09" on;
+
+  /* Typography */
+  --text-2xl: 24px;
+  --text-2xl--line-height: 32px;
+  --text-2xl--letter-spacing: var(--tracking-tightest);
+  
+  --text-xl: 20px;
+  --text-xl--line-height: 28px;
+  --text-xl--letter-spacing: var(--tracking-tighter);
+  
+  --text-lg: 16px;
+  --text-lg--line-height: 24px;
+  --text-lg--letter-spacing: var(--tracking-tight);
+  
+  --text-base: 14px;
+  --text-base--line-height: 20px;
+  --text-base--letter-spacing: var(--tracking-normal);
+  
+  --text-sm: 12px;
+  --text-sm--line-height: 16px;
+  --text-sm--letter-spacing: var(--tracking-wide);
+  
+  --text-xs: 10px;
+  --text-xs--line-height: 12px;
+  --text-xs--letter-spacing: var(--tracking-wide);
+}
+
+@layer theme {
+  .dark {
+    /* Foreground */
+    --color-foreground-default-default: var(--color-white-90);
+    --color-foreground-default-secondary: var(--color-neutral-white-alpha-50);
+    --color-foreground-default-tertiary: var(--color-neutral-white-alpha-40);
+
+    --color-foreground-inverse-default: var(--color-white);
+    --color-foreground-inverse-secondary: var(--color-neutral-white-alpha-70);
+
+    --color-foreground-accent-default: var(--color-accent-60);
+    --color-foreground-accent-default-hover: var(--color-accent-70);
+
+    --color-foreground-selected-default: var(--color-accent-40);
+    --color-foreground-selected-default-hover: var(--color-accent-50);
+
+    --color-foreground-success-default: var(--color-positive-40);
+
+    --color-foreground-info-default: var(--color-info-40);
+
+    --color-foreground-attention-default: var(--color-attention-40);
+
+    --color-foreground-warning-default: var(--color-warning-40);
+
+    --color-foreground-critical-default: var(--color-critical-30);
+
+    --color-foreground-document-pdf: var(--color-documents-pdf-40);
+    --color-foreground-document-xml: var(--color-documents-xml-40);
+    --color-foreground-document-png: var(--color-documents-img-40);
+
+    --color-foreground-status-invalid: var(--color-critical-30);
+    --color-foreground-status-empty: var(--color-neutral-white-alpha-50);
+    --color-foreground-status-draft: var(--color-warning-40);
+    --color-foreground-status-processing: var(--color-attention-40);
+    --color-foreground-status-registered: var(--color-personalization-40);
+    --color-foreground-status-sent: var(--color-info-40);
+    --color-foreground-status-received: var(--color-personalization-sky-50);
+    --color-foreground-status-paid: var(--color-positive-40);
+    --color-foreground-status-completed: var(--color-personalization-aqua-50);
+    --color-foreground-status-error: var(--color-critical-30);
+    --color-foreground-status-rejected: var(--color-personalization-magenta-40);
+    --color-foreground-status-void: var(--color-neutral-white-alpha-70);
+
+    /* Background */
+    --color-background-default-default: var(--color-neutral-90);
+    --color-background-default-secondary: var(--color-neutral-white-alpha-5);
+    --color-background-default-tertiary: var(--color-neutral-white-alpha-10);
+    --color-background-default-tertiary-hover: var(--color-neutral-white-alpha-20);
+    --color-background-default-tertiary-press: var(--color-neutral-white-alpha-30);
+    --color-background-default-bold: var(--color-neutral-100);
+    --color-background-default-accent: var(--color-neutral-white-alpha-10);
+    --color-background-default-negative: var(--color-neutral-100);
+
+    --color-background-selected-default: var(--color-accent-alpha-20);
+    --color-background-selected-default-hover: var(--color-accent-alpha-30);
+    --color-background-selected-default-press: var(--color-accent-alpha-40);
+    --color-background-selected-inverse: var(--color-white-10);
+    --color-background-selected-inverse-hover: var(--color-nwhite-20);
+    --color-background-selected-inverse-press: var(--color-white-30);
+
+    --color-background-accent-default: var(--color-accent-60);
+    --color-background-accent-default-hover: var(--color-accent-70);
+    --color-background-accent-default-press: var(--color-accent-80);
+
+    --color-background-info-default: var(--color-info-alpha-20);
+    --color-background-info-bold: var(--color-info-60);
+
+    --color-background-success-default: var(--color-positive-alpha-20);
+    --color-background-success-bold: var(--color-positive-60);
+
+    --color-background-attention-default: var(--color-attention-alpha-20);
+
+    --color-background-warning-default: var(--color-warning-alpha-20);
+    --color-background-warning-bold: var(--color-warning-60);
+    --color-background-warning-inverse: var(--color-warning-50);
+
+    --color-background-critical-default: var(--color-critical-alpha-20);
+    --color-background-critical-bold: var(--color-critical-50);
+    --color-background-critical-inverse: var(--color-critical-40);
+
+    --color-background-document-pdf: var(--color-documents-pdf-alpha-10);
+    --color-background-document-xml: var(--color-documents-xml-alpha-10);
+    --color-background-document-png: var(--color-documents-img-alpha-10);
+
+    --color-background-status-invalid: var(--color-critical-alpha-20);
+    --color-background-status-empty: var(--color-neutral-white-alpha-5);
+    --color-background-status-draft: var(--color-warning-alpha-20);
+    --color-background-status-processing: var(--color-attention-alpha-20);
+    --color-background-status-registered: var(--color-personalization-alpha-30);
+    --color-background-status-sent: var(--color-info-alpha-30);
+    --color-background-status-received: var(--color-personalization-sky-alpha-20);
+    --color-background-status-paid: var(--color-positive-alpha-30);
+    --color-background-status-completed: var(--color-personalization-aqua-alpha-20);
+    --color-background-status-error: var(--color-critical-alpha-20);
+    --color-background-status-rejected: var(--color-personalization-magenta-alpha-20);
+    --color-background-status-void: var(--color-neutral-white-alpha-10);
+
+    /* Border */
+    --color-border-default-default: var(--color-neutral-white-alpha-10);
+    --color-border-default-secondary: var(--color-neutral-white-alpha-20);
+    --color-border-default-secondary-hover: var(--color-neutral-white-alpha-30);
+    --color-border-default-tertiary: var(--color-neutral-white-alpha-40);
+
+    --color-border-inverse-default: var(--color-neutral-white-alpha-10);
+    --color-border-inverse-secondary: var(--color-neutral-white-alpha-20);
+
+    --color-border-selected-default: var(--color-neutral-white-alpha-5);
+    --color-border-selected-bold: var(--color-neutral-white-alpha-100);
+
+    --color-border-critical-bold: var(--color-critical-40);
+
+    --color-border-warning-default: var(--color-warning-alpha-30);
+    --color-border-warning-bold: var(--color-warning-40);
+
+    --color-border-document-pdf: var(--color-documents-pdf-alpha-20);
+    --color-border-document-xml: var(--color-documents-xml-alpha-20);
+    --color-border-document-png: var(--color-documents-img-alpha-20);
+
+    /* Icon */
+    --color-icon-default-default: var(--color-neutral-white-alpha-50);
+    --color-icon-default-secondary: var(--color-neutral-white-alpha-40);
+    --color-icon-default-bold: var(--color-neutral-white-alpha-90);
+
+    --color-icon-inverse-default: var(--color-neutral-white-alpha-70);
+    --color-icon-inverse-secondary: var(--color-neutral-white-alpha-40);
+    --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
+
+    --color-icon-selected-default: var(--color-positive-50);
+    --color-icon-accent-default: var(--color-white);
+    --color-icon-success-default: var(--color-positive-50);
+
+    --color-icon-info-default: var(--color-info-50);
+
+    --color-icon-attention-default: var(--color-attention-40);
+
+    --color-icon-warning-default: var(--color-warning-50);
+    --color-icon-warning-inverse: var(--color-warning-50);
+
+    --color-icon-critical-default: var(--color-critical-40);
+    --color-icon-critical-inverse: var(--color-critical-40);
+
+    --color-icon-document-pdf: var(--color-documents-pdf-50);
+    --color-icon-document-xml: var(--color-documents-xml-50);
+    --color-icon-document-png: var(--color-documents-img-50);
+
+    --color-icon-status-invalid: var(--color-critical-30);
+    --color-icon-status-empty: var(--color-neutral-white-alpha-30);
+    --color-icon-status-draft: var(--color-warning-40);
+    --color-icon-status-processing: var(--color-attention-40);
+    --color-icon-status-registered: var(--color-personalization-40);
+    --color-icon-status-sent: var(--color-info-40);
+    --color-icon-status-received: var(--color-personalization-sky-40);
+    --color-icon-status-paid: var(--color-positive-40);
+    --color-icon-status-completed: var(--color-personalization-aqua-40);
+    --color-icon-status-error: var(--color-critical-30);
+    --color-icon-status-rejected: var(--color-personalization-magenta-40);
+    --color-icon-status-void: var(--color-neutral-40);
+  }
+}
+
+/* Custom utility for monospace font with OpenType features */
+@utility font-mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: lining-nums tabular-nums;
+  font-feature-settings: var(--font-mono-features);
+}