/* === Management Theme Variables === */
:root {
  --primary-weak: #E6F7F4;
  --primary-weak-text-heading: #000000;
  --primary-weak-text-base: #171616;
  --primary-weak-text-muted: #3d3d3d;
  --primary-weak-link: #000000;
  --primary-weak-link-hover: #171616;
  --primary-weak-link-active: #000000;
  --primary-weak-border: #BBDEFB;
  --primary-weak-action-fill: #E6F7F4;
  --primary-weak-action-fill-hover: #0D47A1;
  --primary-weak-action-fill-active: #0B3C91;
  --primary-weak-action-text: #ffffff;
  --primary-weak-action-border: #1565C0;

  --primary-soft: #6bebe7;
  --primary-soft-text-heading: #000000;
  --primary-soft-text-base: #171616;
  --primary-soft-text-muted: #3d3d3d;
  --primary-soft-link: #000000;
  --primary-soft-link-hover: #171616;
  --primary-soft-link-active: #000000;
  --primary-soft-border: #90CAF9;
  --primary-soft-action-fill: #6bebe7;
  --primary-soft-action-fill-hover: #0D47A1;
  --primary-soft-action-fill-active: #0B3C91;
  --primary-soft-action-text: #FFFFFF;
  --primary-soft-action-border: #1565C0;

  --primary-base: #087c96;
  --primary-base-text-heading: #FFFFFF;
  --primary-base-text-base: #FFFFFF;
  --primary-base-text-muted: #F5CFD1;
  --primary-base-link: #FFFFFF;
  --primary-base-link-hover: #F5CFD1;
  --primary-base-link-active: #FFFFFF;
  --primary-base-border: #1E88E5;
  --primary-base-action-fill: #087c96;
  --primary-base-action-fill-hover: #1565C0;
  --primary-base-action-fill-active: #0D47A1;
  --primary-base-action-text: #FFFFFF;
  --primary-base-action-border: #1565C0;

  --primary-strong: #125568;
  --primary-strong-text-heading: #FFFFFF;
  --primary-strong-text-base: #FFFFFF;
  --primary-strong-text-muted: #f1b6ba;
  --primary-strong-link: #FFFFFF;
  --primary-strong-link-hover: #f1b6ba;
  --primary-strong-link-active: #FFFFFF;
  --primary-strong-border: #1565C0;
  --primary-strong-action-fill: #125568;
  --primary-strong-action-fill-hover: #0D47A1;
  --primary-strong-action-fill-active: #0B3C91;
  --primary-strong-action-text: #FFFFFF;
  --primary-strong-action-border: #0D47A1;

  --primary-stronger: #04344a;
  --primary-stronger-text-heading: #FFFFFF;
  --primary-stronger-text-base: #FFFFFF;
  --primary-stronger-text-muted: #f1b6ba;
  --primary-stronger-link: #FFFFFF;
  --primary-stronger-link-hover: #79bbdc;
  --primary-stronger-link-active: #FFFFFF;
  --primary-stronger-border: #0B3C91;
  --primary-stronger-action-fill: #04344a;
  --primary-stronger-action-fill-hover: #062A66;
  --primary-stronger-action-fill-active: #041C4D;
  --primary-stronger-action-text: #FFFFFF;
  --primary-stronger-action-border: #062A66;

  --secondary-weak: #f7f2ff;
  --secondary-weak-text-heading: #1b1238;
  --secondary-weak-text-base: #34205a;
  --secondary-weak-text-muted: #7b6a9b;
  --secondary-weak-link: #7d2cf3;
  --secondary-weak-link-hover: #6922d1;
  --secondary-weak-link-active: #551aa1;
  --secondary-weak-border: #ddd1f5;
  --secondary-weak-action-fill: #8629ff;
  --secondary-weak-action-fill-hover: #7323db;
  --secondary-weak-action-fill-active: #5d1cb2;
  --secondary-weak-action-text: #ffffff;
  --secondary-weak-action-border: #8629ff;

  --secondary-soft: #e4d4ff;
  --secondary-soft-text-heading: #1a1030;
  --secondary-soft-text-base: #2c1c4a;
  --secondary-soft-text-muted: #685a92;
  --secondary-soft-link: #7a26e6;
  --secondary-soft-link-hover: #651fc2;
  --secondary-soft-link-active: #4e1897;
  --secondary-soft-border: #c9b4f2;
  --secondary-soft-action-fill: #8b32ff;
  --secondary-soft-action-fill-hover: #7428d9;
  --secondary-soft-action-fill-active: #5d20b1;
  --secondary-soft-action-text: #ffffff;
  --secondary-soft-action-border: #7428d9;

  --secondary-base: #9c27b0;
  --secondary-base-text-heading: #fffdfd;
  --secondary-base-text-base: #f1e7ff;
  --secondary-base-text-muted: #c6b0ea;
  --secondary-base-link: #f6f1ff;
  --secondary-base-link-hover: #e7daff;
  --secondary-base-link-active: #d1b8ff;
  --secondary-base-border: #a56aef;
  --secondary-base-action-fill: #fffdfd;
  --secondary-base-action-fill-hover: #f2eaff;
  --secondary-base-action-fill-active: #e4d2ff;
  --secondary-base-action-text: #8629ff;
  --secondary-base-action-border: #fffdfd;

  --secondary-strong: #6a21cc;
  --secondary-strong-text-heading: #fffdfd;
  --secondary-strong-text-base: #efe7ff;
  --secondary-strong-text-muted: #b89ae8;
  --secondary-strong-link: #f8f5ff;
  --secondary-strong-link-hover: #e8ddff;
  --secondary-strong-link-active: #d2bcff;
  --secondary-strong-border: #9160e8;
  --secondary-strong-action-fill: #fffdfd;
  --secondary-strong-action-fill-hover: #f3ecff;
  --secondary-strong-action-fill-active: #e3d3ff;
  --secondary-strong-action-text: #6a21cc;
  --secondary-strong-action-border: #fffdfd;

  --secondary-stronger: #440e8b;
  --secondary-stronger-text-heading: #fffdfd;
  --secondary-stronger-text-base: #efe6ff;
  --secondary-stronger-text-muted: #b59ae8;
  --secondary-stronger-link: #f8f5ff;
  --secondary-stronger-link-hover: #ecddff;
  --secondary-stronger-link-active: #d4bcff;
  --secondary-stronger-border: #7445c7;
  --secondary-stronger-action-fill: #fffdfd;
  --secondary-stronger-action-fill-hover: #f4eeff;
  --secondary-stronger-action-fill-active: #e5d6ff;
  --secondary-stronger-action-text: #4b178f;
  --secondary-stronger-action-border: #fffdfd;

  --accent-weak: #f0f6ff;
  --accent-weak-text-heading: #182433;
  --accent-weak-text-base: #2d3b4f;
  --accent-weak-text-muted: #6b7a90;
  --accent-weak-link: #2563eb;
  --accent-weak-link-hover: #1d4ed8;
  --accent-weak-link-active: #1e40af;
  --accent-weak-border: #cbd8ea;
  --accent-weak-action-fill: #0b3b82;
  --accent-weak-action-fill-hover: #082f66;
  --accent-weak-action-fill-active: #06264f;
  --accent-weak-action-text: #ffffff;
  --accent-weak-action-border: #0b3b82;

  --accent-soft: #cfe0ff;
  --accent-soft-text-heading: #1b2a40;
  --accent-soft-text-base: #31435f;
  --accent-soft-text-muted: #6f84a8;
  --accent-soft-link: #2563eb;
  --accent-soft-link-hover: #1d4ed8;
  --accent-soft-link-active: #1e40af;
  --accent-soft-border: #7fa7e0;
  --accent-soft-action-fill: #18519a;
  --accent-soft-action-fill-hover: #0f3f82;
  --accent-soft-action-fill-active: #0a3268;
  --accent-soft-action-text: #ffffff;
  --accent-soft-action-border: #18519a;

  --accent-base: #3b82f6;
  --accent-base-text-heading: #ffffff;
  --accent-base-text-base: #eaf2ff;
  --accent-base-text-muted: #b8c9e8;
  --accent-base-link: #f8fbff;
  --accent-base-link-hover: #dce8ff;
  --accent-base-link-active: #bed4ff;
  --accent-base-border: #6c97d9;
  --accent-base-action-fill: #0b3b82;
  --accent-base-action-fill-hover: #082f66;
  --accent-base-action-fill-active: #06264f;
  --accent-base-action-text: #ffffff;
  --accent-base-action-border: #0b3b82;

  --accent-strong: #18519a;
  --accent-strong-text-heading: #fffdfd;
  --accent-strong-text-base: #e7f0ff;
  --accent-strong-text-muted: #afc3e6;
  --accent-strong-link: #f5f9ff;
  --accent-strong-link-hover: #dce9ff;
  --accent-strong-link-active: #bed4ff;
  --accent-strong-border: #4e7bc2;
  --accent-strong-action-fill: #fffdfd;
  --accent-strong-action-fill-hover: #eef5ff;
  --accent-strong-action-fill-active: #dce9ff;
  --accent-strong-action-text: #18519a;
  --accent-strong-action-border: #fffdfd;

  --accent-stronger: #052d61;
  --accent-stronger-text-heading: #fffdfd;
  --accent-stronger-text-base: #e5eeff;
  --accent-stronger-text-muted: #a8bdd9;
  --accent-stronger-link: #f5f9ff;
  --accent-stronger-link-hover: #d9e8ff;
  --accent-stronger-link-active: #b9d1ff;
  --accent-stronger-border: #4d6f9e;
  --accent-stronger-action-fill: #fffdfd;
  --accent-stronger-action-fill-hover: #eef5ff;
  --accent-stronger-action-fill-active: #dce8ff;
  --accent-stronger-action-text: #052d61;
  --accent-stronger-action-border: #fffdfd;

  --neutral-weak: #fafafa;
  --neutral-weak-text-heading: #0f172a;
  --neutral-weak-text-base: #1f2937;
  --neutral-weak-text-muted: #6b7280;
  --neutral-weak-link: #1f2937;
  --neutral-weak-link-hover: #0f172a;
  --neutral-weak-link-active: #0f172a;
  --neutral-weak-border: #e2e8f0;
  --neutral-weak-action-fill: #374151;
  --neutral-weak-action-fill-hover: #1f2937;
  --neutral-weak-action-fill-active: #111827;
  --neutral-weak-action-text: #ffffff;
  --neutral-weak-action-border: #374151;

  --neutral-soft: #f0f0f0;
  --neutral-soft-text-heading: #111827;
  --neutral-soft-text-base: #374151;
  --neutral-soft-text-muted: #71717a;
  --neutral-soft-link: #2563eb;
  --neutral-soft-link-hover: #1d4ed8;
  --neutral-soft-link-active: #1e40af;
  --neutral-soft-border: #d1d5db;
  --neutral-soft-action-fill: #4b5563;
  --neutral-soft-action-fill-hover: #374151;
  --neutral-soft-action-fill-active: #1f2937;
  --neutral-soft-action-text: #ffffff;
  --neutral-soft-action-border: #4b5563;

  --neutral-base: #e5e5e5;
  --neutral-base-text-heading: #111827;
  --neutral-base-text-base: #374151;
  --neutral-base-text-muted: #5f6b7a;
  --neutral-base-link: #1d4ed8;
  --neutral-base-link-hover: #1e40af;
  --neutral-base-link-active: #1e3a8a;
  --neutral-base-border: #cbd5e1;
  --neutral-base-action-fill: #4b5563;
  --neutral-base-action-fill-hover: #374151;
  --neutral-base-action-fill-active: #1f2937;
  --neutral-base-action-text: #ffffff;
  --neutral-base-action-border: #4b5563;

  --neutral-strong: #9ca3af;
  --neutral-strong-text-heading: #111827;
  --neutral-strong-text-base: #374151;
  --neutral-strong-text-muted: #5f6b7a;
  --neutral-strong-link: #1d4ed8;
  --neutral-strong-link-hover: #1e40af;
  --neutral-strong-link-active: #1e3a8a;
  --neutral-strong-border: #6b7280;
  --neutral-strong-action-fill: #4b5563;
  --neutral-strong-action-fill-hover: #374151;
  --neutral-strong-action-fill-active: #1f2937;
  --neutral-strong-action-text: #ffffff;
  --neutral-strong-action-border: #4b5563;

  --neutral-stronger: #4b5563;
  --neutral-stronger-text-heading: #fffdfd;
  --neutral-stronger-text-base: #e5e7eb;
  --neutral-stronger-text-muted: #cbd5e1;
  --neutral-stronger-link: #f5f9ff;
  --neutral-stronger-link-hover: #dce8ff;
  --neutral-stronger-link-active: #bfd3ff;
  --neutral-stronger-border: #8892a0;
  --neutral-stronger-action-fill: #f9fafb;
  --neutral-stronger-action-fill-hover: #e5e7eb;
  --neutral-stronger-action-fill-active: #e5e7eb;
  --neutral-stronger-action-text: #374151;
  --neutral-stronger-action-border: #f9fafb;

  --success-weak: #ffffff;
  --success-weak-text-heading: #05331c;
  --success-weak-text-base: #145c3b;
  --success-weak-text-muted: #739e88;
  --success-weak-link: #1f9d55;
  --success-weak-link-hover: #178248;
  --success-weak-link-active: #126637;
  --success-weak-border: #bfe6d1;
  --success-weak-action-fill: #1f9d55;
  --success-weak-action-fill-hover: #178248;
  --success-weak-action-fill-active: #126637;
  --success-weak-action-text: #ffffff;
  --success-weak-action-border: #178248;

  --success-soft: #eafaf1;
  --success-soft-text-heading: #05331c;
  --success-soft-text-base: #0f5132;
  --success-soft-text-muted: #4e7d65;
  --success-soft-link: #157347;
  --success-soft-link-hover: #0f5132;
  --success-soft-link-active: #0a3f28;
  --success-soft-border: #b7e4c7;
  --success-soft-action-fill: #1f9d55;
  --success-soft-action-fill-hover: #178248;
  --success-soft-action-fill-active: #126637;
  --success-soft-action-text: #ffffff;
  --success-soft-action-border: #1f9d55;

  --success-base: #1f9d55;
  --success-base-text-heading: #f7fff9;
  --success-base-text-base: #e7f9ef;
  --success-base-text-muted: #a4d9bb;
  --success-base-link: #ecfff5;
  --success-base-link-hover: #d7f7e6;
  --success-base-link-active: #bdeed1;
  --success-base-border: #58c184;
  --success-base-action-fill: #0f5132;
  --success-base-action-fill-hover: #0a3f28;
  --success-base-action-fill-active: #05331c;
  --success-base-action-text: #ffffff;
  --success-base-action-border: #0f5132;

  --success-strong: #136f3b;
  --success-strong-text-heading: #fffdfd;
  --success-strong-text-base: #d9f5e7;
  --success-strong-text-muted: #8fd0ae;
  --success-strong-link: #f6fff9;
  --success-strong-link-hover: #d6f5e2;
  --success-strong-link-active: #b4ebcf;
  --success-strong-border: #2a8153;
  --success-strong-action-fill: #ffffff;
  --success-strong-action-fill-hover: #e8faf1;
  --success-strong-action-fill-active: #cceedd;
  --success-strong-action-text: #136f3b;
  --success-strong-action-border: #ffffff;

  --success-stronger: #0b4d29;
  --success-stronger-text-heading: #fffdfd;
  --success-stronger-text-base: #d5f2e3;
  --success-stronger-text-muted: #8cc9ab;
  --success-stronger-link: #f4fff8;
  --success-stronger-link-hover: #d4f5e2;
  --success-stronger-link-active: #afe7c8;
  --success-stronger-border: #21784a;
  --success-stronger-action-fill: #ffffff;
  --success-stronger-action-fill-hover: #e8faf1;
  --success-stronger-action-fill-active: #cdeedd;
  --success-stronger-action-text: #0b4d29;
  --success-stronger-action-border: #ffffff;

  --info-weak: #ffffff;
  --info-weak-text-heading: #1e3a8a;
  --info-weak-text-base: #1e40af;
  --info-weak-text-muted: #475569;
  --info-weak-link: #2563eb;
  --info-weak-link-hover: #1d4ed8;
  --info-weak-link-active: #1e40af;
  --info-weak-border: #bfdbfe;
  --info-weak-action-fill: #2563eb;
  --info-weak-action-fill-hover: #1d4ed8;
  --info-weak-action-fill-active: #1e40af;
  --info-weak-action-text: #ffffff;
  --info-weak-action-border: #2563eb;

  --info-soft: #eff6ff;
  --info-soft-text-heading: #1e3a8a;
  --info-soft-text-base: #1e40af;
  --info-soft-text-muted: #526071;
  --info-soft-link: #2563eb;
  --info-soft-link-hover: #1d4ed8;
  --info-soft-link-active: #1e40af;
  --info-soft-border: #bfd8ff;
  --info-soft-action-fill: #2563eb;
  --info-soft-action-fill-hover: #1d4ed8;
  --info-soft-action-fill-active: #1e40af;
  --info-soft-action-text: #ffffff;
  --info-soft-action-border: #2563eb;

  --info-base: #2563eb;
  --info-base-text-heading: #f8fbff;
  --info-base-text-base: #eaf2ff;
  --info-base-text-muted: #b6c9ee;
  --info-base-link: #f8fbff;
  --info-base-link-hover: #dce8ff;
  --info-base-link-active: #bed4ff;
  --info-base-border: #6b9ef3;
  --info-base-action-fill: #0b3b82;
  --info-base-action-fill-hover: #082f66;
  --info-base-action-fill-active: #06264f;
  --info-base-action-text: #ffffff;
  --info-base-action-border: #0b3b82;

  --info-strong: #1e40af;
  --info-strong-text-heading: #fffdfd;
  --info-strong-text-base: #e5eeff;
  --info-strong-text-muted: #afc3e6;
  --info-strong-link: #f5f9ff;
  --info-strong-link-hover: #d9e8ff;
  --info-strong-link-active: #b9d1ff;
  --info-strong-border: #5d84d1;
  --info-strong-action-fill: #ffffff;
  --info-strong-action-fill-hover: #eef5ff;
  --info-strong-action-fill-active: #dce8ff;
  --info-strong-action-text: #1e40af;
  --info-strong-action-border: #ffffff;

  --info-stronger: #1e3a8a;
  --info-stronger-text-heading: #fffdfd;
  --info-stronger-text-base: #e4edff;
  --info-stronger-text-muted: #aabfe3;
  --info-stronger-link: #f5f9ff;
  --info-stronger-link-hover: #d9e8ff;
  --info-stronger-link-active: #b9d1ff;
  --info-stronger-border: #5478c5;
  --info-stronger-action-fill: #ffffff;
  --info-stronger-action-fill-hover: #eef5ff;
  --info-stronger-action-fill-active: #dce8ff;
  --info-stronger-action-text: #1e3a8a;
  --info-stronger-action-border: #ffffff;

  --error-weak: #ffffff;
  --error-weak-text-heading: #7f1d1d;
  --error-weak-text-base: #b91c1c;
  --error-weak-text-muted: #8f4d4d;
  --error-weak-link: #dc2626;
  --error-weak-link-hover: #b91c1c;
  --error-weak-link-active: #991b1b;
  --error-weak-border: #fecaca;
  --error-weak-action-fill: #ef4444;
  --error-weak-action-fill-hover: #dc2626;
  --error-weak-action-fill-active: #b91c1c;
  --error-weak-action-text: #ffffff;
  --error-weak-action-border: #ef4444;

  --error-soft: #fff1f2;
  --error-soft-text-heading: #7a0d0d;
  --error-soft-text-base: #d01616;
  --error-soft-text-muted: #a94a4a;
  --error-soft-link: #d01616;
  --error-soft-link-hover: #b01313;
  --error-soft-link-active: #8f1010;
  --error-soft-border: #f3b5b5;
  --error-soft-action-fill: #d01616;
  --error-soft-action-fill-hover: #b01313;
  --error-soft-action-fill-active: #8f1010;
  --error-soft-action-text: #ffffff;
  --error-soft-action-border: #d01616;

  --error-base: #dc2626;
  --error-base-text-heading: #fff8f8;
  --error-base-text-base: #ffe5e5;
  --error-base-text-muted: #ffb8b8;
  --error-base-link: #fff5f5;
  --error-base-link-hover: #ffe3e3;
  --error-base-link-active: #ffc4c4;
  --error-base-border: #f87171;
  --error-base-action-fill: #7f1d1d;
  --error-base-action-fill-hover: #6b1515;
  --error-base-action-fill-active: #520f0f;
  --error-base-action-text: #ffffff;
  --error-base-action-border: #7f1d1d;

  --error-strong: #991b1b;
  --error-strong-text-heading: #fffdfd;
  --error-strong-text-base: #ffd9d9;
  --error-strong-text-muted: #ff9e9e;
  --error-strong-link: #fff1f1;
  --error-strong-link-hover: #ffe0e0;
  --error-strong-link-active: #ffcaca;
  --error-strong-border: #c24141;
  --error-strong-action-fill: #ffffff;
  --error-strong-action-fill-hover: #ffeded;
  --error-strong-action-fill-active: #ffd5d5;
  --error-strong-action-text: #991b1b;
  --error-strong-action-border: #ffffff;

  --error-stronger: #7f1d1d;
  --error-stronger-text-heading: #fffdfd;
  --error-stronger-text-base: #ffd6d6;
  --error-stronger-text-muted: #ff9a9a;
  --error-stronger-link: #fff1f1;
  --error-stronger-link-hover: #ffe0e0;
  --error-stronger-link-active: #ffcaca;
  --error-stronger-border: #a63333;
  --error-stronger-action-fill: #ffffff;
  --error-stronger-action-fill-hover: #ffecec;
  --error-stronger-action-fill-active: #ffd4d4;
  --error-stronger-action-text: #7f1d1d;
  --error-stronger-action-border: #ffffff;

  --warning-weak: #ffffff;
  --warning-weak-text-heading: #3a2200;
  --warning-weak-text-base: #6b3f00;
  --warning-weak-text-muted: #8a6a35;
  --warning-weak-link: #e68a00;
  --warning-weak-link-hover: #cc7800;
  --warning-weak-link-active: #a66000;
  --warning-weak-border: #ffe2b8;
  --warning-weak-action-fill: #ff9f1a;
  --warning-weak-action-fill-hover: #e68a00;
  --warning-weak-action-fill-active: #bf7000;
  --warning-weak-action-text: #ffffff;
  --warning-weak-action-border: #ff9f1a;

  --warning-soft: #fff7e1;
  --warning-soft-text-heading: #5a2e00;
  --warning-soft-text-base: #7c4500;
  --warning-soft-text-muted: #8f6c2f;
  --warning-soft-link: #e68a00;
  --warning-soft-link-hover: #cc7800;
  --warning-soft-link-active: #a66000;
  --warning-soft-border: #f5d7a1;
  --warning-soft-action-fill: #f59e0b;
  --warning-soft-action-fill-hover: #d97706;
  --warning-soft-action-fill-active: #b45309;
  --warning-soft-action-text: #ffffff;
  --warning-soft-action-border: #f59e0b;

  --warning-base: #ffb020;
  --warning-base-text-heading: #fff9ef;
  --warning-base-text-base: #fff3d9;
  --warning-base-text-muted: #ffd27a;
  --warning-base-link: #fff4e0;
  --warning-base-link-hover: #ffe8c2;
  --warning-base-link-active: #ffd699;
  --warning-base-border: #f5c56e;
  --warning-base-action-fill: #7a4200;
  --warning-base-action-fill-hover: #5e3200;
  --warning-base-action-fill-active: #422300;
  --warning-base-action-text: #ffffff;
  --warning-base-action-border: #7a4200;

  --warning-strong: #d97706;
  --warning-strong-text-heading: #fffdf8;
  --warning-strong-text-base: #fff4e6;
  --warning-strong-text-muted: #ffd08a;
  --warning-strong-link: #fff3e0;
  --warning-strong-link-hover: #ffe2b8;
  --warning-strong-link-active: #ffd08a;
  --warning-strong-border: #c9983a;
  --warning-strong-action-fill: #ffffff;
  --warning-strong-action-fill-hover: #fff1db;
  --warning-strong-action-fill-active: #ffe0b3;
  --warning-strong-action-text: #d97706;
  --warning-strong-action-border: #ffffff;

  --warning-stronger: #a16207;
  --warning-stronger-text-heading: #fffdf8;
  --warning-stronger-text-base: #fff2dd;
  --warning-stronger-text-muted: #f5c56e;
  --warning-stronger-link: #fff3e0;
  --warning-stronger-link-hover: #ffe2b8;
  --warning-stronger-link-active: #ffd08a;
  --warning-stronger-border: #d9a441;
  --warning-stronger-action-fill: #ffffff;
  --warning-stronger-action-fill-hover: #fff1db;
  --warning-stronger-action-fill-active: #ffe0b3;
  --warning-stronger-action-text: #a16207;
  --warning-stronger-action-border: #ffffff;

  --header: #ffffff;
  --header-text-heading: #0f172a;
  --header-text-base: #374151;
  --header-text-muted: #94a3b8;
  --header-link: #1e293b;
  --header-link-hover: #0f172a;
  --header-link-active: #000000;
  --header-border: #e2e8f0;
  --header-action-fill: #312e81;
  --header-action-fill-hover: #312e81;
  --header-action-fill-active: #4338ca;
  --header-action-text: #ffffff;
  --header-action-border: #1e1b4b;

  --footer: #111827;
  --footer-text-heading: #fffdfd;
  --footer-text-base: #e5e7eb;
  --footer-text-muted: #9ca3af;
  --footer-link: #f8fafc;
  --footer-link-hover: #cbd5e1;
  --footer-link-active: #cbd5e1;
  --footer-border: #374151;
  --footer-action-fill: #ffffff;
  --footer-action-fill-hover: #e5e7eb;
  --footer-action-fill-active: #cbd5e1;
  --footer-action-text: #111827;
  --footer-action-border: #ffffff;

  --default: #ffffff;
  --default-text-heading: #111827;
  --default-text-base: #374151;
  --default-text-muted: #8f8f8f;
  --default-link: #008080;
  --default-link-hover: #008080;
  --default-link-active: #006e70;
  --default-border: #dfe0e1;
  --default-action-fill: #008080;
  --default-action-fill-hover: #006e70;
  --default-action-fill-active: #005a5c;
  --default-action-text: #ffffff;
  --default-action-border: #226d54;

}
/* === Management Background Utility Classes === */
.bg-primary-weak {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.hover\:bg-primary-weak:hover {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.active\:bg-primary-weak:active {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.surface-primary-weak {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.hover\:surface-primary-weak:hover {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.active\:surface-primary-weak:active {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.bg-primary-weak\/10 {
  background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
}

.hover\:bg-primary-weak\/10:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
}

.active\:bg-primary-weak\/10:active {
  background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
}

.bg-primary-weak\/30 {
  background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
}

.hover\:bg-primary-weak\/30:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
}

.active\:bg-primary-weak\/30:active {
  background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
}

.bg-primary-weak\/50 {
  background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
}

.hover\:bg-primary-weak\/50:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
}

.active\:bg-primary-weak\/50:active {
  background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
}

.bg-primary-weak\/70 {
  background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
}

.hover\:bg-primary-weak\/70:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
}

.active\:bg-primary-weak\/70:active {
  background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
}

.bg-primary-weak\/90 {
  background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
}

.hover\:bg-primary-weak\/90:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
}

.active\:bg-primary-weak\/90:active {
  background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
}

.bg-primary-soft {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.hover\:bg-primary-soft:hover {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.active\:bg-primary-soft:active {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.surface-primary-soft {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.hover\:surface-primary-soft:hover {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.active\:surface-primary-soft:active {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.bg-primary-soft\/10 {
  background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
}

.hover\:bg-primary-soft\/10:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
}

.active\:bg-primary-soft\/10:active {
  background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
}

.bg-primary-soft\/30 {
  background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.hover\:bg-primary-soft\/30:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.active\:bg-primary-soft\/30:active {
  background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.bg-primary-soft\/50 {
  background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.hover\:bg-primary-soft\/50:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.active\:bg-primary-soft\/50:active {
  background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.bg-primary-soft\/70 {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.hover\:bg-primary-soft\/70:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.active\:bg-primary-soft\/70:active {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.bg-primary-soft\/90 {
  background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
}

.hover\:bg-primary-soft\/90:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
}

.active\:bg-primary-soft\/90:active {
  background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
}

.bg-primary-base {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.hover\:bg-primary-base:hover {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.active\:bg-primary-base:active {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.surface-primary-base {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.hover\:surface-primary-base:hover {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.active\:surface-primary-base:active {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.bg-primary-base\/10 {
  background-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
}

.hover\:bg-primary-base\/10:hover {
  background-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
}

.active\:bg-primary-base\/10:active {
  background-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
}

.bg-primary-base\/30 {
  background-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
}

.hover\:bg-primary-base\/30:hover {
  background-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
}

.active\:bg-primary-base\/30:active {
  background-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
}

.bg-primary-base\/50 {
  background-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
}

.hover\:bg-primary-base\/50:hover {
  background-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
}

.active\:bg-primary-base\/50:active {
  background-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
}

.bg-primary-base\/70 {
  background-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
}

.hover\:bg-primary-base\/70:hover {
  background-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
}

.active\:bg-primary-base\/70:active {
  background-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
}

.bg-primary-base\/90 {
  background-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
}

.hover\:bg-primary-base\/90:hover {
  background-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
}

.active\:bg-primary-base\/90:active {
  background-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
}

.bg-primary-strong {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.hover\:bg-primary-strong:hover {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.active\:bg-primary-strong:active {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.surface-primary-strong {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.hover\:surface-primary-strong:hover {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.active\:surface-primary-strong:active {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.bg-primary-strong\/10 {
  background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
}

.hover\:bg-primary-strong\/10:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
}

.active\:bg-primary-strong\/10:active {
  background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
}

.bg-primary-strong\/30 {
  background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
}

.hover\:bg-primary-strong\/30:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
}

.active\:bg-primary-strong\/30:active {
  background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
}

.bg-primary-strong\/50 {
  background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.hover\:bg-primary-strong\/50:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.active\:bg-primary-strong\/50:active {
  background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.bg-primary-strong\/70 {
  background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
}

.hover\:bg-primary-strong\/70:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
}

.active\:bg-primary-strong\/70:active {
  background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
}

.bg-primary-strong\/90 {
  background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
}

.hover\:bg-primary-strong\/90:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
}

.active\:bg-primary-strong\/90:active {
  background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
}

.bg-primary-stronger {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.hover\:bg-primary-stronger:hover {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.active\:bg-primary-stronger:active {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.surface-primary-stronger {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.hover\:surface-primary-stronger:hover {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.active\:surface-primary-stronger:active {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.bg-primary-stronger\/10 {
  background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
}

.hover\:bg-primary-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
}

.active\:bg-primary-stronger\/10:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
}

.bg-primary-stronger\/30 {
  background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
}

.hover\:bg-primary-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
}

.active\:bg-primary-stronger\/30:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
}

.bg-primary-stronger\/50 {
  background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
}

.hover\:bg-primary-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
}

.active\:bg-primary-stronger\/50:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
}

.bg-primary-stronger\/70 {
  background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
}

.hover\:bg-primary-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
}

.active\:bg-primary-stronger\/70:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
}

.bg-primary-stronger\/90 {
  background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
}

.hover\:bg-primary-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
}

.active\:bg-primary-stronger\/90:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
}

.bg-secondary-weak {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.hover\:bg-secondary-weak:hover {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.active\:bg-secondary-weak:active {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.surface-secondary-weak {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.hover\:surface-secondary-weak:hover {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.active\:surface-secondary-weak:active {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.bg-secondary-weak\/10 {
  background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
}

.hover\:bg-secondary-weak\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
}

.active\:bg-secondary-weak\/10:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
}

.bg-secondary-weak\/30 {
  background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
}

.hover\:bg-secondary-weak\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
}

.active\:bg-secondary-weak\/30:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
}

.bg-secondary-weak\/50 {
  background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
}

.hover\:bg-secondary-weak\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
}

.active\:bg-secondary-weak\/50:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
}

.bg-secondary-weak\/70 {
  background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
}

.hover\:bg-secondary-weak\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
}

.active\:bg-secondary-weak\/70:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
}

.bg-secondary-weak\/90 {
  background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
}

.hover\:bg-secondary-weak\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
}

.active\:bg-secondary-weak\/90:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
}

.bg-secondary-soft {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.hover\:bg-secondary-soft:hover {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.active\:bg-secondary-soft:active {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.surface-secondary-soft {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.hover\:surface-secondary-soft:hover {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.active\:surface-secondary-soft:active {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.bg-secondary-soft\/10 {
  background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
}

.hover\:bg-secondary-soft\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
}

.active\:bg-secondary-soft\/10:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
}

.bg-secondary-soft\/30 {
  background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
}

.hover\:bg-secondary-soft\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
}

.active\:bg-secondary-soft\/30:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
}

.bg-secondary-soft\/50 {
  background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
}

.hover\:bg-secondary-soft\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
}

.active\:bg-secondary-soft\/50:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
}

.bg-secondary-soft\/70 {
  background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
}

.hover\:bg-secondary-soft\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
}

.active\:bg-secondary-soft\/70:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
}

.bg-secondary-soft\/90 {
  background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
}

.hover\:bg-secondary-soft\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
}

.active\:bg-secondary-soft\/90:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
}

.bg-secondary-base {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.hover\:bg-secondary-base:hover {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.active\:bg-secondary-base:active {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.surface-secondary-base {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.hover\:surface-secondary-base:hover {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.active\:surface-secondary-base:active {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.bg-secondary-base\/10 {
  background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
}

.hover\:bg-secondary-base\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
}

.active\:bg-secondary-base\/10:active {
  background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
}

.bg-secondary-base\/30 {
  background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
}

.hover\:bg-secondary-base\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
}

.active\:bg-secondary-base\/30:active {
  background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
}

.bg-secondary-base\/50 {
  background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
}

.hover\:bg-secondary-base\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
}

.active\:bg-secondary-base\/50:active {
  background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
}

.bg-secondary-base\/70 {
  background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
}

.hover\:bg-secondary-base\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
}

.active\:bg-secondary-base\/70:active {
  background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
}

.bg-secondary-base\/90 {
  background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
}

.hover\:bg-secondary-base\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
}

.active\:bg-secondary-base\/90:active {
  background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
}

.bg-secondary-strong {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.hover\:bg-secondary-strong:hover {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.active\:bg-secondary-strong:active {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.surface-secondary-strong {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.hover\:surface-secondary-strong:hover {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.active\:surface-secondary-strong:active {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.bg-secondary-strong\/10 {
  background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
}

.hover\:bg-secondary-strong\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
}

.active\:bg-secondary-strong\/10:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
}

.bg-secondary-strong\/30 {
  background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
}

.hover\:bg-secondary-strong\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
}

.active\:bg-secondary-strong\/30:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
}

.bg-secondary-strong\/50 {
  background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
}

.hover\:bg-secondary-strong\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
}

.active\:bg-secondary-strong\/50:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
}

.bg-secondary-strong\/70 {
  background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
}

.hover\:bg-secondary-strong\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
}

.active\:bg-secondary-strong\/70:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
}

.bg-secondary-strong\/90 {
  background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
}

.hover\:bg-secondary-strong\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
}

.active\:bg-secondary-strong\/90:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
}

.bg-secondary-stronger {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.hover\:bg-secondary-stronger:hover {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.active\:bg-secondary-stronger:active {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.surface-secondary-stronger {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.hover\:surface-secondary-stronger:hover {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.active\:surface-secondary-stronger:active {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.bg-secondary-stronger\/10 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
}

.hover\:bg-secondary-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
}

.active\:bg-secondary-stronger\/10:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
}

.bg-secondary-stronger\/30 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
}

.hover\:bg-secondary-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
}

.active\:bg-secondary-stronger\/30:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
}

.bg-secondary-stronger\/50 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
}

.hover\:bg-secondary-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
}

.active\:bg-secondary-stronger\/50:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
}

.bg-secondary-stronger\/70 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
}

.hover\:bg-secondary-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
}

.active\:bg-secondary-stronger\/70:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
}

