/**
 * PopUI Tailwind v4 Theme Configuration
 *
 * This file can be imported in any project using:
 * @import "@invopop/popui/tailwind.theme.css";
 *
 * To use the Geist Mono font, add this to your HTML or main CSS file:
 * @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
 *
 * 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-5);
  --color-background-warning-bold: var(--color-warning-60);
  --color-background-warning-inverse: var(--color-warning-50);

  --color-background-critical-default: var(--color-critical-alpha-5);
  --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-accent-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, "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-white-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-accent-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);
}

/* Pulse icon animation */
@keyframes pulse-fill {
  0%, 100% { fill: var(--color-background-default-tertiary); }
  40% { fill: var(--color-accent-50); }
}

.pulse-icon .r0 {
  animation: pulse-fill 1.6s ease-in-out infinite 0s;
}

.pulse-icon .r1 {
  animation: pulse-fill 1.6s ease-in-out infinite 0.16s;
}