.bg-secondary-stronger\/90 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
}

.hover\:bg-secondary-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
}

.active\:bg-secondary-stronger\/90:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
}

.bg-accent-weak {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.hover\:bg-accent-weak:hover {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.active\:bg-accent-weak:active {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.surface-accent-weak {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.hover\:surface-accent-weak:hover {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.active\:surface-accent-weak:active {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.bg-accent-weak\/10 {
  background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
}

.hover\:bg-accent-weak\/10:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
}

.active\:bg-accent-weak\/10:active {
  background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
}

.bg-accent-weak\/30 {
  background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
}

.hover\:bg-accent-weak\/30:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
}

.active\:bg-accent-weak\/30:active {
  background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
}

.bg-accent-weak\/50 {
  background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
}

.hover\:bg-accent-weak\/50:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
}

.active\:bg-accent-weak\/50:active {
  background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
}

.bg-accent-weak\/70 {
  background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}

.hover\:bg-accent-weak\/70:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}

.active\:bg-accent-weak\/70:active {
  background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}

.bg-accent-weak\/90 {
  background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
}

.hover\:bg-accent-weak\/90:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
}

.active\:bg-accent-weak\/90:active {
  background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
}

.bg-accent-soft {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.hover\:bg-accent-soft:hover {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.active\:bg-accent-soft:active {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.surface-accent-soft {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.hover\:surface-accent-soft:hover {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.active\:surface-accent-soft:active {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.bg-accent-soft\/10 {
  background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
}

.hover\:bg-accent-soft\/10:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
}

.active\:bg-accent-soft\/10:active {
  background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
}

.bg-accent-soft\/30 {
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.hover\:bg-accent-soft\/30:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.active\:bg-accent-soft\/30:active {
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.bg-accent-soft\/50 {
  background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.hover\:bg-accent-soft\/50:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.active\:bg-accent-soft\/50:active {
  background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.bg-accent-soft\/70 {
  background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.hover\:bg-accent-soft\/70:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.active\:bg-accent-soft\/70:active {
  background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.bg-accent-soft\/90 {
  background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.hover\:bg-accent-soft\/90:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.active\:bg-accent-soft\/90:active {
  background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.bg-accent-base {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.hover\:bg-accent-base:hover {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.active\:bg-accent-base:active {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.surface-accent-base {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.hover\:surface-accent-base:hover {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.active\:surface-accent-base:active {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.bg-accent-base\/10 {
  background-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.hover\:bg-accent-base\/10:hover {
  background-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.active\:bg-accent-base\/10:active {
  background-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.bg-accent-base\/30 {
  background-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.hover\:bg-accent-base\/30:hover {
  background-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.active\:bg-accent-base\/30:active {
  background-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.bg-accent-base\/50 {
  background-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

.hover\:bg-accent-base\/50:hover {
  background-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

.active\:bg-accent-base\/50:active {
  background-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

.bg-accent-base\/70 {
  background-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
}

.hover\:bg-accent-base\/70:hover {
  background-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
}

.active\:bg-accent-base\/70:active {
  background-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
}

.bg-accent-base\/90 {
  background-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
}

.hover\:bg-accent-base\/90:hover {
  background-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
}

.active\:bg-accent-base\/90:active {
  background-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
}

.bg-accent-strong {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.hover\:bg-accent-strong:hover {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.active\:bg-accent-strong:active {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.surface-accent-strong {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.hover\:surface-accent-strong:hover {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.active\:surface-accent-strong:active {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.bg-accent-strong\/10 {
  background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.hover\:bg-accent-strong\/10:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.active\:bg-accent-strong\/10:active {
  background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.bg-accent-strong\/30 {
  background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.hover\:bg-accent-strong\/30:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.active\:bg-accent-strong\/30:active {
  background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.bg-accent-strong\/50 {
  background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
}

.hover\:bg-accent-strong\/50:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
}

.active\:bg-accent-strong\/50:active {
  background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
}

.bg-accent-strong\/70 {
  background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.hover\:bg-accent-strong\/70:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.active\:bg-accent-strong\/70:active {
  background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.bg-accent-strong\/90 {
  background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
}

.hover\:bg-accent-strong\/90:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
}

.active\:bg-accent-strong\/90:active {
  background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
}

.bg-accent-stronger {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.hover\:bg-accent-stronger:hover {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.active\:bg-accent-stronger:active {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.surface-accent-stronger {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.hover\:surface-accent-stronger:hover {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.active\:surface-accent-stronger:active {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.bg-accent-stronger\/10 {
  background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
}

.hover\:bg-accent-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
}

.active\:bg-accent-stronger\/10:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
}

.bg-accent-stronger\/30 {
  background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
}

.hover\:bg-accent-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
}

.active\:bg-accent-stronger\/30:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
}

.bg-accent-stronger\/50 {
  background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
}

.hover\:bg-accent-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
}

.active\:bg-accent-stronger\/50:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
}

.bg-accent-stronger\/70 {
  background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
}

.hover\:bg-accent-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
}

.active\:bg-accent-stronger\/70:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
}

.bg-accent-stronger\/90 {
  background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
}

.hover\:bg-accent-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
}

.active\:bg-accent-stronger\/90:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
}

.bg-neutral-weak {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.hover\:bg-neutral-weak:hover {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.active\:bg-neutral-weak:active {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.surface-neutral-weak {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.hover\:surface-neutral-weak:hover {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.active\:surface-neutral-weak:active {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.bg-neutral-weak\/10 {
  background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
}

.hover\:bg-neutral-weak\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
}

.active\:bg-neutral-weak\/10:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
}

.bg-neutral-weak\/30 {
  background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
}

.hover\:bg-neutral-weak\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
}

.active\:bg-neutral-weak\/30:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
}

.bg-neutral-weak\/50 {
  background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
}

.hover\:bg-neutral-weak\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
}

.active\:bg-neutral-weak\/50:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
}

.bg-neutral-weak\/70 {
  background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
}

.hover\:bg-neutral-weak\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
}

.active\:bg-neutral-weak\/70:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
}

.bg-neutral-weak\/90 {
  background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
}

.hover\:bg-neutral-weak\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
}

.active\:bg-neutral-weak\/90:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
}

.bg-neutral-soft {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.hover\:bg-neutral-soft:hover {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.active\:bg-neutral-soft:active {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.surface-neutral-soft {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.hover\:surface-neutral-soft:hover {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.active\:surface-neutral-soft:active {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.bg-neutral-soft\/10 {
  background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
}

.hover\:bg-neutral-soft\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
}

.active\:bg-neutral-soft\/10:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
}

.bg-neutral-soft\/30 {
  background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
}

.hover\:bg-neutral-soft\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
}

.active\:bg-neutral-soft\/30:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
}

.bg-neutral-soft\/50 {
  background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
}

.hover\:bg-neutral-soft\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
}

.active\:bg-neutral-soft\/50:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
}

.bg-neutral-soft\/70 {
  background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.hover\:bg-neutral-soft\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.active\:bg-neutral-soft\/70:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.bg-neutral-soft\/90 {
  background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
}

.hover\:bg-neutral-soft\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
}

.active\:bg-neutral-soft\/90:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
}

.bg-neutral-base {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.hover\:bg-neutral-base:hover {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.active\:bg-neutral-base:active {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.surface-neutral-base {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.hover\:surface-neutral-base:hover {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.active\:surface-neutral-base:active {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.bg-neutral-base\/10 {
  background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
}

.hover\:bg-neutral-base\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
}

.active\:bg-neutral-base\/10:active {
  background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
}

.bg-neutral-base\/30 {
  background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
}

.hover\:bg-neutral-base\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
}

.active\:bg-neutral-base\/30:active {
  background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
}

.bg-neutral-base\/50 {
  background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
}

.hover\:bg-neutral-base\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
}

.active\:bg-neutral-base\/50:active {
  background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
}

.bg-neutral-base\/70 {
  background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
}

.hover\:bg-neutral-base\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
}

.active\:bg-neutral-base\/70:active {
  background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
}

.bg-neutral-base\/90 {
  background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
}

.hover\:bg-neutral-base\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
}

.active\:bg-neutral-base\/90:active {
  background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
}

.bg-neutral-strong {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.hover\:bg-neutral-strong:hover {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.active\:bg-neutral-strong:active {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.surface-neutral-strong {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.hover\:surface-neutral-strong:hover {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.active\:surface-neutral-strong:active {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.bg-neutral-strong\/10 {
  background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
}

.hover\:bg-neutral-strong\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
}

.active\:bg-neutral-strong\/10:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
}

.bg-neutral-strong\/30 {
  background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
}

.hover\:bg-neutral-strong\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
}

.active\:bg-neutral-strong\/30:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
}

.bg-neutral-strong\/50 {
  background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
}

.hover\:bg-neutral-strong\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
}

.active\:bg-neutral-strong\/50:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
}

.bg-neutral-strong\/70 {
  background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
}

.hover\:bg-neutral-strong\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
}

.active\:bg-neutral-strong\/70:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
}

.bg-neutral-strong\/90 {
  background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
}

.hover\:bg-neutral-strong\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
}

.active\:bg-neutral-strong\/90:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
}

.bg-neutral-stronger {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.hover\:bg-neutral-stronger:hover {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.active\:bg-neutral-stronger:active {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.surface-neutral-stronger {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.hover\:surface-neutral-stronger:hover {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.active\:surface-neutral-stronger:active {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.bg-neutral-stronger\/10 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
}

.hover\:bg-neutral-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
}

.active\:bg-neutral-stronger\/10:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
}

.bg-neutral-stronger\/30 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
}

.hover\:bg-neutral-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
}

.active\:bg-neutral-stronger\/30:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
}

.bg-neutral-stronger\/50 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
}

.hover\:bg-neutral-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
}

.active\:bg-neutral-stronger\/50:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
}

.bg-neutral-stronger\/70 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
}

.hover\:bg-neutral-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
}

.active\:bg-neutral-stronger\/70:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
}

.bg-neutral-stronger\/90 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
}

.hover\:bg-neutral-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
}

.active\:bg-neutral-stronger\/90:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
}

.bg-success-weak {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.hover\:bg-success-weak:hover {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.active\:bg-success-weak:active {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.surface-success-weak {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.hover\:surface-success-weak:hover {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.active\:surface-success-weak:active {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.bg-success-weak\/10 {
  background-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
}

.hover\:bg-success-weak\/10:hover {
  background-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
}

.active\:bg-success-weak\/10:active {
  background-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
}

.bg-success-weak\/30 {
  background-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
}

.hover\:bg-success-weak\/30:hover {
  background-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
}

.active\:bg-success-weak\/30:active {
  background-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
}

.bg-success-weak\/50 {
  background-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
}

.hover\:bg-success-weak\/50:hover {
  background-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
}

.active\:bg-success-weak\/50:active {
  background-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
}

.bg-success-weak\/70 {
  background-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
}

.hover\:bg-success-weak\/70:hover {
  background-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
}

.active\:bg-success-weak\/70:active {
  background-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
}

.bg-success-weak\/90 {
  background-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
}

.hover\:bg-success-weak\/90:hover {
  background-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
}

.active\:bg-success-weak\/90:active {
  background-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
}

.bg-success-soft {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.hover\:bg-success-soft:hover {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.active\:bg-success-soft:active {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.surface-success-soft {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.hover\:surface-success-soft:hover {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.active\:surface-success-soft:active {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.bg-success-soft\/10 {
  background-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
}

.hover\:bg-success-soft\/10:hover {
  background-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
}

.active\:bg-success-soft\/10:active {
  background-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
}

.bg-success-soft\/30 {
  background-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
}

.hover\:bg-success-soft\/30:hover {
  background-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
}

.active\:bg-success-soft\/30:active {
  background-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
}

.bg-success-soft\/50 {
  background-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
}

.hover\:bg-success-soft\/50:hover {
  background-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
}

.active\:bg-success-soft\/50:active {
  background-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
}

.bg-success-soft\/70 {
  background-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
}

.hover\:bg-success-soft\/70:hover {
  background-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
}

.active\:bg-success-soft\/70:active {
  background-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
}

.bg-success-soft\/90 {
  background-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
}

.hover\:bg-success-soft\/90:hover {
  background-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
}

.active\:bg-success-soft\/90:active {
  background-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
}

.bg-success-base {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.hover\:bg-success-base:hover {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.active\:bg-success-base:active {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.surface-success-base {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.hover\:surface-success-base:hover {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.active\:surface-success-base:active {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.bg-success-base\/10 {
  background-color: color-mix(in srgb, var(--success-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent);
}

.hover\:bg-success-base\/10:hover {
  background-color: color-mix(in srgb, var(--success-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent);
}

.active\:bg-success-base\/10:active {
  background-color: color-mix(in srgb, var(--success-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent);
}

.bg-success-base\/30 {
  background-color: color-mix(in srgb, var(--success-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent);
}

.hover\:bg-success-base\/30:hover {
  background-color: color-mix(in srgb, var(--success-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent);
}

.active\:bg-success-base\/30:active {
  background-color: color-mix(in srgb, var(--success-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent);
}

.bg-success-base\/50 {
  background-color: color-mix(in srgb, var(--success-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent);
}

.hover\:bg-success-base\/50:hover {
  background-color: color-mix(in srgb, var(--success-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent);
}

.active\:bg-success-base\/50:active {
  background-color: color-mix(in srgb, var(--success-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent);
}

.bg-success-base\/70 {
  background-color: color-mix(in srgb, var(--success-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent);
}

.hover\:bg-success-base\/70:hover {
  background-color: color-mix(in srgb, var(--success-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent);
}

.active\:bg-success-base\/70:active {
  background-color: color-mix(in srgb, var(--success-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent);
}

.bg-success-base\/90 {
  background-color: color-mix(in srgb, var(--success-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent);
}

.hover\:bg-success-base\/90:hover {
  background-color: color-mix(in srgb, var(--success-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent);
}

.active\:bg-success-base\/90:active {
  background-color: color-mix(in srgb, var(--success-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent);
}

.bg-success-strong {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.hover\:bg-success-strong:hover {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.active\:bg-success-strong:active {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.surface-success-strong {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.hover\:surface-success-strong:hover {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.active\:surface-success-strong:active {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.bg-success-strong\/10 {
  background-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
}

.hover\:bg-success-strong\/10:hover {
  background-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
}

.active\:bg-success-strong\/10:active {
  background-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
}

.bg-success-strong\/30 {
  background-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
}

.hover\:bg-success-strong\/30:hover {
  background-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
}

.active\:bg-success-strong\/30:active {
  background-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
}

.bg-success-strong\/50 {
  background-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
}

.hover\:bg-success-strong\/50:hover {
  background-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
}

.active\:bg-success-strong\/50:active {
  background-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
}

.bg-success-strong\/70 {
  background-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
}

.hover\:bg-success-strong\/70:hover {
  background-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
}

.active\:bg-success-strong\/70:active {
  background-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
}

.bg-success-strong\/90 {
  background-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
}

.hover\:bg-success-strong\/90:hover {
  background-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
}

.active\:bg-success-strong\/90:active {
  background-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
}

.bg-success-stronger {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.hover\:bg-success-stronger:hover {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.active\:bg-success-stronger:active {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.surface-success-stronger {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.hover\:surface-success-stronger:hover {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.active\:surface-success-stronger:active {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.bg-success-stronger\/10 {
  background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
}

.hover\:bg-success-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
}

.active\:bg-success-stronger\/10:active {
  background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
}

.bg-success-stronger\/30 {
  background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
}

.hover\:bg-success-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
}

.active\:bg-success-stronger\/30:active {
  background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
}

.bg-success-stronger\/50 {
  background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
}

.hover\:bg-success-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
}

.active\:bg-success-stronger\/50:active {
  background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
}

.bg-success-stronger\/70 {
  background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
}

.hover\:bg-success-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
}

.active\:bg-success-stronger\/70:active {
  background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
}

.bg-success-stronger\/90 {
  background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
}

.hover\:bg-success-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
}

.active\:bg-success-stronger\/90:active {
  background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
}

.bg-info-weak {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.hover\:bg-info-weak:hover {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.active\:bg-info-weak:active {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.surface-info-weak {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.hover\:surface-info-weak:hover {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.active\:surface-info-weak:active {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.bg-info-weak\/10 {
  background-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
}

.hover\:bg-info-weak\/10:hover {
  background-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
}

.active\:bg-info-weak\/10:active {
  background-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
}

.bg-info-weak\/30 {
  background-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
}

.hover\:bg-info-weak\/30:hover {
  background-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
}

.active\:bg-info-weak\/30:active {
  background-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
}

.bg-info-weak\/50 {
  background-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
}

.hover\:bg-info-weak\/50:hover {
  background-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
}

.active\:bg-info-weak\/50:active {
  background-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
}

.bg-info-weak\/70 {
  background-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
}

.hover\:bg-info-weak\/70:hover {
  background-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
}

.active\:bg-info-weak\/70:active {
  background-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
}

.bg-info-weak\/90 {
  background-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
}

.hover\:bg-info-weak\/90:hover {
  background-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
}

.active\:bg-info-weak\/90:active {
  background-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
}

.bg-info-soft {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.hover\:bg-info-soft:hover {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.active\:bg-info-soft:active {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.surface-info-soft {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.hover\:surface-info-soft:hover {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.active\:surface-info-soft:active {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.bg-info-soft\/10 {
  background-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
}

.hover\:bg-info-soft\/10:hover {
  background-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
}

.active\:bg-info-soft\/10:active {
  background-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
}

.bg-info-soft\/30 {
  background-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
}

.hover\:bg-info-soft\/30:hover {
  background-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
}

.active\:bg-info-soft\/30:active {
  background-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
}

.bg-info-soft\/50 {
  background-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
}

.hover\:bg-info-soft\/50:hover {
  background-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
}

.active\:bg-info-soft\/50:active {
  background-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
}

.bg-info-soft\/70 {
  background-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
}

.hover\:bg-info-soft\/70:hover {
  background-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
}

.active\:bg-info-soft\/70:active {
  background-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
}

.bg-info-soft\/90 {
  background-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
}

.hover\:bg-info-soft\/90:hover {
  background-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
}

.active\:bg-info-soft\/90:active {
  background-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
}

.bg-info-base {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.hover\:bg-info-base:hover {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.active\:bg-info-base:active {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.surface-info-base {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.hover\:surface-info-base:hover {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.active\:surface-info-base:active {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.bg-info-base\/10 {
  background-color: color-mix(in srgb, var(--info-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent);
}

.hover\:bg-info-base\/10:hover {
  background-color: color-mix(in srgb, var(--info-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent);
}

.active\:bg-info-base\/10:active {
  background-color: color-mix(in srgb, var(--info-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent);
}

.bg-info-base\/30 {
  background-color: color-mix(in srgb, var(--info-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent);
}

.hover\:bg-info-base\/30:hover {
  background-color: color-mix(in srgb, var(--info-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent);
}

.active\:bg-info-base\/30:active {
  background-color: color-mix(in srgb, var(--info-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent);
}

.bg-info-base\/50 {
  background-color: color-mix(in srgb, var(--info-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent);
}

.hover\:bg-info-base\/50:hover {
  background-color: color-mix(in srgb, var(--info-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent);
}

.active\:bg-info-base\/50:active {
  background-color: color-mix(in srgb, var(--info-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent);
}

.bg-info-base\/70 {
  background-color: color-mix(in srgb, var(--info-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent);
}

.hover\:bg-info-base\/70:hover {
  background-color: color-mix(in srgb, var(--info-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent);
}

.active\:bg-info-base\/70:active {
  background-color: color-mix(in srgb, var(--info-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent);
}

.bg-info-base\/90 {
  background-color: color-mix(in srgb, var(--info-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent);
}

.hover\:bg-info-base\/90:hover {
  background-color: color-mix(in srgb, var(--info-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent);
}

.active\:bg-info-base\/90:active {
  background-color: color-mix(in srgb, var(--info-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent);
}

.bg-info-strong {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.hover\:bg-info-strong:hover {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.active\:bg-info-strong:active {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.surface-info-strong {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.hover\:surface-info-strong:hover {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.active\:surface-info-strong:active {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.bg-info-strong\/10 {
  background-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
}

.hover\:bg-info-strong\/10:hover {
  background-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
}

.active\:bg-info-strong\/10:active {
  background-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
}

.bg-info-strong\/30 {
  background-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
}

.hover\:bg-info-strong\/30:hover {
  background-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
}

.active\:bg-info-strong\/30:active {
  background-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
}

.bg-info-strong\/50 {
  background-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
}

.hover\:bg-info-strong\/50:hover {
  background-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
}

.active\:bg-info-strong\/50:active {
  background-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
}

.bg-info-strong\/70 {
  background-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
}

.hover\:bg-info-strong\/70:hover {
  background-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
}

.active\:bg-info-strong\/70:active {
  background-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
}

.bg-info-strong\/90 {
  background-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
}

.hover\:bg-info-strong\/90:hover {
  background-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
}

.active\:bg-info-strong\/90:active {
  background-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
}

.bg-info-stronger {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.hover\:bg-info-stronger:hover {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.active\:bg-info-stronger:active {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.surface-info-stronger {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.hover\:surface-info-stronger:hover {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.active\:surface-info-stronger:active {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.bg-info-stronger\/10 {
  background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
}

.hover\:bg-info-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
}

.active\:bg-info-stronger\/10:active {
  background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
}

.bg-info-stronger\/30 {
  background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
}

.hover\:bg-info-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
}

.active\:bg-info-stronger\/30:active {
  background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
}

.bg-info-stronger\/50 {
  background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
}

.hover\:bg-info-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
}

.active\:bg-info-stronger\/50:active {
  background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
}

.bg-info-stronger\/70 {
  background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
}

.hover\:bg-info-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
}

.active\:bg-info-stronger\/70:active {
  background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
}

.bg-info-stronger\/90 {
  background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
}

.hover\:bg-info-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
}

.active\:bg-info-stronger\/90:active {
  background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
}

.bg-error-weak {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.hover\:bg-error-weak:hover {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.active\:bg-error-weak:active {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.surface-error-weak {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.hover\:surface-error-weak:hover {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.active\:surface-error-weak:active {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.bg-error-weak\/10 {
  background-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
}

.hover\:bg-error-weak\/10:hover {
  background-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
}

.active\:bg-error-weak\/10:active {
  background-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
}

.bg-error-weak\/30 {
  background-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
}

.hover\:bg-error-weak\/30:hover {
  background-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
}

.active\:bg-error-weak\/30:active {
  background-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
}

.bg-error-weak\/50 {
  background-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
}

.hover\:bg-error-weak\/50:hover {
  background-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
}

.active\:bg-error-weak\/50:active {
  background-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
}

.bg-error-weak\/70 {
  background-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
}

.hover\:bg-error-weak\/70:hover {
  background-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
}

.active\:bg-error-weak\/70:active {
  background-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
}

.bg-error-weak\/90 {
  background-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
}

.hover\:bg-error-weak\/90:hover {
  background-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
}

.active\:bg-error-weak\/90:active {
  background-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
}

.bg-error-soft {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.hover\:bg-error-soft:hover {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.active\:bg-error-soft:active {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.surface-error-soft {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.hover\:surface-error-soft:hover {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.active\:surface-error-soft:active {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.bg-error-soft\/10 {
  background-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
}

.hover\:bg-error-soft\/10:hover {
  background-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
}

.active\:bg-error-soft\/10:active {
  background-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
}

.bg-error-soft\/30 {
  background-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
}

.hover\:bg-error-soft\/30:hover {
  background-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
}

.active\:bg-error-soft\/30:active {
  background-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
}

.bg-error-soft\/50 {
  background-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
}

.hover\:bg-error-soft\/50:hover {
  background-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
}

.active\:bg-error-soft\/50:active {
  background-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
}

.bg-error-soft\/70 {
  background-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
}

.hover\:bg-error-soft\/70:hover {
  background-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
}

.active\:bg-error-soft\/70:active {
  background-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
}

.bg-error-soft\/90 {
  background-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
}

.hover\:bg-error-soft\/90:hover {
  background-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
}

.active\:bg-error-soft\/90:active {
  background-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
}

.bg-error-base {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.hover\:bg-error-base:hover {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.active\:bg-error-base:active {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.surface-error-base {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.hover\:surface-error-base:hover {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.active\:surface-error-base:active {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.bg-error-base\/10 {
  background-color: color-mix(in srgb, var(--error-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent);
}

.hover\:bg-error-base\/10:hover {
  background-color: color-mix(in srgb, var(--error-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent);
}

.active\:bg-error-base\/10:active {
  background-color: color-mix(in srgb, var(--error-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent);
}

.bg-error-base\/30 {
  background-color: color-mix(in srgb, var(--error-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent);
}

.hover\:bg-error-base\/30:hover {
  background-color: color-mix(in srgb, var(--error-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent);
}

.active\:bg-error-base\/30:active {
  background-color: color-mix(in srgb, var(--error-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent);
}

.bg-error-base\/50 {
  background-color: color-mix(in srgb, var(--error-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent);
}

.hover\:bg-error-base\/50:hover {
  background-color: color-mix(in srgb, var(--error-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent);
}

.active\:bg-error-base\/50:active {
  background-color: color-mix(in srgb, var(--error-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent);
}

.bg-error-base\/70 {
  background-color: color-mix(in srgb, var(--error-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent);
}

.hover\:bg-error-base\/70:hover {
  background-color: color-mix(in srgb, var(--error-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent);
}

.active\:bg-error-base\/70:active {
  background-color: color-mix(in srgb, var(--error-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent);
}

.bg-error-base\/90 {
  background-color: color-mix(in srgb, var(--error-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent);
}

.hover\:bg-error-base\/90:hover {
  background-color: color-mix(in srgb, var(--error-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent);
}

.active\:bg-error-base\/90:active {
  background-color: color-mix(in srgb, var(--error-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent);
}

.bg-error-strong {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.hover\:bg-error-strong:hover {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.active\:bg-error-strong:active {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.surface-error-strong {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.hover\:surface-error-strong:hover {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.active\:surface-error-strong:active {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.bg-error-strong\/10 {
  background-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
}

.hover\:bg-error-strong\/10:hover {
  background-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
}

.active\:bg-error-strong\/10:active {
  background-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
}

.bg-error-strong\/30 {
  background-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
}

.hover\:bg-error-strong\/30:hover {
  background-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
}

.active\:bg-error-strong\/30:active {
  background-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
}

.bg-error-strong\/50 {
  background-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
}

.hover\:bg-error-strong\/50:hover {
  background-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
}

.active\:bg-error-strong\/50:active {
  background-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
}

.bg-error-strong\/70 {
  background-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
}

.hover\:bg-error-strong\/70:hover {
  background-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
}

.active\:bg-error-strong\/70:active {
  background-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
}

.bg-error-strong\/90 {
  background-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
}

.hover\:bg-error-strong\/90:hover {
  background-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
}

.active\:bg-error-strong\/90:active {
  background-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
}

.bg-error-stronger {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.hover\:bg-error-stronger:hover {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.active\:bg-error-stronger:active {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.surface-error-stronger {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.hover\:surface-error-stronger:hover {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.active\:surface-error-stronger:active {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.bg-error-stronger\/10 {
  background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
}

.hover\:bg-error-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
}

.active\:bg-error-stronger\/10:active {
  background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
}

.bg-error-stronger\/30 {
  background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
}

.hover\:bg-error-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
}

.active\:bg-error-stronger\/30:active {
  background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
}

.bg-error-stronger\/50 {
  background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
}

.hover\:bg-error-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
}

.active\:bg-error-stronger\/50:active {
  background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
}

.bg-error-stronger\/70 {
  background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
}

.hover\:bg-error-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
}

.active\:bg-error-stronger\/70:active {
  background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
}

.bg-error-stronger\/90 {
  background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
}

.hover\:bg-error-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
}

.active\:bg-error-stronger\/90:active {
  background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
}

.bg-warning-weak {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.hover\:bg-warning-weak:hover {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.active\:bg-warning-weak:active {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.surface-warning-weak {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.hover\:surface-warning-weak:hover {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.active\:surface-warning-weak:active {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.bg-warning-weak\/10 {
  background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
}

.hover\:bg-warning-weak\/10:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
}

.active\:bg-warning-weak\/10:active {
  background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
}

.bg-warning-weak\/30 {
  background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
}

.hover\:bg-warning-weak\/30:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
}

.active\:bg-warning-weak\/30:active {
  background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
}

.bg-warning-weak\/50 {
  background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
}

.hover\:bg-warning-weak\/50:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
}

.active\:bg-warning-weak\/50:active {
  background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
}

.bg-warning-weak\/70 {
  background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
}

.hover\:bg-warning-weak\/70:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
}

.active\:bg-warning-weak\/70:active {
  background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
}

.bg-warning-weak\/90 {
  background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
}

.hover\:bg-warning-weak\/90:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
}

.active\:bg-warning-weak\/90:active {
  background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
}

.bg-warning-soft {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.hover\:bg-warning-soft:hover {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.active\:bg-warning-soft:active {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.surface-warning-soft {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.hover\:surface-warning-soft:hover {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.active\:surface-warning-soft:active {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.bg-warning-soft\/10 {
  background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
}

.hover\:bg-warning-soft\/10:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
}

.active\:bg-warning-soft\/10:active {
  background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
}

.bg-warning-soft\/30 {
  background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
}

.hover\:bg-warning-soft\/30:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
}

.active\:bg-warning-soft\/30:active {
  background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
}

.bg-warning-soft\/50 {
  background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
}

.hover\:bg-warning-soft\/50:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
}

.active\:bg-warning-soft\/50:active {
  background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
}

.bg-warning-soft\/70 {
  background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
}

.hover\:bg-warning-soft\/70:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
}

.active\:bg-warning-soft\/70:active {
  background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
}

.bg-warning-soft\/90 {
  background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
}

.hover\:bg-warning-soft\/90:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
}

.active\:bg-warning-soft\/90:active {
  background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
}

.bg-warning-base {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.hover\:bg-warning-base:hover {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.active\:bg-warning-base:active {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.surface-warning-base {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.hover\:surface-warning-base:hover {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.active\:surface-warning-base:active {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.bg-warning-base\/10 {
  background-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
}

.hover\:bg-warning-base\/10:hover {
  background-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
}

.active\:bg-warning-base\/10:active {
  background-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
}

.bg-warning-base\/30 {
  background-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.hover\:bg-warning-base\/30:hover {
  background-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.active\:bg-warning-base\/30:active {
  background-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.bg-warning-base\/50 {
  background-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
}

.hover\:bg-warning-base\/50:hover {
  background-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
}

.active\:bg-warning-base\/50:active {
  background-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
}

.bg-warning-base\/70 {
  background-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
}

.hover\:bg-warning-base\/70:hover {
  background-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
}

.active\:bg-warning-base\/70:active {
  background-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
}

.bg-warning-base\/90 {
  background-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
}

.hover\:bg-warning-base\/90:hover {
  background-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
}

.active\:bg-warning-base\/90:active {
  background-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
}

.bg-warning-strong {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.hover\:bg-warning-strong:hover {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.active\:bg-warning-strong:active {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.surface-warning-strong {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.hover\:surface-warning-strong:hover {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.active\:surface-warning-strong:active {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.bg-warning-strong\/10 {
  background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
}

.hover\:bg-warning-strong\/10:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
}

.active\:bg-warning-strong\/10:active {
  background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
}

.bg-warning-strong\/30 {
  background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
}

.hover\:bg-warning-strong\/30:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
}

.active\:bg-warning-strong\/30:active {
  background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
}

.bg-warning-strong\/50 {
  background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
}

.hover\:bg-warning-strong\/50:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
}

.active\:bg-warning-strong\/50:active {
  background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
}

.bg-warning-strong\/70 {
  background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
}

.hover\:bg-warning-strong\/70:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
}

.active\:bg-warning-strong\/70:active {
  background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
}

.bg-warning-strong\/90 {
  background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
}

.hover\:bg-warning-strong\/90:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
}

.active\:bg-warning-strong\/90:active {
  background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
}

.bg-warning-stronger {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.hover\:bg-warning-stronger:hover {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.active\:bg-warning-stronger:active {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.surface-warning-stronger {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.hover\:surface-warning-stronger:hover {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.active\:surface-warning-stronger:active {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.bg-warning-stronger\/10 {
  background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
}

.hover\:bg-warning-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
}

.active\:bg-warning-stronger\/10:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
}

.bg-warning-stronger\/30 {
  background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
}

.hover\:bg-warning-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
}

.active\:bg-warning-stronger\/30:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
}

.bg-warning-stronger\/50 {
  background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
}

.hover\:bg-warning-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
}

.active\:bg-warning-stronger\/50:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
}

.bg-warning-stronger\/70 {
  background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
}

.hover\:bg-warning-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
}

.active\:bg-warning-stronger\/70:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
}

.bg-warning-stronger\/90 {
  background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
}

.hover\:bg-warning-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
}

.active\:bg-warning-stronger\/90:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
}

.bg-header {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.hover\:bg-header:hover {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.active\:bg-header:active {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.surface-header {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.hover\:surface-header:hover {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.active\:surface-header:active {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.bg-header\/10 {
  background-color: color-mix(in srgb, var(--header) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 10%, transparent);
}

.hover\:bg-header\/10:hover {
  background-color: color-mix(in srgb, var(--header) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 10%, transparent);
}

.active\:bg-header\/10:active {
  background-color: color-mix(in srgb, var(--header) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 10%, transparent);
}

.bg-header\/30 {
  background-color: color-mix(in srgb, var(--header) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 30%, transparent);
}

.hover\:bg-header\/30:hover {
  background-color: color-mix(in srgb, var(--header) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 30%, transparent);
}

.active\:bg-header\/30:active {
  background-color: color-mix(in srgb, var(--header) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 30%, transparent);
}

.bg-header\/50 {
  background-color: color-mix(in srgb, var(--header) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 50%, transparent);
}

.hover\:bg-header\/50:hover {
  background-color: color-mix(in srgb, var(--header) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 50%, transparent);
}

.active\:bg-header\/50:active {
  background-color: color-mix(in srgb, var(--header) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 50%, transparent);
}

.bg-header\/70 {
  background-color: color-mix(in srgb, var(--header) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 70%, transparent);
}

.hover\:bg-header\/70:hover {
  background-color: color-mix(in srgb, var(--header) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 70%, transparent);
}

.active\:bg-header\/70:active {
  background-color: color-mix(in srgb, var(--header) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 70%, transparent);
}

.bg-header\/90 {
  background-color: color-mix(in srgb, var(--header) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 90%, transparent);
}

.hover\:bg-header\/90:hover {
  background-color: color-mix(in srgb, var(--header) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 90%, transparent);
}

.active\:bg-header\/90:active {
  background-color: color-mix(in srgb, var(--header) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 90%, transparent);
}

.bg-footer {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.hover\:bg-footer:hover {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.active\:bg-footer:active {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.surface-footer {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.hover\:surface-footer:hover {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.active\:surface-footer:active {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.bg-footer\/10 {
  background-color: color-mix(in srgb, var(--footer) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 10%, transparent);
}

.hover\:bg-footer\/10:hover {
  background-color: color-mix(in srgb, var(--footer) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 10%, transparent);
}

.active\:bg-footer\/10:active {
  background-color: color-mix(in srgb, var(--footer) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 10%, transparent);
}

.bg-footer\/30 {
  background-color: color-mix(in srgb, var(--footer) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 30%, transparent);
}

.hover\:bg-footer\/30:hover {
  background-color: color-mix(in srgb, var(--footer) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 30%, transparent);
}

.active\:bg-footer\/30:active {
  background-color: color-mix(in srgb, var(--footer) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 30%, transparent);
}

.bg-footer\/50 {
  background-color: color-mix(in srgb, var(--footer) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 50%, transparent);
}

.hover\:bg-footer\/50:hover {
  background-color: color-mix(in srgb, var(--footer) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 50%, transparent);
}

.active\:bg-footer\/50:active {
  background-color: color-mix(in srgb, var(--footer) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 50%, transparent);
}

.bg-footer\/70 {
  background-color: color-mix(in srgb, var(--footer) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 70%, transparent);
}

.hover\:bg-footer\/70:hover {
  background-color: color-mix(in srgb, var(--footer) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 70%, transparent);
}

.active\:bg-footer\/70:active {
  background-color: color-mix(in srgb, var(--footer) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 70%, transparent);
}

.bg-footer\/90 {
  background-color: color-mix(in srgb, var(--footer) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 90%, transparent);
}

.hover\:bg-footer\/90:hover {
  background-color: color-mix(in srgb, var(--footer) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 90%, transparent);
}

.active\:bg-footer\/90:active {
  background-color: color-mix(in srgb, var(--footer) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 90%, transparent);
}

.bg-default {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.hover\:bg-default:hover {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.active\:bg-default:active {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.surface-default {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.hover\:surface-default:hover {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.active\:surface-default:active {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.bg-default\/10 {
  background-color: color-mix(in srgb, var(--default) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 10%, transparent);
}

.hover\:bg-default\/10:hover {
  background-color: color-mix(in srgb, var(--default) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 10%, transparent);
}

.active\:bg-default\/10:active {
  background-color: color-mix(in srgb, var(--default) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 10%, transparent);
}

.bg-default\/30 {
  background-color: color-mix(in srgb, var(--default) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 30%, transparent);
}

.hover\:bg-default\/30:hover {
  background-color: color-mix(in srgb, var(--default) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 30%, transparent);
}

.active\:bg-default\/30:active {
  background-color: color-mix(in srgb, var(--default) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 30%, transparent);
}

.bg-default\/50 {
  background-color: color-mix(in srgb, var(--default) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 50%, transparent);
}

.hover\:bg-default\/50:hover {
  background-color: color-mix(in srgb, var(--default) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 50%, transparent);
}

.active\:bg-default\/50:active {
  background-color: color-mix(in srgb, var(--default) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 50%, transparent);
}

.bg-default\/70 {
  background-color: color-mix(in srgb, var(--default) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 70%, transparent);
}

.hover\:bg-default\/70:hover {
  background-color: color-mix(in srgb, var(--default) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 70%, transparent);
}

.active\:bg-default\/70:active {
  background-color: color-mix(in srgb, var(--default) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 70%, transparent);
}

.bg-default\/90 {
  background-color: color-mix(in srgb, var(--default) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 90%, transparent);
}

.hover\:bg-default\/90:hover {
  background-color: color-mix(in srgb, var(--default) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 90%, transparent);
}

.active\:bg-default\/90:active {
  background-color: color-mix(in srgb, var(--default) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 90%, transparent);
}
/* === Management Border Utility Classes === */
.border-primary-weak {
  border-color: var(--primary-weak);
}
.hover\:border-primary-weak:hover {
  border-color: var(--primary-weak);
}
.active\:border-primary-weak:active {
  border-color: var(--primary-weak);
}
.border-primary-soft {
  border-color: var(--primary-soft);
}
.hover\:border-primary-soft:hover {
  border-color: var(--primary-soft);
}
.active\:border-primary-soft:active {
  border-color: var(--primary-soft);
}
.border-primary-base {
  border-color: var(--primary-base);
}
.hover\:border-primary-base:hover {
  border-color: var(--primary-base);
}
.active\:border-primary-base:active {
  border-color: var(--primary-base);
}
.border-primary-strong {
  border-color: var(--primary-strong);
}
.hover\:border-primary-strong:hover {
  border-color: var(--primary-strong);
}
.active\:border-primary-strong:active {
  border-color: var(--primary-strong);
}
.border-primary-stronger {
  border-color: var(--primary-stronger);
}
.hover\:border-primary-stronger:hover {
  border-color: var(--primary-stronger);
}
.active\:border-primary-stronger:active {
  border-color: var(--primary-stronger);
}
.border-secondary-weak {
  border-color: var(--secondary-weak);
}
.hover\:border-secondary-weak:hover {
  border-color: var(--secondary-weak);
}
.active\:border-secondary-weak:active {
  border-color: var(--secondary-weak);
}
.border-secondary-soft {
  border-color: var(--secondary-soft);
}
.hover\:border-secondary-soft:hover {
  border-color: var(--secondary-soft);
}
.active\:border-secondary-soft:active {
  border-color: var(--secondary-soft);
}
.border-secondary-base {
  border-color: var(--secondary-base);
}
.hover\:border-secondary-base:hover {
  border-color: var(--secondary-base);
}
.active\:border-secondary-base:active {
  border-color: var(--secondary-base);
}
.border-secondary-strong {
  border-color: var(--secondary-strong);
}
.hover\:border-secondary-strong:hover {
  border-color: var(--secondary-strong);
}
.active\:border-secondary-strong:active {
  border-color: var(--secondary-strong);
}
.border-secondary-stronger {
  border-color: var(--secondary-stronger);
}
.hover\:border-secondary-stronger:hover {
  border-color: var(--secondary-stronger);
}
.active\:border-secondary-stronger:active {
  border-color: var(--secondary-stronger);
}
.border-accent-weak {
  border-color: var(--accent-weak);
}
.hover\:border-accent-weak:hover {
  border-color: var(--accent-weak);
}
.active\:border-accent-weak:active {
  border-color: var(--accent-weak);
}
.border-accent-soft {
  border-color: var(--accent-soft);
}
.hover\:border-accent-soft:hover {
  border-color: var(--accent-soft);
}
.active\:border-accent-soft:active {
  border-color: var(--accent-soft);
}
.border-accent-base {
  border-color: var(--accent-base);
}
.hover\:border-accent-base:hover {
  border-color: var(--accent-base);
}
.active\:border-accent-base:active {
  border-color: var(--accent-base);
}
.border-accent-strong {
  border-color: var(--accent-strong);
}
.hover\:border-accent-strong:hover {
  border-color: var(--accent-strong);
}
.active\:border-accent-strong:active {
  border-color: var(--accent-strong);
}
.border-accent-stronger {
  border-color: var(--accent-stronger);
}
.hover\:border-accent-stronger:hover {
  border-color: var(--accent-stronger);
}
.active\:border-accent-stronger:active {
  border-color: var(--accent-stronger);
}
.border-neutral-weak {
  border-color: var(--neutral-weak);
}
.hover\:border-neutral-weak:hover {
  border-color: var(--neutral-weak);
}
.active\:border-neutral-weak:active {
  border-color: var(--neutral-weak);
}
.border-neutral-soft {
  border-color: var(--neutral-soft);
}
.hover\:border-neutral-soft:hover {
  border-color: var(--neutral-soft);
}
.active\:border-neutral-soft:active {
  border-color: var(--neutral-soft);
}
.border-neutral-base {
  border-color: var(--neutral-base);
}
.hover\:border-neutral-base:hover {
  border-color: var(--neutral-base);
}
.active\:border-neutral-base:active {
  border-color: var(--neutral-base);
}
.border-neutral-strong {
  border-color: var(--neutral-strong);
}
.hover\:border-neutral-strong:hover {
  border-color: var(--neutral-strong);
}
.active\:border-neutral-strong:active {
  border-color: var(--neutral-strong);
}
.border-neutral-stronger {
  border-color: var(--neutral-stronger);
}
.hover\:border-neutral-stronger:hover {
  border-color: var(--neutral-stronger);
}
.active\:border-neutral-stronger:active {
  border-color: var(--neutral-stronger);
}
.border-success-weak {
  border-color: var(--success-weak);
}
.hover\:border-success-weak:hover {
  border-color: var(--success-weak);
}
.active\:border-success-weak:active {
  border-color: var(--success-weak);
}
.border-success-soft {
  border-color: var(--success-soft);
}
.hover\:border-success-soft:hover {
  border-color: var(--success-soft);
}
.active\:border-success-soft:active {
  border-color: var(--success-soft);
}
.border-success-base {
  border-color: var(--success-base);
}
.hover\:border-success-base:hover {
  border-color: var(--success-base);
}
.active\:border-success-base:active {
  border-color: var(--success-base);
}
.border-success-strong {
  border-color: var(--success-strong);
}
.hover\:border-success-strong:hover {
  border-color: var(--success-strong);
}
.active\:border-success-strong:active {
  border-color: var(--success-strong);
}
.border-success-stronger {
  border-color: var(--success-stronger);
}
.hover\:border-success-stronger:hover {
  border-color: var(--success-stronger);
}
.active\:border-success-stronger:active {
  border-color: var(--success-stronger);
}
.border-info-weak {
  border-color: var(--info-weak);
}
.hover\:border-info-weak:hover {
  border-color: var(--info-weak);
}
.active\:border-info-weak:active {
  border-color: var(--info-weak);
}
.border-info-soft {
  border-color: var(--info-soft);
}
.hover\:border-info-soft:hover {
  border-color: var(--info-soft);
}
.active\:border-info-soft:active {
  border-color: var(--info-soft);
}
.border-info-base {
  border-color: var(--info-base);
}
.hover\:border-info-base:hover {
  border-color: var(--info-base);
}
.active\:border-info-base:active {
  border-color: var(--info-base);
}
.border-info-strong {
  border-color: var(--info-strong);
}
.hover\:border-info-strong:hover {
  border-color: var(--info-strong);
}
.active\:border-info-strong:active {
  border-color: var(--info-strong);
}
.border-info-stronger {
  border-color: var(--info-stronger);
}
.hover\:border-info-stronger:hover {
  border-color: var(--info-stronger);
}
.active\:border-info-stronger:active {
  border-color: var(--info-stronger);
}
.border-error-weak {
  border-color: var(--error-weak);
}
.hover\:border-error-weak:hover {
  border-color: var(--error-weak);
}
.active\:border-error-weak:active {
  border-color: var(--error-weak);
}
.border-error-soft {
  border-color: var(--error-soft);
}
.hover\:border-error-soft:hover {
  border-color: var(--error-soft);
}
.active\:border-error-soft:active {
  border-color: var(--error-soft);
}
.border-error-base {
  border-color: var(--error-base);
}
.hover\:border-error-base:hover {
  border-color: var(--error-base);
}
.active\:border-error-base:active {
  border-color: var(--error-base);
}
.border-error-strong {
  border-color: var(--error-strong);
}
.hover\:border-error-strong:hover {
  border-color: var(--error-strong);
}
.active\:border-error-strong:active {
  border-color: var(--error-strong);
}
.border-error-stronger {
  border-color: var(--error-stronger);
}
.hover\:border-error-stronger:hover {
  border-color: var(--error-stronger);
}
.active\:border-error-stronger:active {
  border-color: var(--error-stronger);
}
.border-warning-weak {
  border-color: var(--warning-weak);
}
.hover\:border-warning-weak:hover {
  border-color: var(--warning-weak);
}
.active\:border-warning-weak:active {
  border-color: var(--warning-weak);
}
.border-warning-soft {
  border-color: var(--warning-soft);
}
.hover\:border-warning-soft:hover {
  border-color: var(--warning-soft);
}
.active\:border-warning-soft:active {
  border-color: var(--warning-soft);
}
.border-warning-base {
  border-color: var(--warning-base);
}
.hover\:border-warning-base:hover {
  border-color: var(--warning-base);
}
.active\:border-warning-base:active {
  border-color: var(--warning-base);
}
.border-warning-strong {
  border-color: var(--warning-strong);
}
.hover\:border-warning-strong:hover {
  border-color: var(--warning-strong);
}
.active\:border-warning-strong:active {
  border-color: var(--warning-strong);
}
.border-warning-stronger {
  border-color: var(--warning-stronger);
}
.hover\:border-warning-stronger:hover {
  border-color: var(--warning-stronger);
}
.active\:border-warning-stronger:active {
  border-color: var(--warning-stronger);
}
.border-header {
  border-color: var(--header);
}
.hover\:border-header:hover {
  border-color: var(--header);
}
.active\:border-header:active {
  border-color: var(--header);
}
.border-footer {
  border-color: var(--footer);
}
.hover\:border-footer:hover {
  border-color: var(--footer);
}
.active\:border-footer:active {
  border-color: var(--footer);
}
.border-default {
  border-color: var(--default);
}
.hover\:border-default:hover {
  border-color: var(--default);
}
.active\:border-default:active {
  border-color: var(--default);
}
/* === Storefront Theme Variables === */
.site-color-palette {
  --primary-weak: #fff6f7;
  --primary-weak-text-heading: #2d0a0f;
  --primary-weak-text-base: #5b1116;
  --primary-weak-text-muted: #7d5b60;
  --primary-weak-link: #b5121b;
  --primary-weak-link-hover: #941018;
  --primary-weak-link-active: #760c13;
  --primary-weak-border: #e7c9cd;
  --primary-weak-action-fill: #c20f18;
  --primary-weak-action-fill-hover: #a50d14;
  --primary-weak-action-fill-active: #850a10;
  --primary-weak-action-text: #ffffff;
  --primary-weak-action-border: #b5121b;

  --primary-soft: #f8d6d8;
  --primary-soft-text-heading: #2b0d11;
  --primary-soft-text-base: #4e1a1f;
  --primary-soft-text-muted: #735156;
  --primary-soft-link: #b3131c;
  --primary-soft-link-hover: #941018;
  --primary-soft-link-active: #760c13;
  --primary-soft-border: #d7a9ae;
  --primary-soft-action-fill: #c51620;
  --primary-soft-action-fill-hover: #a7131b;
  --primary-soft-action-fill-active: #861016;
  --primary-soft-action-text: #fffdfd;
  --primary-soft-action-border: #a7131b;

  --primary-base: #c20f18;
  --primary-base-text-heading: #fffdfd;
  --primary-base-text-base: #ffe8ea;
  --primary-base-text-muted: #e4b1b5;
  --primary-base-link: #fff4f5;
  --primary-base-link-hover: #ffd9dd;
  --primary-base-link-active: #ffbcc2;
  --primary-base-border: #d36a72;
  --primary-base-action-fill: #fffdfd;
  --primary-base-action-fill-hover: #ffecee;
  --primary-base-action-fill-active: #ffd9dd;
  --primary-base-action-text: #8f1320;
  --primary-base-action-border: #fffdfd;

  --primary-strong: #8f1320;
  --primary-strong-text-heading: #fffdfd;
  --primary-strong-text-base: #ffe7e9;
  --primary-strong-text-muted: #d9a0a7;
  --primary-strong-link: #fff4f5;
  --primary-strong-link-hover: #ffd9dd;
  --primary-strong-link-active: #ffbcc2;
  --primary-strong-border: #c05a66;
  --primary-strong-action-fill: #fffdfd;
  --primary-strong-action-fill-hover: #ffecee;
  --primary-strong-action-fill-active: #ffd8dc;
  --primary-strong-action-text: #8f1320;
  --primary-strong-action-border: #fffdfd;

  --primary-stronger: #5a0f1a;
  --primary-stronger-text-heading: #fffdfd;
  --primary-stronger-text-base: #ffe9eb;
  --primary-stronger-text-muted: #d79aa3;
  --primary-stronger-link: #fff4f5;
  --primary-stronger-link-hover: #ffdadf;
  --primary-stronger-link-active: #ffbcc5;
  --primary-stronger-border: #9a3b49;
  --primary-stronger-action-fill: #fffdfd;
  --primary-stronger-action-fill-hover: #ffecef;
  --primary-stronger-action-fill-active: #ffd7dd;
  --primary-stronger-action-text: #5a0f1a;
  --primary-stronger-action-border: #fffdfd;

  --secondary-weak: #f7f2ff;
  --secondary-weak-text-heading: #1b1238;
  --secondary-weak-text-base: #34205a;
  --secondary-weak-text-muted: #7b6a9b;
  --secondary-weak-link: #7d2cf3;
  --secondary-weak-link-hover: #6922d1;
  --secondary-weak-link-active: #551aa1;
  --secondary-weak-border: #ddd1f5;
  --secondary-weak-action-fill: #8629ff;
  --secondary-weak-action-fill-hover: #7323db;
  --secondary-weak-action-fill-active: #5d1cb2;
  --secondary-weak-action-text: #ffffff;
  --secondary-weak-action-border: #8629ff;

  --secondary-soft: #e4d4ff;
  --secondary-soft-text-heading: #1a1030;
  --secondary-soft-text-base: #2c1c4a;
  --secondary-soft-text-muted: #685a92;
  --secondary-soft-link: #7a26e6;
  --secondary-soft-link-hover: #651fc2;
  --secondary-soft-link-active: #4e1897;
  --secondary-soft-border: #c9b4f2;
  --secondary-soft-action-fill: #8b32ff;
  --secondary-soft-action-fill-hover: #7428d9;
  --secondary-soft-action-fill-active: #5d20b1;
  --secondary-soft-action-text: #ffffff;
  --secondary-soft-action-border: #7428d9;

  --secondary-base: #8629ff;
  --secondary-base-text-heading: #fffdfd;
  --secondary-base-text-base: #f1e7ff;
  --secondary-base-text-muted: #c6b0ea;
  --secondary-base-link: #f6f1ff;
  --secondary-base-link-hover: #e7daff;
  --secondary-base-link-active: #d1b8ff;
  --secondary-base-border: #a56aef;
  --secondary-base-action-fill: #fffdfd;
  --secondary-base-action-fill-hover: #f2eaff;
  --secondary-base-action-fill-active: #e4d2ff;
  --secondary-base-action-text: #8629ff;
  --secondary-base-action-border: #fffdfd;

  --secondary-strong: #6a21cc;
  --secondary-strong-text-heading: #fffdfd;
  --secondary-strong-text-base: #efe7ff;
  --secondary-strong-text-muted: #b89ae8;
  --secondary-strong-link: #f8f5ff;
  --secondary-strong-link-hover: #e8ddff;
  --secondary-strong-link-active: #d2bcff;
  --secondary-strong-border: #9160e8;
  --secondary-strong-action-fill: #fffdfd;
  --secondary-strong-action-fill-hover: #f3ecff;
  --secondary-strong-action-fill-active: #e3d3ff;
  --secondary-strong-action-text: #6a21cc;
  --secondary-strong-action-border: #fffdfd;

  --secondary-stronger: #440e8b;
  --secondary-stronger-text-heading: #fffdfd;
  --secondary-stronger-text-base: #efe6ff;
  --secondary-stronger-text-muted: #b59ae8;
  --secondary-stronger-link: #f8f5ff;
  --secondary-stronger-link-hover: #ecddff;
  --secondary-stronger-link-active: #d4bcff;
  --secondary-stronger-border: #7445c7;
  --secondary-stronger-action-fill: #fffdfd;
  --secondary-stronger-action-fill-hover: #f4eeff;
  --secondary-stronger-action-fill-active: #e5d6ff;
  --secondary-stronger-action-text: #4b178f;
  --secondary-stronger-action-border: #fffdfd;

  --accent-weak: #f0f6ff;
  --accent-weak-text-heading: #182433;
  --accent-weak-text-base: #2d3b4f;
  --accent-weak-text-muted: #6b7a90;
  --accent-weak-link: #2563eb;
  --accent-weak-link-hover: #1d4ed8;
  --accent-weak-link-active: #1e40af;
  --accent-weak-border: #cbd8ea;
  --accent-weak-action-fill: #0b3b82;
  --accent-weak-action-fill-hover: #082f66;
  --accent-weak-action-fill-active: #06264f;
  --accent-weak-action-text: #ffffff;
  --accent-weak-action-border: #0b3b82;

  --accent-soft: #cfe0ff;
  --accent-soft-text-heading: #1b2a40;
  --accent-soft-text-base: #31435f;
  --accent-soft-text-muted: #6f84a8;
  --accent-soft-link: #2563eb;
  --accent-soft-link-hover: #1d4ed8;
  --accent-soft-link-active: #1e40af;
  --accent-soft-border: #7fa7e0;
  --accent-soft-action-fill: #18519a;
  --accent-soft-action-fill-hover: #0f3f82;
  --accent-soft-action-fill-active: #0a3268;
  --accent-soft-action-text: #ffffff;
  --accent-soft-action-border: #18519a;

  --accent-base: #3b82f6;
  --accent-base-text-heading: #ffffff;
  --accent-base-text-base: #eaf2ff;
  --accent-base-text-muted: #b8c9e8;
  --accent-base-link: #f8fbff;
  --accent-base-link-hover: #dce8ff;
  --accent-base-link-active: #bed4ff;
  --accent-base-border: #6c97d9;
  --accent-base-action-fill: #0b3b82;
  --accent-base-action-fill-hover: #082f66;
  --accent-base-action-fill-active: #06264f;
  --accent-base-action-text: #ffffff;
  --accent-base-action-border: #0b3b82;

  --accent-strong: #18519a;
  --accent-strong-text-heading: #fffdfd;
  --accent-strong-text-base: #e7f0ff;
  --accent-strong-text-muted: #afc3e6;
  --accent-strong-link: #f5f9ff;
  --accent-strong-link-hover: #dce9ff;
  --accent-strong-link-active: #bed4ff;
  --accent-strong-border: #4e7bc2;
  --accent-strong-action-fill: #fffdfd;
  --accent-strong-action-fill-hover: #eef5ff;
  --accent-strong-action-fill-active: #dce9ff;
  --accent-strong-action-text: #18519a;
  --accent-strong-action-border: #fffdfd;

  --accent-stronger: #fefcf6;
  --accent-stronger-text-heading: #fffdfd;
  --accent-stronger-text-base: #e5eeff;
  --accent-stronger-text-muted: #a8bdd9;
  --accent-stronger-link: #f5f9ff;
  --accent-stronger-link-hover: #d9e8ff;
  --accent-stronger-link-active: #b9d1ff;
  --accent-stronger-border: #4d6f9e;
  --accent-stronger-action-fill: #fffdfd;
  --accent-stronger-action-fill-hover: #eef5ff;
  --accent-stronger-action-fill-active: #dce8ff;
  --accent-stronger-action-text: #052d61;
  --accent-stronger-action-border: #fffdfd;

  --neutral-weak: #fafafa;
  --neutral-weak-text-heading: #0f172a;
  --neutral-weak-text-base: #1f2937;
  --neutral-weak-text-muted: #6b7280;
  --neutral-weak-link: #2563eb;
  --neutral-weak-link-hover: #1d4ed8;
  --neutral-weak-link-active: #1e40af;
  --neutral-weak-border: #e2e8f0;
  --neutral-weak-action-fill: #374151;
  --neutral-weak-action-fill-hover: #1f2937;
  --neutral-weak-action-fill-active: #111827;
  --neutral-weak-action-text: #ffffff;
  --neutral-weak-action-border: #374151;

  --neutral-soft: #f0f0f0;
  --neutral-soft-text-heading: #111827;
  --neutral-soft-text-base: #374151;
  --neutral-soft-text-muted: #71717a;
  --neutral-soft-link: #2563eb;
  --neutral-soft-link-hover: #1d4ed8;
  --neutral-soft-link-active: #1e40af;
  --neutral-soft-border: #d1d5db;
  --neutral-soft-action-fill: #4b5563;
  --neutral-soft-action-fill-hover: #374151;
  --neutral-soft-action-fill-active: #1f2937;
  --neutral-soft-action-text: #ffffff;
  --neutral-soft-action-border: #4b5563;

  --neutral-base: #e5e5e5;
  --neutral-base-text-heading: #111827;
  --neutral-base-text-base: #374151;
  --neutral-base-text-muted: #5f6b7a;
  --neutral-base-link: #1d4ed8;
  --neutral-base-link-hover: #1e40af;
  --neutral-base-link-active: #1e3a8a;
  --neutral-base-border: #cbd5e1;
  --neutral-base-action-fill: #4b5563;
  --neutral-base-action-fill-hover: #374151;
  --neutral-base-action-fill-active: #1f2937;
  --neutral-base-action-text: #ffffff;
  --neutral-base-action-border: #4b5563;

  --neutral-strong: #9ca3af;
  --neutral-strong-text-heading: #111827;
  --neutral-strong-text-base: #374151;
  --neutral-strong-text-muted: #5f6b7a;
  --neutral-strong-link: #1d4ed8;
  --neutral-strong-link-hover: #1e40af;
  --neutral-strong-link-active: #1e3a8a;
  --neutral-strong-border: #6b7280;
  --neutral-strong-action-fill: #4b5563;
  --neutral-strong-action-fill-hover: #374151;
  --neutral-strong-action-fill-active: #1f2937;
  --neutral-strong-action-text: #ffffff;
  --neutral-strong-action-border: #4b5563;

  --neutral-stronger: #4b5563;
  --neutral-stronger-text-heading: #fffdfd;
  --neutral-stronger-text-base: #e5e7eb;
  --neutral-stronger-text-muted: #cbd5e1;
  --neutral-stronger-link: #f5f9ff;
  --neutral-stronger-link-hover: #dce8ff;
  --neutral-stronger-link-active: #bfd3ff;
  --neutral-stronger-border: #8892a0;
  --neutral-stronger-action-fill: #f9fafb;
  --neutral-stronger-action-fill-hover: #e5e7eb;
  --neutral-stronger-action-fill-active: #e5e7eb;
  --neutral-stronger-action-text: #374151;
  --neutral-stronger-action-border: #f9fafb;

  --success-weak: #ffffff;
  --success-weak-text-heading: #05331c;
  --success-weak-text-base: #145c3b;
  --success-weak-text-muted: #739e88;
  --success-weak-link: #1f9d55;
  --success-weak-link-hover: #178248;
  --success-weak-link-active: #126637;
  --success-weak-border: #bfe6d1;
  --success-weak-action-fill: #1f9d55;
  --success-weak-action-fill-hover: #178248;
  --success-weak-action-fill-active: #126637;
  --success-weak-action-text: #ffffff;
  --success-weak-action-border: #178248;

  --success-soft: #eafaf1;
  --success-soft-text-heading: #05331c;
  --success-soft-text-base: #0f5132;
  --success-soft-text-muted: #4e7d65;
  --success-soft-link: #157347;
  --success-soft-link-hover: #0f5132;
  --success-soft-link-active: #0a3f28;
  --success-soft-border: #b7e4c7;
  --success-soft-action-fill: #1f9d55;
  --success-soft-action-fill-hover: #178248;
  --success-soft-action-fill-active: #126637;
  --success-soft-action-text: #ffffff;
  --success-soft-action-border: #1f9d55;

  --success-base: #1f9d55;
  --success-base-text-heading: #f7fff9;
  --success-base-text-base: #e7f9ef;
  --success-base-text-muted: #a4d9bb;
  --success-base-link: #ecfff5;
  --success-base-link-hover: #d7f7e6;
  --success-base-link-active: #bdeed1;
  --success-base-border: #58c184;
  --success-base-action-fill: #0f5132;
  --success-base-action-fill-hover: #0a3f28;
  --success-base-action-fill-active: #05331c;
  --success-base-action-text: #ffffff;
  --success-base-action-border: #0f5132;

  --success-strong: #136f3b;
  --success-strong-text-heading: #fffdfd;
  --success-strong-text-base: #d9f5e7;
  --success-strong-text-muted: #8fd0ae;
  --success-strong-link: #f6fff9;
  --success-strong-link-hover: #d6f5e2;
  --success-strong-link-active: #b4ebcf;
  --success-strong-border: #2a8153;
  --success-strong-action-fill: #ffffff;
  --success-strong-action-fill-hover: #e8faf1;
  --success-strong-action-fill-active: #cceedd;
  --success-strong-action-text: #136f3b;
  --success-strong-action-border: #ffffff;

  --success-stronger: #0b4d29;
  --success-stronger-text-heading: #fffdfd;
  --success-stronger-text-base: #d5f2e3;
  --success-stronger-text-muted: #8cc9ab;
  --success-stronger-link: #f4fff8;
  --success-stronger-link-hover: #d4f5e2;
  --success-stronger-link-active: #afe7c8;
  --success-stronger-border: #21784a;
  --success-stronger-action-fill: #ffffff;
  --success-stronger-action-fill-hover: #e8faf1;
  --success-stronger-action-fill-active: #cdeedd;
  --success-stronger-action-text: #0b4d29;
  --success-stronger-action-border: #ffffff;

  --info-weak: #ffffff;
  --info-weak-text-heading: #1e3a8a;
  --info-weak-text-base: #1e40af;
  --info-weak-text-muted: #475569;
  --info-weak-link: #2563eb;
  --info-weak-link-hover: #1d4ed8;
  --info-weak-link-active: #1e40af;
  --info-weak-border: #bfdbfe;
  --info-weak-action-fill: #2563eb;
  --info-weak-action-fill-hover: #1d4ed8;
  --info-weak-action-fill-active: #1e40af;
  --info-weak-action-text: #ffffff;
  --info-weak-action-border: #2563eb;

  --info-soft: #eff6ff;
  --info-soft-text-heading: #1e3a8a;
  --info-soft-text-base: #1e40af;
  --info-soft-text-muted: #526071;
  --info-soft-link: #2563eb;
  --info-soft-link-hover: #1d4ed8;
  --info-soft-link-active: #1e40af;
  --info-soft-border: #bfd8ff;
  --info-soft-action-fill: #2563eb;
  --info-soft-action-fill-hover: #1d4ed8;
  --info-soft-action-fill-active: #1e40af;
  --info-soft-action-text: #ffffff;
  --info-soft-action-border: #2563eb;

  --info-base: #2563eb;
  --info-base-text-heading: #f8fbff;
  --info-base-text-base: #eaf2ff;
  --info-base-text-muted: #b6c9ee;
  --info-base-link: #f8fbff;
  --info-base-link-hover: #dce8ff;
  --info-base-link-active: #bed4ff;
  --info-base-border: #6b9ef3;
  --info-base-action-fill: #0b3b82;
  --info-base-action-fill-hover: #082f66;
  --info-base-action-fill-active: #06264f;
  --info-base-action-text: #ffffff;
  --info-base-action-border: #0b3b82;

  --info-strong: #1e40af;
  --info-strong-text-heading: #fffdfd;
  --info-strong-text-base: #e5eeff;
  --info-strong-text-muted: #afc3e6;
  --info-strong-link: #f5f9ff;
  --info-strong-link-hover: #d9e8ff;
  --info-strong-link-active: #b9d1ff;
  --info-strong-border: #5d84d1;
  --info-strong-action-fill: #ffffff;
  --info-strong-action-fill-hover: #eef5ff;
  --info-strong-action-fill-active: #dce8ff;
  --info-strong-action-text: #1e40af;
  --info-strong-action-border: #ffffff;

  --info-stronger: #1e3a8a;
  --info-stronger-text-heading: #fffdfd;
  --info-stronger-text-base: #e4edff;
  --info-stronger-text-muted: #aabfe3;
  --info-stronger-link: #f5f9ff;
  --info-stronger-link-hover: #d9e8ff;
  --info-stronger-link-active: #b9d1ff;
  --info-stronger-border: #5478c5;
  --info-stronger-action-fill: #ffffff;
  --info-stronger-action-fill-hover: #eef5ff;
  --info-stronger-action-fill-active: #dce8ff;
  --info-stronger-action-text: #1e3a8a;
  --info-stronger-action-border: #ffffff;

  --error-weak: #ffffff;
  --error-weak-text-heading: #7f1d1d;
  --error-weak-text-base: #b91c1c;
  --error-weak-text-muted: #8f4d4d;
  --error-weak-link: #dc2626;
  --error-weak-link-hover: #b91c1c;
  --error-weak-link-active: #991b1b;
  --error-weak-border: #fecaca;
  --error-weak-action-fill: #ef4444;
  --error-weak-action-fill-hover: #dc2626;
  --error-weak-action-fill-active: #b91c1c;
  --error-weak-action-text: #ffffff;
  --error-weak-action-border: #ef4444;

  --error-soft: #fff1f2;
  --error-soft-text-heading: #7a0d0d;
  --error-soft-text-base: #d01616;
  --error-soft-text-muted: #a94a4a;
  --error-soft-link: #d01616;
  --error-soft-link-hover: #b01313;
  --error-soft-link-active: #8f1010;
  --error-soft-border: #f3b5b5;
  --error-soft-action-fill: #d01616;
  --error-soft-action-fill-hover: #b01313;
  --error-soft-action-fill-active: #8f1010;
  --error-soft-action-text: #ffffff;
  --error-soft-action-border: #d01616;

  --error-base: #dc2626;
  --error-base-text-heading: #fff8f8;
  --error-base-text-base: #ffe5e5;
  --error-base-text-muted: #ffb8b8;
  --error-base-link: #fff5f5;
  --error-base-link-hover: #ffe3e3;
  --error-base-link-active: #ffc4c4;
  --error-base-border: #f87171;
  --error-base-action-fill: #7f1d1d;
  --error-base-action-fill-hover: #6b1515;
  --error-base-action-fill-active: #520f0f;
  --error-base-action-text: #ffffff;
  --error-base-action-border: #7f1d1d;

  --error-strong: #991b1b;
  --error-strong-text-heading: #fffdfd;
  --error-strong-text-base: #ffd9d9;
  --error-strong-text-muted: #ff9e9e;
  --error-strong-link: #fff1f1;
  --error-strong-link-hover: #ffe0e0;
  --error-strong-link-active: #ffcaca;
  --error-strong-border: #c24141;
  --error-strong-action-fill: #ffffff;
  --error-strong-action-fill-hover: #ffeded;
  --error-strong-action-fill-active: #ffd5d5;
  --error-strong-action-text: #991b1b;
  --error-strong-action-border: #ffffff;

  --error-stronger: #7f1d1d;
  --error-stronger-text-heading: #fffdfd;
  --error-stronger-text-base: #ffd6d6;
  --error-stronger-text-muted: #ff9a9a;
  --error-stronger-link: #fff1f1;
  --error-stronger-link-hover: #ffe0e0;
  --error-stronger-link-active: #ffcaca;
  --error-stronger-border: #a63333;
  --error-stronger-action-fill: #ffffff;
  --error-stronger-action-fill-hover: #ffecec;
  --error-stronger-action-fill-active: #ffd4d4;
  --error-stronger-action-text: #7f1d1d;
  --error-stronger-action-border: #ffffff;

  --warning-weak: #ffffff;
  --warning-weak-text-heading: #3a2200;
  --warning-weak-text-base: #6b3f00;
  --warning-weak-text-muted: #8a6a35;
  --warning-weak-link: #e68a00;
  --warning-weak-link-hover: #cc7800;
  --warning-weak-link-active: #a66000;
  --warning-weak-border: #ffe2b8;
  --warning-weak-action-fill: #ff9f1a;
  --warning-weak-action-fill-hover: #e68a00;
  --warning-weak-action-fill-active: #bf7000;
  --warning-weak-action-text: #ffffff;
  --warning-weak-action-border: #ff9f1a;

  --warning-soft: #fef9ec;
  --warning-soft-text-heading: #5a2e00;
  --warning-soft-text-base: #7c4500;
  --warning-soft-text-muted: #8f6c2f;
  --warning-soft-link: #e68a00;
  --warning-soft-link-hover: #cc7800;
  --warning-soft-link-active: #a66000;
  --warning-soft-border: #f5d7a1;
  --warning-soft-action-fill: #f59e0b;
  --warning-soft-action-fill-hover: #d97706;
  --warning-soft-action-fill-active: #b45309;
  --warning-soft-action-text: #ffffff;
  --warning-soft-action-border: #f59e0b;

  --warning-base: #ffb020;
  --warning-base-text-heading: #fff9ef;
  --warning-base-text-base: #fff3d9;
  --warning-base-text-muted: #ffd27a;
  --warning-base-link: #fff4e0;
  --warning-base-link-hover: #ffe8c2;
  --warning-base-link-active: #ffd699;
  --warning-base-border: #f5c56e;
  --warning-base-action-fill: #7a4200;
  --warning-base-action-fill-hover: #5e3200;
  --warning-base-action-fill-active: #422300;
  --warning-base-action-text: #ffffff;
  --warning-base-action-border: #7a4200;

  --warning-strong: #d97706;
  --warning-strong-text-heading: #fffdf8;
  --warning-strong-text-base: #fff4e6;
  --warning-strong-text-muted: #ffd08a;
  --warning-strong-link: #fff3e0;
  --warning-strong-link-hover: #ffe2b8;
  --warning-strong-link-active: #ffd08a;
  --warning-strong-border: #c9983a;
  --warning-strong-action-fill: #ffffff;
  --warning-strong-action-fill-hover: #fff1db;
  --warning-strong-action-fill-active: #ffe0b3;
  --warning-strong-action-text: #d97706;
  --warning-strong-action-border: #ffffff;

  --warning-stronger: #a16207;
  --warning-stronger-text-heading: #fffdf8;
  --warning-stronger-text-base: #fff2dd;
  --warning-stronger-text-muted: #f5c56e;
  --warning-stronger-link: #fff3e0;
  --warning-stronger-link-hover: #ffe2b8;
  --warning-stronger-link-active: #ffd08a;
  --warning-stronger-border: #d9a441;
  --warning-stronger-action-fill: #ffffff;
  --warning-stronger-action-fill-hover: #fff1db;
  --warning-stronger-action-fill-active: #ffe0b3;
  --warning-stronger-action-text: #a16207;
  --warning-stronger-action-border: #ffffff;

  --header: #ffffff;
  --header-text-heading: #0f172a;
  --header-text-base: #374151;
  --header-text-muted: #94a3b8;
  --header-link: #1e293b;
  --header-link-hover: #0f172a;
  --header-link-active: #000000;
  --header-border: #e2e8f0;
  --header-action-fill: #312e81;
  --header-action-fill-hover: #312e81;
  --header-action-fill-active: #4338ca;
  --header-action-text: #ffffff;
  --header-action-border: #1e1b4b;

  --footer: #111827;
  --footer-text-heading: #fffdfd;
  --footer-text-base: #e5e7eb;
  --footer-text-muted: #9ca3af;
  --footer-link: #f8fafc;
  --footer-link-hover: #ffffff;
  --footer-link-active: #cbd5e1;
  --footer-border: #374151;
  --footer-action-fill: #ffffff;
  --footer-action-fill-hover: #e5e7eb;
  --footer-action-fill-active: #cbd5e1;
  --footer-action-text: #111827;
  --footer-action-border: #ffffff;

  --default: #ffffff;
  --default-text-heading: #111827;
  --default-text-base: #374151;
  --default-text-muted: #8f8f8f;
  --default-link: #a41034;
  --default-link-hover: #850a10;
  --default-link-active: #6e0810;
  --default-border: #e5e7eb;
  --default-action-fill: #a41034;
  --default-action-fill-hover: #850a10;
  --default-action-fill-active: #6e0810;
  --default-action-text: #ffffff;
  --default-action-border: #c20f18;

}
/* === Storefront Background Utility Classes === */
.bg-primary-weak {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.hover\:bg-primary-weak:hover {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.active\:bg-primary-weak:active {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.surface-primary-weak {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.hover\:surface-primary-weak:hover {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.active\:surface-primary-weak:active {
  background-color: var(--primary-weak);
  --bg-color: var(--primary-weak);

  --text-heading: var(--primary-weak-text-heading);
  --text-base: var(--primary-weak-text-base);
  --text-muted: var(--primary-weak-text-muted);

  --link: var(--primary-weak-link);
  --link-hover: var(--primary-weak-link-hover);
  --link-active: var(--primary-weak-link-active);

  --border: var(--primary-weak-border);

  --action-fill: var(--primary-weak-action-fill);
  --action-fill-hover: var(--primary-weak-action-fill-hover);
  --action-fill-active: var(--primary-weak-action-fill-active);
  --action-text: var(--primary-weak-action-text);
  --action-border: var(--primary-weak-action-border);

  color: var(--primary-weak-text-base);
  caret-color: var(--primary-weak-text-base);
}

.bg-primary-weak\/10 {
  background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
}

.hover\:bg-primary-weak\/10:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
}

.active\:bg-primary-weak\/10:active {
  background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent);
}

.bg-primary-weak\/30 {
  background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
}

.hover\:bg-primary-weak\/30:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
}

.active\:bg-primary-weak\/30:active {
  background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent);
}

.bg-primary-weak\/50 {
  background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
}

.hover\:bg-primary-weak\/50:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
}

.active\:bg-primary-weak\/50:active {
  background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent);
}

.bg-primary-weak\/70 {
  background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
}

.hover\:bg-primary-weak\/70:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
}

.active\:bg-primary-weak\/70:active {
  background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent);
}

.bg-primary-weak\/90 {
  background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
}

.hover\:bg-primary-weak\/90:hover {
  background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
}

.active\:bg-primary-weak\/90:active {
  background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent);
}

.bg-primary-soft {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.hover\:bg-primary-soft:hover {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.active\:bg-primary-soft:active {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.surface-primary-soft {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.hover\:surface-primary-soft:hover {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.active\:surface-primary-soft:active {
  background-color: var(--primary-soft);
  --bg-color: var(--primary-soft);

  --text-heading: var(--primary-soft-text-heading);
  --text-base: var(--primary-soft-text-base);
  --text-muted: var(--primary-soft-text-muted);

  --link: var(--primary-soft-link);
  --link-hover: var(--primary-soft-link-hover);
  --link-active: var(--primary-soft-link-active);

  --border: var(--primary-soft-border);

  --action-fill: var(--primary-soft-action-fill);
  --action-fill-hover: var(--primary-soft-action-fill-hover);
  --action-fill-active: var(--primary-soft-action-fill-active);
  --action-text: var(--primary-soft-action-text);
  --action-border: var(--primary-soft-action-border);

  color: var(--primary-soft-text-base);
  caret-color: var(--primary-soft-text-base);
}

.bg-primary-soft\/10 {
  background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
}

.hover\:bg-primary-soft\/10:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
}

.active\:bg-primary-soft\/10:active {
  background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent);
}

.bg-primary-soft\/30 {
  background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.hover\:bg-primary-soft\/30:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.active\:bg-primary-soft\/30:active {
  background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent);
}

.bg-primary-soft\/50 {
  background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.hover\:bg-primary-soft\/50:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.active\:bg-primary-soft\/50:active {
  background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.bg-primary-soft\/70 {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.hover\:bg-primary-soft\/70:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.active\:bg-primary-soft\/70:active {
  background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.bg-primary-soft\/90 {
  background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
}

.hover\:bg-primary-soft\/90:hover {
  background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
}

.active\:bg-primary-soft\/90:active {
  background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent);
}

.bg-primary-base {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.hover\:bg-primary-base:hover {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.active\:bg-primary-base:active {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.surface-primary-base {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.hover\:surface-primary-base:hover {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.active\:surface-primary-base:active {
  background-color: var(--primary-base);
  --bg-color: var(--primary-base);

  --text-heading: var(--primary-base-text-heading);
  --text-base: var(--primary-base-text-base);
  --text-muted: var(--primary-base-text-muted);

  --link: var(--primary-base-link);
  --link-hover: var(--primary-base-link-hover);
  --link-active: var(--primary-base-link-active);

  --border: var(--primary-base-border);

  --action-fill: var(--primary-base-action-fill);
  --action-fill-hover: var(--primary-base-action-fill-hover);
  --action-fill-active: var(--primary-base-action-fill-active);
  --action-text: var(--primary-base-action-text);
  --action-border: var(--primary-base-action-border);

  color: var(--primary-base-text-base);
  caret-color: var(--primary-base-text-base);
}

.bg-primary-base\/10 {
  background-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
}

.hover\:bg-primary-base\/10:hover {
  background-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
}

.active\:bg-primary-base\/10:active {
  background-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent);
}

.bg-primary-base\/30 {
  background-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
}

.hover\:bg-primary-base\/30:hover {
  background-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
}

.active\:bg-primary-base\/30:active {
  background-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent);
}

.bg-primary-base\/50 {
  background-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
}

.hover\:bg-primary-base\/50:hover {
  background-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
}

.active\:bg-primary-base\/50:active {
  background-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent);
}

.bg-primary-base\/70 {
  background-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
}

.hover\:bg-primary-base\/70:hover {
  background-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
}

.active\:bg-primary-base\/70:active {
  background-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent);
}

.bg-primary-base\/90 {
  background-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
}

.hover\:bg-primary-base\/90:hover {
  background-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
}

.active\:bg-primary-base\/90:active {
  background-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent);
}

.bg-primary-strong {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.hover\:bg-primary-strong:hover {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.active\:bg-primary-strong:active {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.surface-primary-strong {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.hover\:surface-primary-strong:hover {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.active\:surface-primary-strong:active {
  background-color: var(--primary-strong);
  --bg-color: var(--primary-strong);

  --text-heading: var(--primary-strong-text-heading);
  --text-base: var(--primary-strong-text-base);
  --text-muted: var(--primary-strong-text-muted);

  --link: var(--primary-strong-link);
  --link-hover: var(--primary-strong-link-hover);
  --link-active: var(--primary-strong-link-active);

  --border: var(--primary-strong-border);

  --action-fill: var(--primary-strong-action-fill);
  --action-fill-hover: var(--primary-strong-action-fill-hover);
  --action-fill-active: var(--primary-strong-action-fill-active);
  --action-text: var(--primary-strong-action-text);
  --action-border: var(--primary-strong-action-border);

  color: var(--primary-strong-text-base);
  caret-color: var(--primary-strong-text-base);
}

.bg-primary-strong\/10 {
  background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
}

.hover\:bg-primary-strong\/10:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
}

.active\:bg-primary-strong\/10:active {
  background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent);
}

.bg-primary-strong\/30 {
  background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
}

.hover\:bg-primary-strong\/30:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
}

.active\:bg-primary-strong\/30:active {
  background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent);
}

.bg-primary-strong\/50 {
  background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.hover\:bg-primary-strong\/50:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.active\:bg-primary-strong\/50:active {
  background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.bg-primary-strong\/70 {
  background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
}

.hover\:bg-primary-strong\/70:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
}

.active\:bg-primary-strong\/70:active {
  background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent);
}

.bg-primary-strong\/90 {
  background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
}

.hover\:bg-primary-strong\/90:hover {
  background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
}

.active\:bg-primary-strong\/90:active {
  background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent);
}

.bg-primary-stronger {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.hover\:bg-primary-stronger:hover {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.active\:bg-primary-stronger:active {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.surface-primary-stronger {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.hover\:surface-primary-stronger:hover {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.active\:surface-primary-stronger:active {
  background-color: var(--primary-stronger);
  --bg-color: var(--primary-stronger);

  --text-heading: var(--primary-stronger-text-heading);
  --text-base: var(--primary-stronger-text-base);
  --text-muted: var(--primary-stronger-text-muted);

  --link: var(--primary-stronger-link);
  --link-hover: var(--primary-stronger-link-hover);
  --link-active: var(--primary-stronger-link-active);

  --border: var(--primary-stronger-border);

  --action-fill: var(--primary-stronger-action-fill);
  --action-fill-hover: var(--primary-stronger-action-fill-hover);
  --action-fill-active: var(--primary-stronger-action-fill-active);
  --action-text: var(--primary-stronger-action-text);
  --action-border: var(--primary-stronger-action-border);

  color: var(--primary-stronger-text-base);
  caret-color: var(--primary-stronger-text-base);
}

.bg-primary-stronger\/10 {
  background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
}

.hover\:bg-primary-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
}

.active\:bg-primary-stronger\/10:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent);
}

.bg-primary-stronger\/30 {
  background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
}

.hover\:bg-primary-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
}

.active\:bg-primary-stronger\/30:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent);
}

.bg-primary-stronger\/50 {
  background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
}

.hover\:bg-primary-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
}

.active\:bg-primary-stronger\/50:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent);
}

.bg-primary-stronger\/70 {
  background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
}

.hover\:bg-primary-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
}

.active\:bg-primary-stronger\/70:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent);
}

.bg-primary-stronger\/90 {
  background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
}

.hover\:bg-primary-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
}

.active\:bg-primary-stronger\/90:active {
  background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent);
}

.bg-secondary-weak {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.hover\:bg-secondary-weak:hover {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.active\:bg-secondary-weak:active {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.surface-secondary-weak {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.hover\:surface-secondary-weak:hover {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.active\:surface-secondary-weak:active {
  background-color: var(--secondary-weak);
  --bg-color: var(--secondary-weak);

  --text-heading: var(--secondary-weak-text-heading);
  --text-base: var(--secondary-weak-text-base);
  --text-muted: var(--secondary-weak-text-muted);

  --link: var(--secondary-weak-link);
  --link-hover: var(--secondary-weak-link-hover);
  --link-active: var(--secondary-weak-link-active);

  --border: var(--secondary-weak-border);

  --action-fill: var(--secondary-weak-action-fill);
  --action-fill-hover: var(--secondary-weak-action-fill-hover);
  --action-fill-active: var(--secondary-weak-action-fill-active);
  --action-text: var(--secondary-weak-action-text);
  --action-border: var(--secondary-weak-action-border);

  color: var(--secondary-weak-text-base);
  caret-color: var(--secondary-weak-text-base);
}

.bg-secondary-weak\/10 {
  background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
}

.hover\:bg-secondary-weak\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
}

.active\:bg-secondary-weak\/10:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent);
}

.bg-secondary-weak\/30 {
  background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
}

.hover\:bg-secondary-weak\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
}

.active\:bg-secondary-weak\/30:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent);
}

.bg-secondary-weak\/50 {
  background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
}

.hover\:bg-secondary-weak\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
}

.active\:bg-secondary-weak\/50:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent);
}

.bg-secondary-weak\/70 {
  background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
}

.hover\:bg-secondary-weak\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
}

.active\:bg-secondary-weak\/70:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent);
}

.bg-secondary-weak\/90 {
  background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
}

.hover\:bg-secondary-weak\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
}

.active\:bg-secondary-weak\/90:active {
  background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent);
}

.bg-secondary-soft {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.hover\:bg-secondary-soft:hover {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.active\:bg-secondary-soft:active {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.surface-secondary-soft {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.hover\:surface-secondary-soft:hover {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.active\:surface-secondary-soft:active {
  background-color: var(--secondary-soft);
  --bg-color: var(--secondary-soft);

  --text-heading: var(--secondary-soft-text-heading);
  --text-base: var(--secondary-soft-text-base);
  --text-muted: var(--secondary-soft-text-muted);

  --link: var(--secondary-soft-link);
  --link-hover: var(--secondary-soft-link-hover);
  --link-active: var(--secondary-soft-link-active);

  --border: var(--secondary-soft-border);

  --action-fill: var(--secondary-soft-action-fill);
  --action-fill-hover: var(--secondary-soft-action-fill-hover);
  --action-fill-active: var(--secondary-soft-action-fill-active);
  --action-text: var(--secondary-soft-action-text);
  --action-border: var(--secondary-soft-action-border);

  color: var(--secondary-soft-text-base);
  caret-color: var(--secondary-soft-text-base);
}

.bg-secondary-soft\/10 {
  background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
}

.hover\:bg-secondary-soft\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
}

.active\:bg-secondary-soft\/10:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent);
}

.bg-secondary-soft\/30 {
  background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
}

.hover\:bg-secondary-soft\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
}

.active\:bg-secondary-soft\/30:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent);
}

.bg-secondary-soft\/50 {
  background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
}

.hover\:bg-secondary-soft\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
}

.active\:bg-secondary-soft\/50:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent);
}

.bg-secondary-soft\/70 {
  background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
}

.hover\:bg-secondary-soft\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
}

.active\:bg-secondary-soft\/70:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent);
}

.bg-secondary-soft\/90 {
  background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
}

.hover\:bg-secondary-soft\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
}

.active\:bg-secondary-soft\/90:active {
  background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent);
}

.bg-secondary-base {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.hover\:bg-secondary-base:hover {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.active\:bg-secondary-base:active {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.surface-secondary-base {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.hover\:surface-secondary-base:hover {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.active\:surface-secondary-base:active {
  background-color: var(--secondary-base);
  --bg-color: var(--secondary-base);

  --text-heading: var(--secondary-base-text-heading);
  --text-base: var(--secondary-base-text-base);
  --text-muted: var(--secondary-base-text-muted);

  --link: var(--secondary-base-link);
  --link-hover: var(--secondary-base-link-hover);
  --link-active: var(--secondary-base-link-active);

  --border: var(--secondary-base-border);

  --action-fill: var(--secondary-base-action-fill);
  --action-fill-hover: var(--secondary-base-action-fill-hover);
  --action-fill-active: var(--secondary-base-action-fill-active);
  --action-text: var(--secondary-base-action-text);
  --action-border: var(--secondary-base-action-border);

  color: var(--secondary-base-text-base);
  caret-color: var(--secondary-base-text-base);
}

.bg-secondary-base\/10 {
  background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
}

.hover\:bg-secondary-base\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
}

.active\:bg-secondary-base\/10:active {
  background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent);
}

.bg-secondary-base\/30 {
  background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
}

.hover\:bg-secondary-base\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
}

.active\:bg-secondary-base\/30:active {
  background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent);
}

.bg-secondary-base\/50 {
  background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
}

.hover\:bg-secondary-base\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
}

.active\:bg-secondary-base\/50:active {
  background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent);
}

.bg-secondary-base\/70 {
  background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
}

.hover\:bg-secondary-base\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
}

.active\:bg-secondary-base\/70:active {
  background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent);
}

.bg-secondary-base\/90 {
  background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
}

.hover\:bg-secondary-base\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
}

.active\:bg-secondary-base\/90:active {
  background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent);
}

.bg-secondary-strong {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.hover\:bg-secondary-strong:hover {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.active\:bg-secondary-strong:active {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.surface-secondary-strong {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.hover\:surface-secondary-strong:hover {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.active\:surface-secondary-strong:active {
  background-color: var(--secondary-strong);
  --bg-color: var(--secondary-strong);

  --text-heading: var(--secondary-strong-text-heading);
  --text-base: var(--secondary-strong-text-base);
  --text-muted: var(--secondary-strong-text-muted);

  --link: var(--secondary-strong-link);
  --link-hover: var(--secondary-strong-link-hover);
  --link-active: var(--secondary-strong-link-active);

  --border: var(--secondary-strong-border);

  --action-fill: var(--secondary-strong-action-fill);
  --action-fill-hover: var(--secondary-strong-action-fill-hover);
  --action-fill-active: var(--secondary-strong-action-fill-active);
  --action-text: var(--secondary-strong-action-text);
  --action-border: var(--secondary-strong-action-border);

  color: var(--secondary-strong-text-base);
  caret-color: var(--secondary-strong-text-base);
}

.bg-secondary-strong\/10 {
  background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
}

.hover\:bg-secondary-strong\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
}

.active\:bg-secondary-strong\/10:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent);
}

.bg-secondary-strong\/30 {
  background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
}

.hover\:bg-secondary-strong\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
}

.active\:bg-secondary-strong\/30:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent);
}

.bg-secondary-strong\/50 {
  background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
}

.hover\:bg-secondary-strong\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
}

.active\:bg-secondary-strong\/50:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent);
}

.bg-secondary-strong\/70 {
  background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
}

.hover\:bg-secondary-strong\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
}

.active\:bg-secondary-strong\/70:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent);
}

.bg-secondary-strong\/90 {
  background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
}

.hover\:bg-secondary-strong\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
}

.active\:bg-secondary-strong\/90:active {
  background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent);
}

.bg-secondary-stronger {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.hover\:bg-secondary-stronger:hover {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.active\:bg-secondary-stronger:active {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.surface-secondary-stronger {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.hover\:surface-secondary-stronger:hover {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.active\:surface-secondary-stronger:active {
  background-color: var(--secondary-stronger);
  --bg-color: var(--secondary-stronger);

  --text-heading: var(--secondary-stronger-text-heading);
  --text-base: var(--secondary-stronger-text-base);
  --text-muted: var(--secondary-stronger-text-muted);

  --link: var(--secondary-stronger-link);
  --link-hover: var(--secondary-stronger-link-hover);
  --link-active: var(--secondary-stronger-link-active);

  --border: var(--secondary-stronger-border);

  --action-fill: var(--secondary-stronger-action-fill);
  --action-fill-hover: var(--secondary-stronger-action-fill-hover);
  --action-fill-active: var(--secondary-stronger-action-fill-active);
  --action-text: var(--secondary-stronger-action-text);
  --action-border: var(--secondary-stronger-action-border);

  color: var(--secondary-stronger-text-base);
  caret-color: var(--secondary-stronger-text-base);
}

.bg-secondary-stronger\/10 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
}

.hover\:bg-secondary-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
}

.active\:bg-secondary-stronger\/10:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent);
}

.bg-secondary-stronger\/30 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
}

.hover\:bg-secondary-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
}

.active\:bg-secondary-stronger\/30:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent);
}

.bg-secondary-stronger\/50 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
}

.hover\:bg-secondary-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
}

.active\:bg-secondary-stronger\/50:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent);
}

.bg-secondary-stronger\/70 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
}

.hover\:bg-secondary-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
}

.active\:bg-secondary-stronger\/70:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent);
}

.bg-secondary-stronger\/90 {
  background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
}

.hover\:bg-secondary-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
}

.active\:bg-secondary-stronger\/90:active {
  background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent);
}

.bg-accent-weak {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.hover\:bg-accent-weak:hover {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.active\:bg-accent-weak:active {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.surface-accent-weak {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.hover\:surface-accent-weak:hover {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.active\:surface-accent-weak:active {
  background-color: var(--accent-weak);
  --bg-color: var(--accent-weak);

  --text-heading: var(--accent-weak-text-heading);
  --text-base: var(--accent-weak-text-base);
  --text-muted: var(--accent-weak-text-muted);

  --link: var(--accent-weak-link);
  --link-hover: var(--accent-weak-link-hover);
  --link-active: var(--accent-weak-link-active);

  --border: var(--accent-weak-border);

  --action-fill: var(--accent-weak-action-fill);
  --action-fill-hover: var(--accent-weak-action-fill-hover);
  --action-fill-active: var(--accent-weak-action-fill-active);
  --action-text: var(--accent-weak-action-text);
  --action-border: var(--accent-weak-action-border);

  color: var(--accent-weak-text-base);
  caret-color: var(--accent-weak-text-base);
}

.bg-accent-weak\/10 {
  background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
}

.hover\:bg-accent-weak\/10:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
}

.active\:bg-accent-weak\/10:active {
  background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent);
}

.bg-accent-weak\/30 {
  background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
}

.hover\:bg-accent-weak\/30:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
}

.active\:bg-accent-weak\/30:active {
  background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent);
}

.bg-accent-weak\/50 {
  background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
}

.hover\:bg-accent-weak\/50:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
}

.active\:bg-accent-weak\/50:active {
  background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent);
}

.bg-accent-weak\/70 {
  background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}

.hover\:bg-accent-weak\/70:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}

.active\:bg-accent-weak\/70:active {
  background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent);
}

.bg-accent-weak\/90 {
  background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
}

.hover\:bg-accent-weak\/90:hover {
  background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
}

.active\:bg-accent-weak\/90:active {
  background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent);
}

.bg-accent-soft {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.hover\:bg-accent-soft:hover {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.active\:bg-accent-soft:active {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.surface-accent-soft {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.hover\:surface-accent-soft:hover {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.active\:surface-accent-soft:active {
  background-color: var(--accent-soft);
  --bg-color: var(--accent-soft);

  --text-heading: var(--accent-soft-text-heading);
  --text-base: var(--accent-soft-text-base);
  --text-muted: var(--accent-soft-text-muted);

  --link: var(--accent-soft-link);
  --link-hover: var(--accent-soft-link-hover);
  --link-active: var(--accent-soft-link-active);

  --border: var(--accent-soft-border);

  --action-fill: var(--accent-soft-action-fill);
  --action-fill-hover: var(--accent-soft-action-fill-hover);
  --action-fill-active: var(--accent-soft-action-fill-active);
  --action-text: var(--accent-soft-action-text);
  --action-border: var(--accent-soft-action-border);

  color: var(--accent-soft-text-base);
  caret-color: var(--accent-soft-text-base);
}

.bg-accent-soft\/10 {
  background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
}

.hover\:bg-accent-soft\/10:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
}

.active\:bg-accent-soft\/10:active {
  background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent);
}

.bg-accent-soft\/30 {
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.hover\:bg-accent-soft\/30:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.active\:bg-accent-soft\/30:active {
  background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.bg-accent-soft\/50 {
  background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.hover\:bg-accent-soft\/50:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.active\:bg-accent-soft\/50:active {
  background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.bg-accent-soft\/70 {
  background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.hover\:bg-accent-soft\/70:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.active\:bg-accent-soft\/70:active {
  background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.bg-accent-soft\/90 {
  background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.hover\:bg-accent-soft\/90:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.active\:bg-accent-soft\/90:active {
  background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.bg-accent-base {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.hover\:bg-accent-base:hover {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.active\:bg-accent-base:active {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.surface-accent-base {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.hover\:surface-accent-base:hover {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.active\:surface-accent-base:active {
  background-color: var(--accent-base);
  --bg-color: var(--accent-base);

  --text-heading: var(--accent-base-text-heading);
  --text-base: var(--accent-base-text-base);
  --text-muted: var(--accent-base-text-muted);

  --link: var(--accent-base-link);
  --link-hover: var(--accent-base-link-hover);
  --link-active: var(--accent-base-link-active);

  --border: var(--accent-base-border);

  --action-fill: var(--accent-base-action-fill);
  --action-fill-hover: var(--accent-base-action-fill-hover);
  --action-fill-active: var(--accent-base-action-fill-active);
  --action-text: var(--accent-base-action-text);
  --action-border: var(--accent-base-action-border);

  color: var(--accent-base-text-base);
  caret-color: var(--accent-base-text-base);
}

.bg-accent-base\/10 {
  background-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.hover\:bg-accent-base\/10:hover {
  background-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.active\:bg-accent-base\/10:active {
  background-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.bg-accent-base\/30 {
  background-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.hover\:bg-accent-base\/30:hover {
  background-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.active\:bg-accent-base\/30:active {
  background-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.bg-accent-base\/50 {
  background-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

.hover\:bg-accent-base\/50:hover {
  background-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

.active\:bg-accent-base\/50:active {
  background-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

.bg-accent-base\/70 {
  background-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
}

.hover\:bg-accent-base\/70:hover {
  background-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
}

.active\:bg-accent-base\/70:active {
  background-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent);
}

.bg-accent-base\/90 {
  background-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
}

.hover\:bg-accent-base\/90:hover {
  background-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
}

.active\:bg-accent-base\/90:active {
  background-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent);
}

.bg-accent-strong {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.hover\:bg-accent-strong:hover {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.active\:bg-accent-strong:active {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.surface-accent-strong {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.hover\:surface-accent-strong:hover {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.active\:surface-accent-strong:active {
  background-color: var(--accent-strong);
  --bg-color: var(--accent-strong);

  --text-heading: var(--accent-strong-text-heading);
  --text-base: var(--accent-strong-text-base);
  --text-muted: var(--accent-strong-text-muted);

  --link: var(--accent-strong-link);
  --link-hover: var(--accent-strong-link-hover);
  --link-active: var(--accent-strong-link-active);

  --border: var(--accent-strong-border);

  --action-fill: var(--accent-strong-action-fill);
  --action-fill-hover: var(--accent-strong-action-fill-hover);
  --action-fill-active: var(--accent-strong-action-fill-active);
  --action-text: var(--accent-strong-action-text);
  --action-border: var(--accent-strong-action-border);

  color: var(--accent-strong-text-base);
  caret-color: var(--accent-strong-text-base);
}

.bg-accent-strong\/10 {
  background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.hover\:bg-accent-strong\/10:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.active\:bg-accent-strong\/10:active {
  background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.bg-accent-strong\/30 {
  background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.hover\:bg-accent-strong\/30:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.active\:bg-accent-strong\/30:active {
  background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.bg-accent-strong\/50 {
  background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
}

.hover\:bg-accent-strong\/50:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
}

.active\:bg-accent-strong\/50:active {
  background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent);
}

.bg-accent-strong\/70 {
  background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.hover\:bg-accent-strong\/70:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.active\:bg-accent-strong\/70:active {
  background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent);
}

.bg-accent-strong\/90 {
  background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
}

.hover\:bg-accent-strong\/90:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
}

.active\:bg-accent-strong\/90:active {
  background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent);
}

.bg-accent-stronger {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.hover\:bg-accent-stronger:hover {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.active\:bg-accent-stronger:active {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.surface-accent-stronger {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.hover\:surface-accent-stronger:hover {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.active\:surface-accent-stronger:active {
  background-color: var(--accent-stronger);
  --bg-color: var(--accent-stronger);

  --text-heading: var(--accent-stronger-text-heading);
  --text-base: var(--accent-stronger-text-base);
  --text-muted: var(--accent-stronger-text-muted);

  --link: var(--accent-stronger-link);
  --link-hover: var(--accent-stronger-link-hover);
  --link-active: var(--accent-stronger-link-active);

  --border: var(--accent-stronger-border);

  --action-fill: var(--accent-stronger-action-fill);
  --action-fill-hover: var(--accent-stronger-action-fill-hover);
  --action-fill-active: var(--accent-stronger-action-fill-active);
  --action-text: var(--accent-stronger-action-text);
  --action-border: var(--accent-stronger-action-border);

  color: var(--accent-stronger-text-base);
  caret-color: var(--accent-stronger-text-base);
}

.bg-accent-stronger\/10 {
  background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
}

.hover\:bg-accent-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
}

.active\:bg-accent-stronger\/10:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent);
}

.bg-accent-stronger\/30 {
  background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
}

.hover\:bg-accent-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
}

.active\:bg-accent-stronger\/30:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent);
}

.bg-accent-stronger\/50 {
  background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
}

.hover\:bg-accent-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
}

.active\:bg-accent-stronger\/50:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent);
}

.bg-accent-stronger\/70 {
  background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
}

.hover\:bg-accent-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
}

.active\:bg-accent-stronger\/70:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent);
}

.bg-accent-stronger\/90 {
  background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
}

.hover\:bg-accent-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
}

.active\:bg-accent-stronger\/90:active {
  background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent);
}

.bg-neutral-weak {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.hover\:bg-neutral-weak:hover {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.active\:bg-neutral-weak:active {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.surface-neutral-weak {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.hover\:surface-neutral-weak:hover {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.active\:surface-neutral-weak:active {
  background-color: var(--neutral-weak);
  --bg-color: var(--neutral-weak);

  --text-heading: var(--neutral-weak-text-heading);
  --text-base: var(--neutral-weak-text-base);
  --text-muted: var(--neutral-weak-text-muted);

  --link: var(--neutral-weak-link);
  --link-hover: var(--neutral-weak-link-hover);
  --link-active: var(--neutral-weak-link-active);

  --border: var(--neutral-weak-border);

  --action-fill: var(--neutral-weak-action-fill);
  --action-fill-hover: var(--neutral-weak-action-fill-hover);
  --action-fill-active: var(--neutral-weak-action-fill-active);
  --action-text: var(--neutral-weak-action-text);
  --action-border: var(--neutral-weak-action-border);

  color: var(--neutral-weak-text-base);
  caret-color: var(--neutral-weak-text-base);
}

.bg-neutral-weak\/10 {
  background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
}

.hover\:bg-neutral-weak\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
}

.active\:bg-neutral-weak\/10:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent);
}

.bg-neutral-weak\/30 {
  background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
}

.hover\:bg-neutral-weak\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
}

.active\:bg-neutral-weak\/30:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent);
}

.bg-neutral-weak\/50 {
  background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
}

.hover\:bg-neutral-weak\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
}

.active\:bg-neutral-weak\/50:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent);
}

.bg-neutral-weak\/70 {
  background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
}

.hover\:bg-neutral-weak\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
}

.active\:bg-neutral-weak\/70:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent);
}

.bg-neutral-weak\/90 {
  background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
}

.hover\:bg-neutral-weak\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
}

.active\:bg-neutral-weak\/90:active {
  background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent);
}

.bg-neutral-soft {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.hover\:bg-neutral-soft:hover {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.active\:bg-neutral-soft:active {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.surface-neutral-soft {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.hover\:surface-neutral-soft:hover {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.active\:surface-neutral-soft:active {
  background-color: var(--neutral-soft);
  --bg-color: var(--neutral-soft);

  --text-heading: var(--neutral-soft-text-heading);
  --text-base: var(--neutral-soft-text-base);
  --text-muted: var(--neutral-soft-text-muted);

  --link: var(--neutral-soft-link);
  --link-hover: var(--neutral-soft-link-hover);
  --link-active: var(--neutral-soft-link-active);

  --border: var(--neutral-soft-border);

  --action-fill: var(--neutral-soft-action-fill);
  --action-fill-hover: var(--neutral-soft-action-fill-hover);
  --action-fill-active: var(--neutral-soft-action-fill-active);
  --action-text: var(--neutral-soft-action-text);
  --action-border: var(--neutral-soft-action-border);

  color: var(--neutral-soft-text-base);
  caret-color: var(--neutral-soft-text-base);
}

.bg-neutral-soft\/10 {
  background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
}

.hover\:bg-neutral-soft\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
}

.active\:bg-neutral-soft\/10:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent);
}

.bg-neutral-soft\/30 {
  background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
}

.hover\:bg-neutral-soft\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
}

.active\:bg-neutral-soft\/30:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent);
}

.bg-neutral-soft\/50 {
  background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
}

.hover\:bg-neutral-soft\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
}

.active\:bg-neutral-soft\/50:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent);
}

.bg-neutral-soft\/70 {
  background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.hover\:bg-neutral-soft\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.active\:bg-neutral-soft\/70:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent);
}

.bg-neutral-soft\/90 {
  background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
}

.hover\:bg-neutral-soft\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
}

.active\:bg-neutral-soft\/90:active {
  background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent);
}

.bg-neutral-base {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.hover\:bg-neutral-base:hover {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.active\:bg-neutral-base:active {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.surface-neutral-base {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.hover\:surface-neutral-base:hover {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.active\:surface-neutral-base:active {
  background-color: var(--neutral-base);
  --bg-color: var(--neutral-base);

  --text-heading: var(--neutral-base-text-heading);
  --text-base: var(--neutral-base-text-base);
  --text-muted: var(--neutral-base-text-muted);

  --link: var(--neutral-base-link);
  --link-hover: var(--neutral-base-link-hover);
  --link-active: var(--neutral-base-link-active);

  --border: var(--neutral-base-border);

  --action-fill: var(--neutral-base-action-fill);
  --action-fill-hover: var(--neutral-base-action-fill-hover);
  --action-fill-active: var(--neutral-base-action-fill-active);
  --action-text: var(--neutral-base-action-text);
  --action-border: var(--neutral-base-action-border);

  color: var(--neutral-base-text-base);
  caret-color: var(--neutral-base-text-base);
}

.bg-neutral-base\/10 {
  background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
}

.hover\:bg-neutral-base\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
}

.active\:bg-neutral-base\/10:active {
  background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent);
}

.bg-neutral-base\/30 {
  background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
}

.hover\:bg-neutral-base\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
}

.active\:bg-neutral-base\/30:active {
  background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent);
}

.bg-neutral-base\/50 {
  background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
}

.hover\:bg-neutral-base\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
}

.active\:bg-neutral-base\/50:active {
  background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent);
}

.bg-neutral-base\/70 {
  background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
}

.hover\:bg-neutral-base\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
}

.active\:bg-neutral-base\/70:active {
  background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent);
}

.bg-neutral-base\/90 {
  background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
}

.hover\:bg-neutral-base\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
}

.active\:bg-neutral-base\/90:active {
  background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent);
}

.bg-neutral-strong {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.hover\:bg-neutral-strong:hover {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.active\:bg-neutral-strong:active {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.surface-neutral-strong {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.hover\:surface-neutral-strong:hover {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.active\:surface-neutral-strong:active {
  background-color: var(--neutral-strong);
  --bg-color: var(--neutral-strong);

  --text-heading: var(--neutral-strong-text-heading);
  --text-base: var(--neutral-strong-text-base);
  --text-muted: var(--neutral-strong-text-muted);

  --link: var(--neutral-strong-link);
  --link-hover: var(--neutral-strong-link-hover);
  --link-active: var(--neutral-strong-link-active);

  --border: var(--neutral-strong-border);

  --action-fill: var(--neutral-strong-action-fill);
  --action-fill-hover: var(--neutral-strong-action-fill-hover);
  --action-fill-active: var(--neutral-strong-action-fill-active);
  --action-text: var(--neutral-strong-action-text);
  --action-border: var(--neutral-strong-action-border);

  color: var(--neutral-strong-text-base);
  caret-color: var(--neutral-strong-text-base);
}

.bg-neutral-strong\/10 {
  background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
}

.hover\:bg-neutral-strong\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
}

.active\:bg-neutral-strong\/10:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent);
}

.bg-neutral-strong\/30 {
  background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
}

.hover\:bg-neutral-strong\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
}

.active\:bg-neutral-strong\/30:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent);
}

.bg-neutral-strong\/50 {
  background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
}

.hover\:bg-neutral-strong\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
}

.active\:bg-neutral-strong\/50:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent);
}

.bg-neutral-strong\/70 {
  background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
}

.hover\:bg-neutral-strong\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
}

.active\:bg-neutral-strong\/70:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent);
}

.bg-neutral-strong\/90 {
  background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
}

.hover\:bg-neutral-strong\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
}

.active\:bg-neutral-strong\/90:active {
  background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent);
}

.bg-neutral-stronger {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.hover\:bg-neutral-stronger:hover {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.active\:bg-neutral-stronger:active {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.surface-neutral-stronger {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.hover\:surface-neutral-stronger:hover {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.active\:surface-neutral-stronger:active {
  background-color: var(--neutral-stronger);
  --bg-color: var(--neutral-stronger);

  --text-heading: var(--neutral-stronger-text-heading);
  --text-base: var(--neutral-stronger-text-base);
  --text-muted: var(--neutral-stronger-text-muted);

  --link: var(--neutral-stronger-link);
  --link-hover: var(--neutral-stronger-link-hover);
  --link-active: var(--neutral-stronger-link-active);

  --border: var(--neutral-stronger-border);

  --action-fill: var(--neutral-stronger-action-fill);
  --action-fill-hover: var(--neutral-stronger-action-fill-hover);
  --action-fill-active: var(--neutral-stronger-action-fill-active);
  --action-text: var(--neutral-stronger-action-text);
  --action-border: var(--neutral-stronger-action-border);

  color: var(--neutral-stronger-text-base);
  caret-color: var(--neutral-stronger-text-base);
}

.bg-neutral-stronger\/10 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
}

.hover\:bg-neutral-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
}

.active\:bg-neutral-stronger\/10:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent);
}

.bg-neutral-stronger\/30 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
}

.hover\:bg-neutral-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
}

.active\:bg-neutral-stronger\/30:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent);
}

.bg-neutral-stronger\/50 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
}

.hover\:bg-neutral-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
}

.active\:bg-neutral-stronger\/50:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent);
}

.bg-neutral-stronger\/70 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
}

.hover\:bg-neutral-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
}

.active\:bg-neutral-stronger\/70:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent);
}

.bg-neutral-stronger\/90 {
  background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
}

.hover\:bg-neutral-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
}

.active\:bg-neutral-stronger\/90:active {
  background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent);
}

.bg-success-weak {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.hover\:bg-success-weak:hover {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.active\:bg-success-weak:active {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.surface-success-weak {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.hover\:surface-success-weak:hover {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.active\:surface-success-weak:active {
  background-color: var(--success-weak);
  --bg-color: var(--success-weak);

  --text-heading: var(--success-weak-text-heading);
  --text-base: var(--success-weak-text-base);
  --text-muted: var(--success-weak-text-muted);

  --link: var(--success-weak-link);
  --link-hover: var(--success-weak-link-hover);
  --link-active: var(--success-weak-link-active);

  --border: var(--success-weak-border);

  --action-fill: var(--success-weak-action-fill);
  --action-fill-hover: var(--success-weak-action-fill-hover);
  --action-fill-active: var(--success-weak-action-fill-active);
  --action-text: var(--success-weak-action-text);
  --action-border: var(--success-weak-action-border);

  color: var(--success-weak-text-base);
  caret-color: var(--success-weak-text-base);
}

.bg-success-weak\/10 {
  background-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
}

.hover\:bg-success-weak\/10:hover {
  background-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
}

.active\:bg-success-weak\/10:active {
  background-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent);
}

.bg-success-weak\/30 {
  background-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
}

.hover\:bg-success-weak\/30:hover {
  background-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
}

.active\:bg-success-weak\/30:active {
  background-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent);
}

.bg-success-weak\/50 {
  background-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
}

.hover\:bg-success-weak\/50:hover {
  background-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
}

.active\:bg-success-weak\/50:active {
  background-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent);
}

.bg-success-weak\/70 {
  background-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
}

.hover\:bg-success-weak\/70:hover {
  background-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
}

.active\:bg-success-weak\/70:active {
  background-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent);
}

.bg-success-weak\/90 {
  background-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
}

.hover\:bg-success-weak\/90:hover {
  background-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
}

.active\:bg-success-weak\/90:active {
  background-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent);
}

.bg-success-soft {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.hover\:bg-success-soft:hover {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.active\:bg-success-soft:active {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.surface-success-soft {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.hover\:surface-success-soft:hover {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.active\:surface-success-soft:active {
  background-color: var(--success-soft);
  --bg-color: var(--success-soft);

  --text-heading: var(--success-soft-text-heading);
  --text-base: var(--success-soft-text-base);
  --text-muted: var(--success-soft-text-muted);

  --link: var(--success-soft-link);
  --link-hover: var(--success-soft-link-hover);
  --link-active: var(--success-soft-link-active);

  --border: var(--success-soft-border);

  --action-fill: var(--success-soft-action-fill);
  --action-fill-hover: var(--success-soft-action-fill-hover);
  --action-fill-active: var(--success-soft-action-fill-active);
  --action-text: var(--success-soft-action-text);
  --action-border: var(--success-soft-action-border);

  color: var(--success-soft-text-base);
  caret-color: var(--success-soft-text-base);
}

.bg-success-soft\/10 {
  background-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
}

.hover\:bg-success-soft\/10:hover {
  background-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
}

.active\:bg-success-soft\/10:active {
  background-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent);
}

.bg-success-soft\/30 {
  background-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
}

.hover\:bg-success-soft\/30:hover {
  background-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
}

.active\:bg-success-soft\/30:active {
  background-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent);
}

.bg-success-soft\/50 {
  background-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
}

.hover\:bg-success-soft\/50:hover {
  background-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
}

.active\:bg-success-soft\/50:active {
  background-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent);
}

.bg-success-soft\/70 {
  background-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
}

.hover\:bg-success-soft\/70:hover {
  background-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
}

.active\:bg-success-soft\/70:active {
  background-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent);
}

.bg-success-soft\/90 {
  background-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
}

.hover\:bg-success-soft\/90:hover {
  background-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
}

.active\:bg-success-soft\/90:active {
  background-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent);
}

.bg-success-base {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.hover\:bg-success-base:hover {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.active\:bg-success-base:active {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.surface-success-base {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.hover\:surface-success-base:hover {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.active\:surface-success-base:active {
  background-color: var(--success-base);
  --bg-color: var(--success-base);

  --text-heading: var(--success-base-text-heading);
  --text-base: var(--success-base-text-base);
  --text-muted: var(--success-base-text-muted);

  --link: var(--success-base-link);
  --link-hover: var(--success-base-link-hover);
  --link-active: var(--success-base-link-active);

  --border: var(--success-base-border);

  --action-fill: var(--success-base-action-fill);
  --action-fill-hover: var(--success-base-action-fill-hover);
  --action-fill-active: var(--success-base-action-fill-active);
  --action-text: var(--success-base-action-text);
  --action-border: var(--success-base-action-border);

  color: var(--success-base-text-base);
  caret-color: var(--success-base-text-base);
}

.bg-success-base\/10 {
  background-color: color-mix(in srgb, var(--success-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent);
}

.hover\:bg-success-base\/10:hover {
  background-color: color-mix(in srgb, var(--success-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent);
}

.active\:bg-success-base\/10:active {
  background-color: color-mix(in srgb, var(--success-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent);
}

.bg-success-base\/30 {
  background-color: color-mix(in srgb, var(--success-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent);
}

.hover\:bg-success-base\/30:hover {
  background-color: color-mix(in srgb, var(--success-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent);
}

.active\:bg-success-base\/30:active {
  background-color: color-mix(in srgb, var(--success-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent);
}

.bg-success-base\/50 {
  background-color: color-mix(in srgb, var(--success-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent);
}

.hover\:bg-success-base\/50:hover {
  background-color: color-mix(in srgb, var(--success-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent);
}

.active\:bg-success-base\/50:active {
  background-color: color-mix(in srgb, var(--success-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent);
}

.bg-success-base\/70 {
  background-color: color-mix(in srgb, var(--success-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent);
}

.hover\:bg-success-base\/70:hover {
  background-color: color-mix(in srgb, var(--success-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent);
}

.active\:bg-success-base\/70:active {
  background-color: color-mix(in srgb, var(--success-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent);
}

.bg-success-base\/90 {
  background-color: color-mix(in srgb, var(--success-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent);
}

.hover\:bg-success-base\/90:hover {
  background-color: color-mix(in srgb, var(--success-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent);
}

.active\:bg-success-base\/90:active {
  background-color: color-mix(in srgb, var(--success-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent);
}

.bg-success-strong {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.hover\:bg-success-strong:hover {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.active\:bg-success-strong:active {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.surface-success-strong {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.hover\:surface-success-strong:hover {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.active\:surface-success-strong:active {
  background-color: var(--success-strong);
  --bg-color: var(--success-strong);

  --text-heading: var(--success-strong-text-heading);
  --text-base: var(--success-strong-text-base);
  --text-muted: var(--success-strong-text-muted);

  --link: var(--success-strong-link);
  --link-hover: var(--success-strong-link-hover);
  --link-active: var(--success-strong-link-active);

  --border: var(--success-strong-border);

  --action-fill: var(--success-strong-action-fill);
  --action-fill-hover: var(--success-strong-action-fill-hover);
  --action-fill-active: var(--success-strong-action-fill-active);
  --action-text: var(--success-strong-action-text);
  --action-border: var(--success-strong-action-border);

  color: var(--success-strong-text-base);
  caret-color: var(--success-strong-text-base);
}

.bg-success-strong\/10 {
  background-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
}

.hover\:bg-success-strong\/10:hover {
  background-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
}

.active\:bg-success-strong\/10:active {
  background-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent);
}

.bg-success-strong\/30 {
  background-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
}

.hover\:bg-success-strong\/30:hover {
  background-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
}

.active\:bg-success-strong\/30:active {
  background-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent);
}

.bg-success-strong\/50 {
  background-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
}

.hover\:bg-success-strong\/50:hover {
  background-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
}

.active\:bg-success-strong\/50:active {
  background-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent);
}

.bg-success-strong\/70 {
  background-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
}

.hover\:bg-success-strong\/70:hover {
  background-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
}

.active\:bg-success-strong\/70:active {
  background-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent);
}

.bg-success-strong\/90 {
  background-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
}

.hover\:bg-success-strong\/90:hover {
  background-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
}

.active\:bg-success-strong\/90:active {
  background-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent);
}

.bg-success-stronger {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.hover\:bg-success-stronger:hover {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.active\:bg-success-stronger:active {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.surface-success-stronger {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.hover\:surface-success-stronger:hover {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.active\:surface-success-stronger:active {
  background-color: var(--success-stronger);
  --bg-color: var(--success-stronger);

  --text-heading: var(--success-stronger-text-heading);
  --text-base: var(--success-stronger-text-base);
  --text-muted: var(--success-stronger-text-muted);

  --link: var(--success-stronger-link);
  --link-hover: var(--success-stronger-link-hover);
  --link-active: var(--success-stronger-link-active);

  --border: var(--success-stronger-border);

  --action-fill: var(--success-stronger-action-fill);
  --action-fill-hover: var(--success-stronger-action-fill-hover);
  --action-fill-active: var(--success-stronger-action-fill-active);
  --action-text: var(--success-stronger-action-text);
  --action-border: var(--success-stronger-action-border);

  color: var(--success-stronger-text-base);
  caret-color: var(--success-stronger-text-base);
}

.bg-success-stronger\/10 {
  background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
}

.hover\:bg-success-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
}

.active\:bg-success-stronger\/10:active {
  background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent);
}

.bg-success-stronger\/30 {
  background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
}

.hover\:bg-success-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
}

.active\:bg-success-stronger\/30:active {
  background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent);
}

.bg-success-stronger\/50 {
  background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
}

.hover\:bg-success-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
}

.active\:bg-success-stronger\/50:active {
  background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent);
}

.bg-success-stronger\/70 {
  background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
}

.hover\:bg-success-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
}

.active\:bg-success-stronger\/70:active {
  background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent);
}

.bg-success-stronger\/90 {
  background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
}

.hover\:bg-success-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
}

.active\:bg-success-stronger\/90:active {
  background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent);
}

.bg-info-weak {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.hover\:bg-info-weak:hover {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.active\:bg-info-weak:active {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.surface-info-weak {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.hover\:surface-info-weak:hover {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.active\:surface-info-weak:active {
  background-color: var(--info-weak);
  --bg-color: var(--info-weak);

  --text-heading: var(--info-weak-text-heading);
  --text-base: var(--info-weak-text-base);
  --text-muted: var(--info-weak-text-muted);

  --link: var(--info-weak-link);
  --link-hover: var(--info-weak-link-hover);
  --link-active: var(--info-weak-link-active);

  --border: var(--info-weak-border);

  --action-fill: var(--info-weak-action-fill);
  --action-fill-hover: var(--info-weak-action-fill-hover);
  --action-fill-active: var(--info-weak-action-fill-active);
  --action-text: var(--info-weak-action-text);
  --action-border: var(--info-weak-action-border);

  color: var(--info-weak-text-base);
  caret-color: var(--info-weak-text-base);
}

.bg-info-weak\/10 {
  background-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
}

.hover\:bg-info-weak\/10:hover {
  background-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
}

.active\:bg-info-weak\/10:active {
  background-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent);
}

.bg-info-weak\/30 {
  background-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
}

.hover\:bg-info-weak\/30:hover {
  background-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
}

.active\:bg-info-weak\/30:active {
  background-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent);
}

.bg-info-weak\/50 {
  background-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
}

.hover\:bg-info-weak\/50:hover {
  background-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
}

.active\:bg-info-weak\/50:active {
  background-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent);
}

.bg-info-weak\/70 {
  background-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
}

.hover\:bg-info-weak\/70:hover {
  background-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
}

.active\:bg-info-weak\/70:active {
  background-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent);
}

.bg-info-weak\/90 {
  background-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
}

.hover\:bg-info-weak\/90:hover {
  background-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
}

.active\:bg-info-weak\/90:active {
  background-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent);
}

.bg-info-soft {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.hover\:bg-info-soft:hover {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.active\:bg-info-soft:active {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.surface-info-soft {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.hover\:surface-info-soft:hover {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.active\:surface-info-soft:active {
  background-color: var(--info-soft);
  --bg-color: var(--info-soft);

  --text-heading: var(--info-soft-text-heading);
  --text-base: var(--info-soft-text-base);
  --text-muted: var(--info-soft-text-muted);

  --link: var(--info-soft-link);
  --link-hover: var(--info-soft-link-hover);
  --link-active: var(--info-soft-link-active);

  --border: var(--info-soft-border);

  --action-fill: var(--info-soft-action-fill);
  --action-fill-hover: var(--info-soft-action-fill-hover);
  --action-fill-active: var(--info-soft-action-fill-active);
  --action-text: var(--info-soft-action-text);
  --action-border: var(--info-soft-action-border);

  color: var(--info-soft-text-base);
  caret-color: var(--info-soft-text-base);
}

.bg-info-soft\/10 {
  background-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
}

.hover\:bg-info-soft\/10:hover {
  background-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
}

.active\:bg-info-soft\/10:active {
  background-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent);
}

.bg-info-soft\/30 {
  background-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
}

.hover\:bg-info-soft\/30:hover {
  background-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
}

.active\:bg-info-soft\/30:active {
  background-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent);
}

.bg-info-soft\/50 {
  background-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
}

.hover\:bg-info-soft\/50:hover {
  background-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
}

.active\:bg-info-soft\/50:active {
  background-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent);
}

.bg-info-soft\/70 {
  background-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
}

.hover\:bg-info-soft\/70:hover {
  background-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
}

.active\:bg-info-soft\/70:active {
  background-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent);
}

.bg-info-soft\/90 {
  background-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
}

.hover\:bg-info-soft\/90:hover {
  background-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
}

.active\:bg-info-soft\/90:active {
  background-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent);
}

.bg-info-base {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.hover\:bg-info-base:hover {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.active\:bg-info-base:active {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.surface-info-base {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.hover\:surface-info-base:hover {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.active\:surface-info-base:active {
  background-color: var(--info-base);
  --bg-color: var(--info-base);

  --text-heading: var(--info-base-text-heading);
  --text-base: var(--info-base-text-base);
  --text-muted: var(--info-base-text-muted);

  --link: var(--info-base-link);
  --link-hover: var(--info-base-link-hover);
  --link-active: var(--info-base-link-active);

  --border: var(--info-base-border);

  --action-fill: var(--info-base-action-fill);
  --action-fill-hover: var(--info-base-action-fill-hover);
  --action-fill-active: var(--info-base-action-fill-active);
  --action-text: var(--info-base-action-text);
  --action-border: var(--info-base-action-border);

  color: var(--info-base-text-base);
  caret-color: var(--info-base-text-base);
}

.bg-info-base\/10 {
  background-color: color-mix(in srgb, var(--info-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent);
}

.hover\:bg-info-base\/10:hover {
  background-color: color-mix(in srgb, var(--info-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent);
}

.active\:bg-info-base\/10:active {
  background-color: color-mix(in srgb, var(--info-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent);
}

.bg-info-base\/30 {
  background-color: color-mix(in srgb, var(--info-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent);
}

.hover\:bg-info-base\/30:hover {
  background-color: color-mix(in srgb, var(--info-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent);
}

.active\:bg-info-base\/30:active {
  background-color: color-mix(in srgb, var(--info-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent);
}

.bg-info-base\/50 {
  background-color: color-mix(in srgb, var(--info-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent);
}

.hover\:bg-info-base\/50:hover {
  background-color: color-mix(in srgb, var(--info-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent);
}

.active\:bg-info-base\/50:active {
  background-color: color-mix(in srgb, var(--info-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent);
}

.bg-info-base\/70 {
  background-color: color-mix(in srgb, var(--info-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent);
}

.hover\:bg-info-base\/70:hover {
  background-color: color-mix(in srgb, var(--info-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent);
}

.active\:bg-info-base\/70:active {
  background-color: color-mix(in srgb, var(--info-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent);
}

.bg-info-base\/90 {
  background-color: color-mix(in srgb, var(--info-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent);
}

.hover\:bg-info-base\/90:hover {
  background-color: color-mix(in srgb, var(--info-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent);
}

.active\:bg-info-base\/90:active {
  background-color: color-mix(in srgb, var(--info-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent);
}

.bg-info-strong {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.hover\:bg-info-strong:hover {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.active\:bg-info-strong:active {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.surface-info-strong {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.hover\:surface-info-strong:hover {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.active\:surface-info-strong:active {
  background-color: var(--info-strong);
  --bg-color: var(--info-strong);

  --text-heading: var(--info-strong-text-heading);
  --text-base: var(--info-strong-text-base);
  --text-muted: var(--info-strong-text-muted);

  --link: var(--info-strong-link);
  --link-hover: var(--info-strong-link-hover);
  --link-active: var(--info-strong-link-active);

  --border: var(--info-strong-border);

  --action-fill: var(--info-strong-action-fill);
  --action-fill-hover: var(--info-strong-action-fill-hover);
  --action-fill-active: var(--info-strong-action-fill-active);
  --action-text: var(--info-strong-action-text);
  --action-border: var(--info-strong-action-border);

  color: var(--info-strong-text-base);
  caret-color: var(--info-strong-text-base);
}

.bg-info-strong\/10 {
  background-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
}

.hover\:bg-info-strong\/10:hover {
  background-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
}

.active\:bg-info-strong\/10:active {
  background-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent);
}

.bg-info-strong\/30 {
  background-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
}

.hover\:bg-info-strong\/30:hover {
  background-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
}

.active\:bg-info-strong\/30:active {
  background-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent);
}

.bg-info-strong\/50 {
  background-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
}

.hover\:bg-info-strong\/50:hover {
  background-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
}

.active\:bg-info-strong\/50:active {
  background-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent);
}

.bg-info-strong\/70 {
  background-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
}

.hover\:bg-info-strong\/70:hover {
  background-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
}

.active\:bg-info-strong\/70:active {
  background-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent);
}

.bg-info-strong\/90 {
  background-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
}

.hover\:bg-info-strong\/90:hover {
  background-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
}

.active\:bg-info-strong\/90:active {
  background-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent);
}

.bg-info-stronger {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.hover\:bg-info-stronger:hover {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.active\:bg-info-stronger:active {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.surface-info-stronger {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.hover\:surface-info-stronger:hover {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.active\:surface-info-stronger:active {
  background-color: var(--info-stronger);
  --bg-color: var(--info-stronger);

  --text-heading: var(--info-stronger-text-heading);
  --text-base: var(--info-stronger-text-base);
  --text-muted: var(--info-stronger-text-muted);

  --link: var(--info-stronger-link);
  --link-hover: var(--info-stronger-link-hover);
  --link-active: var(--info-stronger-link-active);

  --border: var(--info-stronger-border);

  --action-fill: var(--info-stronger-action-fill);
  --action-fill-hover: var(--info-stronger-action-fill-hover);
  --action-fill-active: var(--info-stronger-action-fill-active);
  --action-text: var(--info-stronger-action-text);
  --action-border: var(--info-stronger-action-border);

  color: var(--info-stronger-text-base);
  caret-color: var(--info-stronger-text-base);
}

.bg-info-stronger\/10 {
  background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
}

.hover\:bg-info-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
}

.active\:bg-info-stronger\/10:active {
  background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent);
}

.bg-info-stronger\/30 {
  background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
}

.hover\:bg-info-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
}

.active\:bg-info-stronger\/30:active {
  background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent);
}

.bg-info-stronger\/50 {
  background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
}

.hover\:bg-info-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
}

.active\:bg-info-stronger\/50:active {
  background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent);
}

.bg-info-stronger\/70 {
  background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
}

.hover\:bg-info-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
}

.active\:bg-info-stronger\/70:active {
  background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent);
}

.bg-info-stronger\/90 {
  background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
}

.hover\:bg-info-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
}

.active\:bg-info-stronger\/90:active {
  background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent);
}

.bg-error-weak {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.hover\:bg-error-weak:hover {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.active\:bg-error-weak:active {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.surface-error-weak {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.hover\:surface-error-weak:hover {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.active\:surface-error-weak:active {
  background-color: var(--error-weak);
  --bg-color: var(--error-weak);

  --text-heading: var(--error-weak-text-heading);
  --text-base: var(--error-weak-text-base);
  --text-muted: var(--error-weak-text-muted);

  --link: var(--error-weak-link);
  --link-hover: var(--error-weak-link-hover);
  --link-active: var(--error-weak-link-active);

  --border: var(--error-weak-border);

  --action-fill: var(--error-weak-action-fill);
  --action-fill-hover: var(--error-weak-action-fill-hover);
  --action-fill-active: var(--error-weak-action-fill-active);
  --action-text: var(--error-weak-action-text);
  --action-border: var(--error-weak-action-border);

  color: var(--error-weak-text-base);
  caret-color: var(--error-weak-text-base);
}

.bg-error-weak\/10 {
  background-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
}

.hover\:bg-error-weak\/10:hover {
  background-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
}

.active\:bg-error-weak\/10:active {
  background-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent);
}

.bg-error-weak\/30 {
  background-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
}

.hover\:bg-error-weak\/30:hover {
  background-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
}

.active\:bg-error-weak\/30:active {
  background-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent);
}

.bg-error-weak\/50 {
  background-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
}

.hover\:bg-error-weak\/50:hover {
  background-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
}

.active\:bg-error-weak\/50:active {
  background-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent);
}

.bg-error-weak\/70 {
  background-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
}

.hover\:bg-error-weak\/70:hover {
  background-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
}

.active\:bg-error-weak\/70:active {
  background-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent);
}

.bg-error-weak\/90 {
  background-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
}

.hover\:bg-error-weak\/90:hover {
  background-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
}

.active\:bg-error-weak\/90:active {
  background-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent);
}

.bg-error-soft {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.hover\:bg-error-soft:hover {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.active\:bg-error-soft:active {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.surface-error-soft {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.hover\:surface-error-soft:hover {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.active\:surface-error-soft:active {
  background-color: var(--error-soft);
  --bg-color: var(--error-soft);

  --text-heading: var(--error-soft-text-heading);
  --text-base: var(--error-soft-text-base);
  --text-muted: var(--error-soft-text-muted);

  --link: var(--error-soft-link);
  --link-hover: var(--error-soft-link-hover);
  --link-active: var(--error-soft-link-active);

  --border: var(--error-soft-border);

  --action-fill: var(--error-soft-action-fill);
  --action-fill-hover: var(--error-soft-action-fill-hover);
  --action-fill-active: var(--error-soft-action-fill-active);
  --action-text: var(--error-soft-action-text);
  --action-border: var(--error-soft-action-border);

  color: var(--error-soft-text-base);
  caret-color: var(--error-soft-text-base);
}

.bg-error-soft\/10 {
  background-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
}

.hover\:bg-error-soft\/10:hover {
  background-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
}

.active\:bg-error-soft\/10:active {
  background-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent);
}

.bg-error-soft\/30 {
  background-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
}

.hover\:bg-error-soft\/30:hover {
  background-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
}

.active\:bg-error-soft\/30:active {
  background-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent);
}

.bg-error-soft\/50 {
  background-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
}

.hover\:bg-error-soft\/50:hover {
  background-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
}

.active\:bg-error-soft\/50:active {
  background-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent);
}

.bg-error-soft\/70 {
  background-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
}

.hover\:bg-error-soft\/70:hover {
  background-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
}

.active\:bg-error-soft\/70:active {
  background-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent);
}

.bg-error-soft\/90 {
  background-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
}

.hover\:bg-error-soft\/90:hover {
  background-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
}

.active\:bg-error-soft\/90:active {
  background-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent);
}

.bg-error-base {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.hover\:bg-error-base:hover {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.active\:bg-error-base:active {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.surface-error-base {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.hover\:surface-error-base:hover {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.active\:surface-error-base:active {
  background-color: var(--error-base);
  --bg-color: var(--error-base);

  --text-heading: var(--error-base-text-heading);
  --text-base: var(--error-base-text-base);
  --text-muted: var(--error-base-text-muted);

  --link: var(--error-base-link);
  --link-hover: var(--error-base-link-hover);
  --link-active: var(--error-base-link-active);

  --border: var(--error-base-border);

  --action-fill: var(--error-base-action-fill);
  --action-fill-hover: var(--error-base-action-fill-hover);
  --action-fill-active: var(--error-base-action-fill-active);
  --action-text: var(--error-base-action-text);
  --action-border: var(--error-base-action-border);

  color: var(--error-base-text-base);
  caret-color: var(--error-base-text-base);
}

.bg-error-base\/10 {
  background-color: color-mix(in srgb, var(--error-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent);
}

.hover\:bg-error-base\/10:hover {
  background-color: color-mix(in srgb, var(--error-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent);
}

.active\:bg-error-base\/10:active {
  background-color: color-mix(in srgb, var(--error-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent);
}

.bg-error-base\/30 {
  background-color: color-mix(in srgb, var(--error-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent);
}

.hover\:bg-error-base\/30:hover {
  background-color: color-mix(in srgb, var(--error-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent);
}

.active\:bg-error-base\/30:active {
  background-color: color-mix(in srgb, var(--error-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent);
}

.bg-error-base\/50 {
  background-color: color-mix(in srgb, var(--error-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent);
}

.hover\:bg-error-base\/50:hover {
  background-color: color-mix(in srgb, var(--error-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent);
}

.active\:bg-error-base\/50:active {
  background-color: color-mix(in srgb, var(--error-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent);
}

.bg-error-base\/70 {
  background-color: color-mix(in srgb, var(--error-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent);
}

.hover\:bg-error-base\/70:hover {
  background-color: color-mix(in srgb, var(--error-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent);
}

.active\:bg-error-base\/70:active {
  background-color: color-mix(in srgb, var(--error-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent);
}

.bg-error-base\/90 {
  background-color: color-mix(in srgb, var(--error-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent);
}

.hover\:bg-error-base\/90:hover {
  background-color: color-mix(in srgb, var(--error-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent);
}

.active\:bg-error-base\/90:active {
  background-color: color-mix(in srgb, var(--error-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent);
}

.bg-error-strong {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.hover\:bg-error-strong:hover {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.active\:bg-error-strong:active {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.surface-error-strong {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.hover\:surface-error-strong:hover {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.active\:surface-error-strong:active {
  background-color: var(--error-strong);
  --bg-color: var(--error-strong);

  --text-heading: var(--error-strong-text-heading);
  --text-base: var(--error-strong-text-base);
  --text-muted: var(--error-strong-text-muted);

  --link: var(--error-strong-link);
  --link-hover: var(--error-strong-link-hover);
  --link-active: var(--error-strong-link-active);

  --border: var(--error-strong-border);

  --action-fill: var(--error-strong-action-fill);
  --action-fill-hover: var(--error-strong-action-fill-hover);
  --action-fill-active: var(--error-strong-action-fill-active);
  --action-text: var(--error-strong-action-text);
  --action-border: var(--error-strong-action-border);

  color: var(--error-strong-text-base);
  caret-color: var(--error-strong-text-base);
}

.bg-error-strong\/10 {
  background-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
}

.hover\:bg-error-strong\/10:hover {
  background-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
}

.active\:bg-error-strong\/10:active {
  background-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent);
}

.bg-error-strong\/30 {
  background-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
}

.hover\:bg-error-strong\/30:hover {
  background-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
}

.active\:bg-error-strong\/30:active {
  background-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent);
}

.bg-error-strong\/50 {
  background-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
}

.hover\:bg-error-strong\/50:hover {
  background-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
}

.active\:bg-error-strong\/50:active {
  background-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent);
}

.bg-error-strong\/70 {
  background-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
}

.hover\:bg-error-strong\/70:hover {
  background-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
}

.active\:bg-error-strong\/70:active {
  background-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent);
}

.bg-error-strong\/90 {
  background-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
}

.hover\:bg-error-strong\/90:hover {
  background-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
}

.active\:bg-error-strong\/90:active {
  background-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent);
}

.bg-error-stronger {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.hover\:bg-error-stronger:hover {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.active\:bg-error-stronger:active {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.surface-error-stronger {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.hover\:surface-error-stronger:hover {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.active\:surface-error-stronger:active {
  background-color: var(--error-stronger);
  --bg-color: var(--error-stronger);

  --text-heading: var(--error-stronger-text-heading);
  --text-base: var(--error-stronger-text-base);
  --text-muted: var(--error-stronger-text-muted);

  --link: var(--error-stronger-link);
  --link-hover: var(--error-stronger-link-hover);
  --link-active: var(--error-stronger-link-active);

  --border: var(--error-stronger-border);

  --action-fill: var(--error-stronger-action-fill);
  --action-fill-hover: var(--error-stronger-action-fill-hover);
  --action-fill-active: var(--error-stronger-action-fill-active);
  --action-text: var(--error-stronger-action-text);
  --action-border: var(--error-stronger-action-border);

  color: var(--error-stronger-text-base);
  caret-color: var(--error-stronger-text-base);
}

.bg-error-stronger\/10 {
  background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
}

.hover\:bg-error-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
}

.active\:bg-error-stronger\/10:active {
  background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent);
}

.bg-error-stronger\/30 {
  background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
}

.hover\:bg-error-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
}

.active\:bg-error-stronger\/30:active {
  background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent);
}

.bg-error-stronger\/50 {
  background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
}

.hover\:bg-error-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
}

.active\:bg-error-stronger\/50:active {
  background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent);
}

.bg-error-stronger\/70 {
  background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
}

.hover\:bg-error-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
}

.active\:bg-error-stronger\/70:active {
  background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent);
}

.bg-error-stronger\/90 {
  background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
}

.hover\:bg-error-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
}

.active\:bg-error-stronger\/90:active {
  background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent);
}

.bg-warning-weak {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.hover\:bg-warning-weak:hover {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.active\:bg-warning-weak:active {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.surface-warning-weak {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.hover\:surface-warning-weak:hover {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.active\:surface-warning-weak:active {
  background-color: var(--warning-weak);
  --bg-color: var(--warning-weak);

  --text-heading: var(--warning-weak-text-heading);
  --text-base: var(--warning-weak-text-base);
  --text-muted: var(--warning-weak-text-muted);

  --link: var(--warning-weak-link);
  --link-hover: var(--warning-weak-link-hover);
  --link-active: var(--warning-weak-link-active);

  --border: var(--warning-weak-border);

  --action-fill: var(--warning-weak-action-fill);
  --action-fill-hover: var(--warning-weak-action-fill-hover);
  --action-fill-active: var(--warning-weak-action-fill-active);
  --action-text: var(--warning-weak-action-text);
  --action-border: var(--warning-weak-action-border);

  color: var(--warning-weak-text-base);
  caret-color: var(--warning-weak-text-base);
}

.bg-warning-weak\/10 {
  background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
}

.hover\:bg-warning-weak\/10:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
}

.active\:bg-warning-weak\/10:active {
  background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent);
}

.bg-warning-weak\/30 {
  background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
}

.hover\:bg-warning-weak\/30:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
}

.active\:bg-warning-weak\/30:active {
  background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent);
}

.bg-warning-weak\/50 {
  background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
}

.hover\:bg-warning-weak\/50:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
}

.active\:bg-warning-weak\/50:active {
  background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent);
}

.bg-warning-weak\/70 {
  background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
}

.hover\:bg-warning-weak\/70:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
}

.active\:bg-warning-weak\/70:active {
  background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent);
}

.bg-warning-weak\/90 {
  background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
}

.hover\:bg-warning-weak\/90:hover {
  background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
}

.active\:bg-warning-weak\/90:active {
  background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent);
}

.bg-warning-soft {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.hover\:bg-warning-soft:hover {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.active\:bg-warning-soft:active {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.surface-warning-soft {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.hover\:surface-warning-soft:hover {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.active\:surface-warning-soft:active {
  background-color: var(--warning-soft);
  --bg-color: var(--warning-soft);

  --text-heading: var(--warning-soft-text-heading);
  --text-base: var(--warning-soft-text-base);
  --text-muted: var(--warning-soft-text-muted);

  --link: var(--warning-soft-link);
  --link-hover: var(--warning-soft-link-hover);
  --link-active: var(--warning-soft-link-active);

  --border: var(--warning-soft-border);

  --action-fill: var(--warning-soft-action-fill);
  --action-fill-hover: var(--warning-soft-action-fill-hover);
  --action-fill-active: var(--warning-soft-action-fill-active);
  --action-text: var(--warning-soft-action-text);
  --action-border: var(--warning-soft-action-border);

  color: var(--warning-soft-text-base);
  caret-color: var(--warning-soft-text-base);
}

.bg-warning-soft\/10 {
  background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
}

.hover\:bg-warning-soft\/10:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
}

.active\:bg-warning-soft\/10:active {
  background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent);
}

.bg-warning-soft\/30 {
  background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
}

.hover\:bg-warning-soft\/30:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
}

.active\:bg-warning-soft\/30:active {
  background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent);
}

.bg-warning-soft\/50 {
  background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
}

.hover\:bg-warning-soft\/50:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
}

.active\:bg-warning-soft\/50:active {
  background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent);
}

.bg-warning-soft\/70 {
  background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
}

.hover\:bg-warning-soft\/70:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
}

.active\:bg-warning-soft\/70:active {
  background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent);
}

.bg-warning-soft\/90 {
  background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
}

.hover\:bg-warning-soft\/90:hover {
  background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
}

.active\:bg-warning-soft\/90:active {
  background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent);
}

.bg-warning-base {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.hover\:bg-warning-base:hover {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.active\:bg-warning-base:active {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.surface-warning-base {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.hover\:surface-warning-base:hover {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.active\:surface-warning-base:active {
  background-color: var(--warning-base);
  --bg-color: var(--warning-base);

  --text-heading: var(--warning-base-text-heading);
  --text-base: var(--warning-base-text-base);
  --text-muted: var(--warning-base-text-muted);

  --link: var(--warning-base-link);
  --link-hover: var(--warning-base-link-hover);
  --link-active: var(--warning-base-link-active);

  --border: var(--warning-base-border);

  --action-fill: var(--warning-base-action-fill);
  --action-fill-hover: var(--warning-base-action-fill-hover);
  --action-fill-active: var(--warning-base-action-fill-active);
  --action-text: var(--warning-base-action-text);
  --action-border: var(--warning-base-action-border);

  color: var(--warning-base-text-base);
  caret-color: var(--warning-base-text-base);
}

.bg-warning-base\/10 {
  background-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
}

.hover\:bg-warning-base\/10:hover {
  background-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
}

.active\:bg-warning-base\/10:active {
  background-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent);
}

.bg-warning-base\/30 {
  background-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.hover\:bg-warning-base\/30:hover {
  background-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.active\:bg-warning-base\/30:active {
  background-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.bg-warning-base\/50 {
  background-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
}

.hover\:bg-warning-base\/50:hover {
  background-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
}

.active\:bg-warning-base\/50:active {
  background-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent);
}

.bg-warning-base\/70 {
  background-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
}

.hover\:bg-warning-base\/70:hover {
  background-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
}

.active\:bg-warning-base\/70:active {
  background-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent);
}

.bg-warning-base\/90 {
  background-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
}

.hover\:bg-warning-base\/90:hover {
  background-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
}

.active\:bg-warning-base\/90:active {
  background-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent);
}

.bg-warning-strong {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.hover\:bg-warning-strong:hover {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.active\:bg-warning-strong:active {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.surface-warning-strong {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.hover\:surface-warning-strong:hover {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.active\:surface-warning-strong:active {
  background-color: var(--warning-strong);
  --bg-color: var(--warning-strong);

  --text-heading: var(--warning-strong-text-heading);
  --text-base: var(--warning-strong-text-base);
  --text-muted: var(--warning-strong-text-muted);

  --link: var(--warning-strong-link);
  --link-hover: var(--warning-strong-link-hover);
  --link-active: var(--warning-strong-link-active);

  --border: var(--warning-strong-border);

  --action-fill: var(--warning-strong-action-fill);
  --action-fill-hover: var(--warning-strong-action-fill-hover);
  --action-fill-active: var(--warning-strong-action-fill-active);
  --action-text: var(--warning-strong-action-text);
  --action-border: var(--warning-strong-action-border);

  color: var(--warning-strong-text-base);
  caret-color: var(--warning-strong-text-base);
}

.bg-warning-strong\/10 {
  background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
}

.hover\:bg-warning-strong\/10:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
}

.active\:bg-warning-strong\/10:active {
  background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent);
}

.bg-warning-strong\/30 {
  background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
}

.hover\:bg-warning-strong\/30:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
}

.active\:bg-warning-strong\/30:active {
  background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent);
}

.bg-warning-strong\/50 {
  background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
}

.hover\:bg-warning-strong\/50:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
}

.active\:bg-warning-strong\/50:active {
  background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent);
}

.bg-warning-strong\/70 {
  background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
}

.hover\:bg-warning-strong\/70:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
}

.active\:bg-warning-strong\/70:active {
  background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent);
}

.bg-warning-strong\/90 {
  background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
}

.hover\:bg-warning-strong\/90:hover {
  background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
}

.active\:bg-warning-strong\/90:active {
  background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent);
}

.bg-warning-stronger {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.hover\:bg-warning-stronger:hover {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.active\:bg-warning-stronger:active {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.surface-warning-stronger {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.hover\:surface-warning-stronger:hover {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.active\:surface-warning-stronger:active {
  background-color: var(--warning-stronger);
  --bg-color: var(--warning-stronger);

  --text-heading: var(--warning-stronger-text-heading);
  --text-base: var(--warning-stronger-text-base);
  --text-muted: var(--warning-stronger-text-muted);

  --link: var(--warning-stronger-link);
  --link-hover: var(--warning-stronger-link-hover);
  --link-active: var(--warning-stronger-link-active);

  --border: var(--warning-stronger-border);

  --action-fill: var(--warning-stronger-action-fill);
  --action-fill-hover: var(--warning-stronger-action-fill-hover);
  --action-fill-active: var(--warning-stronger-action-fill-active);
  --action-text: var(--warning-stronger-action-text);
  --action-border: var(--warning-stronger-action-border);

  color: var(--warning-stronger-text-base);
  caret-color: var(--warning-stronger-text-base);
}

.bg-warning-stronger\/10 {
  background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
}

.hover\:bg-warning-stronger\/10:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
}

.active\:bg-warning-stronger\/10:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent);
}

.bg-warning-stronger\/30 {
  background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
}

.hover\:bg-warning-stronger\/30:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
}

.active\:bg-warning-stronger\/30:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent);
}

.bg-warning-stronger\/50 {
  background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
}

.hover\:bg-warning-stronger\/50:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
}

.active\:bg-warning-stronger\/50:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent);
}

.bg-warning-stronger\/70 {
  background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
}

.hover\:bg-warning-stronger\/70:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
}

.active\:bg-warning-stronger\/70:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent);
}

.bg-warning-stronger\/90 {
  background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
}

.hover\:bg-warning-stronger\/90:hover {
  background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
}

.active\:bg-warning-stronger\/90:active {
  background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent);
}

.bg-header {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.hover\:bg-header:hover {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.active\:bg-header:active {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.surface-header {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.hover\:surface-header:hover {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.active\:surface-header:active {
  background-color: var(--header);
  --bg-color: var(--header);

  --text-heading: var(--header-text-heading);
  --text-base: var(--header-text-base);
  --text-muted: var(--header-text-muted);

  --link: var(--header-link);
  --link-hover: var(--header-link-hover);
  --link-active: var(--header-link-active);

  --border: var(--header-border);

  --action-fill: var(--header-action-fill);
  --action-fill-hover: var(--header-action-fill-hover);
  --action-fill-active: var(--header-action-fill-active);
  --action-text: var(--header-action-text);
  --action-border: var(--header-action-border);

  color: var(--header-text-base);
  caret-color: var(--header-text-base);
}

.bg-header\/10 {
  background-color: color-mix(in srgb, var(--header) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 10%, transparent);
}

.hover\:bg-header\/10:hover {
  background-color: color-mix(in srgb, var(--header) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 10%, transparent);
}

.active\:bg-header\/10:active {
  background-color: color-mix(in srgb, var(--header) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 10%, transparent);
}

.bg-header\/30 {
  background-color: color-mix(in srgb, var(--header) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 30%, transparent);
}

.hover\:bg-header\/30:hover {
  background-color: color-mix(in srgb, var(--header) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 30%, transparent);
}

.active\:bg-header\/30:active {
  background-color: color-mix(in srgb, var(--header) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 30%, transparent);
}

.bg-header\/50 {
  background-color: color-mix(in srgb, var(--header) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 50%, transparent);
}

.hover\:bg-header\/50:hover {
  background-color: color-mix(in srgb, var(--header) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 50%, transparent);
}

.active\:bg-header\/50:active {
  background-color: color-mix(in srgb, var(--header) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 50%, transparent);
}

.bg-header\/70 {
  background-color: color-mix(in srgb, var(--header) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 70%, transparent);
}

.hover\:bg-header\/70:hover {
  background-color: color-mix(in srgb, var(--header) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 70%, transparent);
}

.active\:bg-header\/70:active {
  background-color: color-mix(in srgb, var(--header) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 70%, transparent);
}

.bg-header\/90 {
  background-color: color-mix(in srgb, var(--header) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 90%, transparent);
}

.hover\:bg-header\/90:hover {
  background-color: color-mix(in srgb, var(--header) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 90%, transparent);
}

.active\:bg-header\/90:active {
  background-color: color-mix(in srgb, var(--header) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--header) 90%, transparent);
}

.bg-footer {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.hover\:bg-footer:hover {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.active\:bg-footer:active {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.surface-footer {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.hover\:surface-footer:hover {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.active\:surface-footer:active {
  background-color: var(--footer);
  --bg-color: var(--footer);

  --text-heading: var(--footer-text-heading);
  --text-base: var(--footer-text-base);
  --text-muted: var(--footer-text-muted);

  --link: var(--footer-link);
  --link-hover: var(--footer-link-hover);
  --link-active: var(--footer-link-active);

  --border: var(--footer-border);

  --action-fill: var(--footer-action-fill);
  --action-fill-hover: var(--footer-action-fill-hover);
  --action-fill-active: var(--footer-action-fill-active);
  --action-text: var(--footer-action-text);
  --action-border: var(--footer-action-border);

  color: var(--footer-text-base);
  caret-color: var(--footer-text-base);
}

.bg-footer\/10 {
  background-color: color-mix(in srgb, var(--footer) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 10%, transparent);
}

.hover\:bg-footer\/10:hover {
  background-color: color-mix(in srgb, var(--footer) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 10%, transparent);
}

.active\:bg-footer\/10:active {
  background-color: color-mix(in srgb, var(--footer) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 10%, transparent);
}

.bg-footer\/30 {
  background-color: color-mix(in srgb, var(--footer) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 30%, transparent);
}

.hover\:bg-footer\/30:hover {
  background-color: color-mix(in srgb, var(--footer) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 30%, transparent);
}

.active\:bg-footer\/30:active {
  background-color: color-mix(in srgb, var(--footer) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 30%, transparent);
}

.bg-footer\/50 {
  background-color: color-mix(in srgb, var(--footer) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 50%, transparent);
}

.hover\:bg-footer\/50:hover {
  background-color: color-mix(in srgb, var(--footer) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 50%, transparent);
}

.active\:bg-footer\/50:active {
  background-color: color-mix(in srgb, var(--footer) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 50%, transparent);
}

.bg-footer\/70 {
  background-color: color-mix(in srgb, var(--footer) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 70%, transparent);
}

.hover\:bg-footer\/70:hover {
  background-color: color-mix(in srgb, var(--footer) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 70%, transparent);
}

.active\:bg-footer\/70:active {
  background-color: color-mix(in srgb, var(--footer) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 70%, transparent);
}

.bg-footer\/90 {
  background-color: color-mix(in srgb, var(--footer) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 90%, transparent);
}

.hover\:bg-footer\/90:hover {
  background-color: color-mix(in srgb, var(--footer) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 90%, transparent);
}

.active\:bg-footer\/90:active {
  background-color: color-mix(in srgb, var(--footer) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--footer) 90%, transparent);
}

.bg-default {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.hover\:bg-default:hover {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.active\:bg-default:active {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.surface-default {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.hover\:surface-default:hover {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.active\:surface-default:active {
  background-color: var(--default);
  --bg-color: var(--default);

  --text-heading: var(--default-text-heading);
  --text-base: var(--default-text-base);
  --text-muted: var(--default-text-muted);

  --link: var(--default-link);
  --link-hover: var(--default-link-hover);
  --link-active: var(--default-link-active);

  --border: var(--default-border);

  --action-fill: var(--default-action-fill);
  --action-fill-hover: var(--default-action-fill-hover);
  --action-fill-active: var(--default-action-fill-active);
  --action-text: var(--default-action-text);
  --action-border: var(--default-action-border);

  color: var(--default-text-base);
  caret-color: var(--default-text-base);
}

.bg-default\/10 {
  background-color: color-mix(in srgb, var(--default) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 10%, transparent);
}

.hover\:bg-default\/10:hover {
  background-color: color-mix(in srgb, var(--default) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 10%, transparent);
}

.active\:bg-default\/10:active {
  background-color: color-mix(in srgb, var(--default) 10%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 10%, transparent);
}

.bg-default\/30 {
  background-color: color-mix(in srgb, var(--default) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 30%, transparent);
}

.hover\:bg-default\/30:hover {
  background-color: color-mix(in srgb, var(--default) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 30%, transparent);
}

.active\:bg-default\/30:active {
  background-color: color-mix(in srgb, var(--default) 30%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 30%, transparent);
}

.bg-default\/50 {
  background-color: color-mix(in srgb, var(--default) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 50%, transparent);
}

.hover\:bg-default\/50:hover {
  background-color: color-mix(in srgb, var(--default) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 50%, transparent);
}

.active\:bg-default\/50:active {
  background-color: color-mix(in srgb, var(--default) 50%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 50%, transparent);
}

.bg-default\/70 {
  background-color: color-mix(in srgb, var(--default) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 70%, transparent);
}

.hover\:bg-default\/70:hover {
  background-color: color-mix(in srgb, var(--default) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 70%, transparent);
}

.active\:bg-default\/70:active {
  background-color: color-mix(in srgb, var(--default) 70%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 70%, transparent);
}

.bg-default\/90 {
  background-color: color-mix(in srgb, var(--default) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 90%, transparent);
}

.hover\:bg-default\/90:hover {
  background-color: color-mix(in srgb, var(--default) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 90%, transparent);
}

.active\:bg-default\/90:active {
  background-color: color-mix(in srgb, var(--default) 90%, transparent);
  --bg-color: color-mix(in srgb, var(--default) 90%, transparent);
}
/* === Font Faces === */
@font-face { font-family: "Roboto"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/34/roboto-italic-variablefontwdthwght.ttf") format("truetype"); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/100/roboto-variablefontwdthwght.ttf") format("truetype"); font-style: normal; font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/36/playfairdisplay-italic-variablefontwght.ttf") format("truetype"); font-style: italic; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/35/playfairdisplay-variablefontwght.ttf") format("truetype"); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/37/poppins-thin.ttf") format("truetype"); font-style: normal; font-weight: 100; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/103/poppins-italic.ttf") format("truetype"); font-style: italic; font-weight: 200; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/85/nunito-italic-variablefontwght.ttf") format("truetype"); font-style: italic; font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/84/nunito-variablefontwght.ttf") format("truetype"); font-style: normal; font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Abril Fatface"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/107/abrilfatface-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "caveat"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/109/caveat-variablefontwght.ttf") format("truetype"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/108/pacifico-regular.ttf") format("truetype"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "eater"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/143/eater-regular.ttf") format("truetype"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nosifer"; src: url("https://clyrex.api.management.onmakemysite.com/itemassets/fontfile/137/nosifer-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
/* === Button Styles === */
.primary_button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background-color: transparent !important;
  background-image: linear-gradient(to right, #ec4899, #8b5cf6) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  width: 187px !important;
  height: 47px !important;
  padding: 14px 24px 14px 24px !important;
  padding-top: 14px !important;
  padding-right: 24px !important;
  padding-bottom: 14px !important;
  padding-left: 24px !important;
  border-style: dotted !important;
  border-width: 0px !important;
  border-color: #ea2020 !important;
  border-radius: 37px !important;
  box-shadow: 0px 8px 16px 0px #3b2eff40 !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  color: #ffffff !important;
}

.primary_button span {
  color: inherit !important;
}

.primary_button:hover {
  background-color: transparent !important;
  background-image: linear-gradient(to right, #db2777, #7c3aed) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  box-shadow: 0px 8px 16px 0px #00000040 !important;
}

.primary_button:hover span {
  color: inherit !important;
}

.primary_button:active {
  background-color: transparent !important;
  background-image: linear-gradient(to right, #be185d, #6d28d9) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  box-shadow: 0px 8px 8px 0px #00000040 !important;
  transform: scale(0.95) !important;
}

.primary_button:active span {
  color: inherit !important;
}