/* catkin-Tokens, Revision 6.2 (PO-Aussagen 14.10.2026; 6.1: kleinste Schrift 12 px; 6.2: Raster und Tabellenflächen neutral,
 * 15.10.2026; Vorgänger eingefroren unter tokens/rev6/ und tokens/rev6.1/). Erzeugt von build_tokens.py, nicht von Hand ändern.
 * Modus: folgt dem System; data-theme="light|dark" an einem Element erzwingt den Modus für den Teilbaum
 * (Berichte, PDFs, E-Mails immer hell). Familie wählen: data-color="<familie>". Dichte: data-density.
 * Oberflächen nutzen Rollen (surface-*, on-surface-*, fill …), nie die Skalen (Rohmaterial). Guideline 4b. */

:root { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

:root {
  /* ---- Skalen (Rohmaterial) ---- */
  /* neutral: Neutrale; Status Neu und Gesperrt */
  --catkin-scale-neutral-0: #0D0F0E;
  --catkin-scale-neutral-1: #171817;
  --catkin-scale-neutral-2: #222422;
  --catkin-scale-neutral-3: #2E312F;
  --catkin-scale-neutral-4: #3B3F3D;
  --catkin-scale-neutral-5: #484C4A;
  --catkin-scale-neutral-6: #5A605C;
  --catkin-scale-neutral-7: #727875;
  --catkin-scale-neutral-8: #8C938F;
  --catkin-scale-neutral-9: #A7ADA9;
  --catkin-scale-neutral-10: #C3C8C4;
  --catkin-scale-neutral-11: #E0E3E1;
  --catkin-scale-neutral-12: #ECEEED;
  --catkin-scale-neutral-13: #F2F3F2;
  --catkin-scale-neutral-14: #FFFFFF;
  /* brand: Markengrün: Hauptaktion, Link, Auswahl */
  --catkin-scale-brand-0: #011207;
  --catkin-scale-brand-1: #051C0F;
  --catkin-scale-brand-2: #0C2819;
  --catkin-scale-brand-3: #143723;
  --catkin-scale-brand-4: #13472C;
  --catkin-scale-brand-5: #035833;
  --catkin-scale-brand-6: #006D3F;
  --catkin-scale-brand-7: #248756;
  --catkin-scale-brand-8: #43A16E;
  --catkin-scale-brand-9: #6ABC8B;
  --catkin-scale-brand-10: #93D5AC;
  --catkin-scale-brand-11: #BDEDCE;
  --catkin-scale-brand-12: #D7F5E1;
  --catkin-scale-brand-13: #E3F9EA;
  --catkin-scale-brand-14: #EFFDF4;
  /* success: Status Erledigt */
  --catkin-scale-success-0: #011207;
  --catkin-scale-success-1: #051C0F;
  --catkin-scale-success-2: #0C2819;
  --catkin-scale-success-3: #143723;
  --catkin-scale-success-4: #13472C;
  --catkin-scale-success-5: #035833;
  --catkin-scale-success-6: #006D3F;
  --catkin-scale-success-7: #248756;
  --catkin-scale-success-8: #43A16E;
  --catkin-scale-success-9: #6ABC8B;
  --catkin-scale-success-10: #93D5AC;
  --catkin-scale-success-11: #BDEDCE;
  --catkin-scale-success-12: #D7F5E1;
  --catkin-scale-success-13: #E3F9EA;
  --catkin-scale-success-14: #EFFDF4;
  /* info: Status In Arbeit */
  --catkin-scale-info-0: #030D29;
  --catkin-scale-info-1: #081636;
  --catkin-scale-info-2: #102249;
  --catkin-scale-info-3: #192E5F;
  --catkin-scale-info-4: #1D3A7E;
  --catkin-scale-info-5: #1D44A4;
  --catkin-scale-info-6: #2254D2;
  --catkin-scale-info-7: #396FEF;
  --catkin-scale-info-8: #598DFF;
  --catkin-scale-info-9: #82AAFF;
  --catkin-scale-info-10: #ACC8FF;
  --catkin-scale-info-11: #D5E3FF;
  --catkin-scale-info-12: #E6EFFF;
  --catkin-scale-info-13: #EEF3FF;
  --catkin-scale-info-14: #F7FAFF;
  /* warning: Status Offen */
  --catkin-scale-warning-0: #190B00;
  --catkin-scale-warning-1: #251403;
  --catkin-scale-warning-2: #341F08;
  --catkin-scale-warning-3: #442B0F;
  --catkin-scale-warning-4: #59360A;
  --catkin-scale-warning-5: #6E4100;
  --catkin-scale-warning-6: #885100;
  --catkin-scale-warning-7: #A9680F;
  --catkin-scale-warning-8: #C68234;
  --catkin-scale-warning-9: #DD9F5D;
  --catkin-scale-warning-10: #F2BD87;
  --catkin-scale-warning-11: #FFDCBB;
  --catkin-scale-warning-12: #FFEAD7;
  --catkin-scale-warning-13: #FFF2E5;
  --catkin-scale-warning-14: #FFF9F2;
  /* critical: Status Achtung, zerstörende Aktion (CI13) */
  --catkin-scale-critical-0: #220403;
  --catkin-scale-critical-1: #2F0C09;
  --catkin-scale-critical-2: #401611;
  --catkin-scale-critical-3: #55201A;
  --catkin-scale-critical-4: #6F251D;
  --catkin-scale-critical-5: #8E241C;
  --catkin-scale-critical-6: #B3271E;
  --catkin-scale-critical-7: #D3463A;
  --catkin-scale-critical-8: #F16353;
  --catkin-scale-critical-9: #FF897A;
  --catkin-scale-critical-10: #FFB5A9;
  --catkin-scale-critical-11: #FFDBD5;
  --catkin-scale-critical-12: #FFEAE6;
  --catkin-scale-critical-13: #FFF1EE;
  --catkin-scale-critical-14: #FFF8F7;
  /* violet: Status Unterwegs */
  --catkin-scale-violet-0: #120924;
  --catkin-scale-violet-1: #1B1232;
  --catkin-scale-violet-2: #271D43;
  --catkin-scale-violet-3: #362957;
  --catkin-scale-violet-4: #453173;
  --catkin-scale-violet-5: #563995;
  --catkin-scale-violet-6: #6D44BE;
  --catkin-scale-violet-7: #855FDB;
  --catkin-scale-violet-8: #9F7BF9;
  --catkin-scale-violet-9: #B49CFF;
  --catkin-scale-violet-10: #CCBEFF;
  --catkin-scale-violet-11: #E5DEFF;
  --catkin-scale-violet-12: #EFEBFF;
  --catkin-scale-violet-13: #F4F2FF;
  --catkin-scale-violet-14: #FAF8FF;
  /* orange: Signal-Orange: Call-to-Action, Hinweis */
  --catkin-scale-orange-0: #1F0700;
  --catkin-scale-orange-1: #2E0E01;
  --catkin-scale-orange-2: #3F1805;
  --catkin-scale-orange-3: #522309;
  --catkin-scale-orange-4: #6C2900;
  --catkin-scale-orange-5: #813300;
  --catkin-scale-orange-6: #9F4100;
  --catkin-scale-orange-7: #C85300;
  --catkin-scale-orange-8: #EB6A20;
  --catkin-scale-orange-9: #FF8D54;
  --catkin-scale-orange-10: #FFB694;
  --catkin-scale-orange-11: #FFDBCC;
  --catkin-scale-orange-12: #FFEAE0;
  --catkin-scale-orange-13: #FFF0EA;
  --catkin-scale-orange-14: #FFF9F6;
  /* yellow: Zusatz Gelb (Fachfarbe, Abstand zu Offen beachten) */
  --catkin-scale-yellow-0: #130E00;
  --catkin-scale-yellow-1: #1E1700;
  --catkin-scale-yellow-2: #2B2300;
  --catkin-scale-yellow-3: #3A2F00;
  --catkin-scale-yellow-4: #4A3D00;
  --catkin-scale-yellow-5: #5A4A00;
  --catkin-scale-yellow-6: #705D00;
  --catkin-scale-yellow-7: #8D7500;
  --catkin-scale-yellow-8: #AA8F00;
  --catkin-scale-yellow-9: #C6AA34;
  --catkin-scale-yellow-10: #DDC56D;
  --catkin-scale-yellow-11: #F3E2A3;
  --catkin-scale-yellow-12: #F9EEC7;
  --catkin-scale-yellow-13: #FBF4D7;
  --catkin-scale-yellow-14: #FEF9E9;
  /* pink: Zusatz Pink (Fachfarbe) */
  --catkin-scale-pink-0: #1F0511;
  --catkin-scale-pink-1: #2B0D1B;
  --catkin-scale-pink-2: #3C1727;
  --catkin-scale-pink-3: #4E2135;
  --catkin-scale-pink-4: #672844;
  --catkin-scale-pink-5: #822A53;
  --catkin-scale-pink-6: #A53168;
  --catkin-scale-pink-7: #C24D82;
  --catkin-scale-pink-8: #E1689C;
  --catkin-scale-pink-9: #F788B5;
  --catkin-scale-pink-10: #FFB1CE;
  --catkin-scale-pink-11: #FFD9E6;
  --catkin-scale-pink-12: #FFE8F0;
  --catkin-scale-pink-13: #FFEFF5;
  --catkin-scale-pink-14: #FFF8FA;
  /* cyan: Zusatz Cyan (Fachfarbe) */
  --catkin-scale-cyan-0: #001018;
  --catkin-scale-cyan-1: #001A24;
  --catkin-scale-cyan-2: #032834;
  --catkin-scale-cyan-3: #063543;
  --catkin-scale-cyan-4: #004357;
  --catkin-scale-cyan-5: #00536A;
  --catkin-scale-cyan-6: #006683;
  --catkin-scale-cyan-7: #0081A4;
  --catkin-scale-cyan-8: #109CC5;
  --catkin-scale-cyan-9: #50B7DB;
  --catkin-scale-cyan-10: #81D1F1;
  --catkin-scale-cyan-11: #B9EAFF;
  --catkin-scale-cyan-12: #D5F3FF;
  --catkin-scale-cyan-13: #E2F6FF;
  --catkin-scale-cyan-14: #F2FBFF;
  /* turquoise: Zusatz Türkis (Fachfarbe) */
  --catkin-scale-turquoise-0: #001110;
  --catkin-scale-turquoise-1: #001B1A;
  --catkin-scale-turquoise-2: #022927;
  --catkin-scale-turquoise-3: #053634;
  --catkin-scale-turquoise-4: #004543;
  --catkin-scale-turquoise-5: #005451;
  --catkin-scale-turquoise-6: #006965;
  --catkin-scale-turquoise-7: #008680;
  --catkin-scale-turquoise-8: #06A19B;
  --catkin-scale-turquoise-9: #4FBCB5;
  --catkin-scale-turquoise-10: #81D6D0;
  --catkin-scale-turquoise-11: #B2EDE9;
  --catkin-scale-turquoise-12: #D0F5F2;
  --catkin-scale-turquoise-13: #DEF8F6;
  --catkin-scale-turquoise-14: #EDFCFB;
  /* burgundy: Zusatz Bordeaux (Fachfarbe) */
  --catkin-scale-burgundy-0: #1B090D;
  --catkin-scale-burgundy-1: #271117;
  --catkin-scale-burgundy-2: #361C22;
  --catkin-scale-burgundy-3: #48272F;
  --catkin-scale-burgundy-4: #5D313C;
  --catkin-scale-burgundy-5: #763848;
  --catkin-scale-burgundy-6: #94445A;
  --catkin-scale-burgundy-7: #B15E72;
  --catkin-scale-burgundy-8: #CE778C;
  --catkin-scale-burgundy-9: #E595A7;
  --catkin-scale-burgundy-10: #FAB4C3;
  --catkin-scale-burgundy-11: #FFD9E1;
  --catkin-scale-burgundy-12: #FFE8ED;
  --catkin-scale-burgundy-13: #FFEFF2;
  --catkin-scale-burgundy-14: #FFF7F9;
  /* red: Zusatz Rot (nah an Achtung: nicht für Fachkodierung) */
  --catkin-scale-red-0: #220503;
  --catkin-scale-red-1: #2F0D09;
  --catkin-scale-red-2: #3F1712;
  --catkin-scale-red-3: #52211A;
  --catkin-scale-red-4: #6D271D;
  --catkin-scale-red-5: #8B271C;
  --catkin-scale-red-6: #B02D1F;
  --catkin-scale-red-7: #CE4A3A;
  --catkin-scale-red-8: #ED6754;
  --catkin-scale-red-9: #FF8977;
  --catkin-scale-red-10: #FFB5A8;
  --catkin-scale-red-11: #FFDAD4;
  --catkin-scale-red-12: #FFEAE6;
  --catkin-scale-red-13: #FFF1EE;
  --catkin-scale-red-14: #FFF8F7;
  /* blue: Zusatz Blau (nah an In Arbeit: nicht für Fachkodierung) */
  --catkin-scale-blue-0: #040D23;
  --catkin-scale-blue-1: #0A1730;
  --catkin-scale-blue-2: #132341;
  --catkin-scale-blue-3: #1C2F55;
  --catkin-scale-blue-4: #213D71;
  --catkin-scale-blue-5: #234891;
  --catkin-scale-blue-6: #2959B9;
  --catkin-scale-blue-7: #4173D5;
  --catkin-scale-blue-8: #5A8FF3;
  --catkin-scale-blue-9: #7DABFF;
  --catkin-scale-blue-10: #A9C8FF;
  --catkin-scale-blue-11: #D4E4FF;
  --catkin-scale-blue-12: #E5EEFF;
  --catkin-scale-blue-13: #EDF4FF;
  --catkin-scale-blue-14: #F6FAFF;
  /* green: Zusatz Grün (Markennähe: nicht für Fachkodierung) */
  --catkin-scale-green-0: #011205;
  --catkin-scale-green-1: #071C0C;
  --catkin-scale-green-2: #0E2915;
  --catkin-scale-green-3: #16371E;
  --catkin-scale-green-4: #174724;
  --catkin-scale-green-5: #0D5728;
  --catkin-scale-green-6: #006E30;
  --catkin-scale-green-7: #2B8848;
  --catkin-scale-green-8: #49A261;
  --catkin-scale-green-9: #6DBC7F;
  --catkin-scale-green-10: #95D5A2;
  --catkin-scale-green-11: #BFEFC8;
  --catkin-scale-green-12: #D8F5DD;
  --catkin-scale-green-13: #E4F9E7;
  --catkin-scale-green-14: #F0FDF2;
  /* light-green: Zusatz Hellgrün (Markennähe: nicht für Fachkodierung) */
  --catkin-scale-light-green-0: #081000;
  --catkin-scale-light-green-1: #111B02;
  --catkin-scale-light-green-2: #1A2706;
  --catkin-scale-light-green-3: #25360B;
  --catkin-scale-light-green-4: #2E4404;
  --catkin-scale-light-green-5: #385400;
  --catkin-scale-light-green-6: #476700;
  --catkin-scale-light-green-7: #5A8300;
  --catkin-scale-light-green-8: #729E29;
  --catkin-scale-light-green-9: #8FB755;
  --catkin-scale-light-green-10: #AFD282;
  --catkin-scale-light-green-11: #D1ECB1;
  --catkin-scale-light-green-12: #E3F4CF;
  --catkin-scale-light-green-13: #EBF8DD;
  --catkin-scale-light-green-14: #F5FDED;
  /* ---- Rollen je Familie ---- */
  --catkin-neutral-surface-1: light-dark(var(--catkin-scale-neutral-14), var(--catkin-scale-neutral-1));
  --catkin-neutral-surface-1-hover: light-dark(var(--catkin-scale-neutral-13), var(--catkin-scale-neutral-3));
  --catkin-neutral-surface-1-pressed: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-4));
  --catkin-neutral-surface-2: light-dark(var(--catkin-scale-neutral-13), var(--catkin-scale-neutral-2));
  --catkin-neutral-surface-2-hover: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-4));
  --catkin-neutral-surface-2-pressed: light-dark(var(--catkin-scale-neutral-11), var(--catkin-scale-neutral-5));
  --catkin-neutral-surface-3: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-3));
  --catkin-neutral-surface-3-hover: light-dark(var(--catkin-scale-neutral-11), var(--catkin-scale-neutral-1));
  --catkin-neutral-surface-3-pressed: light-dark(var(--catkin-scale-neutral-10), var(--catkin-scale-neutral-0));
  --catkin-neutral-surface-inverse-strong: light-dark(var(--catkin-scale-neutral-1), var(--catkin-scale-neutral-12));
  --catkin-neutral-surface-inverse-strong-hover: light-dark(var(--catkin-scale-neutral-5), var(--catkin-scale-neutral-9));
  --catkin-neutral-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-neutral-2), var(--catkin-scale-neutral-11));
  --catkin-neutral-surface-inverse-medium: light-dark(var(--catkin-scale-neutral-6), var(--catkin-scale-neutral-9));
  --catkin-neutral-surface-inverse-medium-hover: light-dark(var(--catkin-scale-neutral-2), var(--catkin-scale-neutral-12));
  --catkin-neutral-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-neutral-5), var(--catkin-scale-neutral-10));
  --catkin-neutral-surface-inverse-weak: light-dark(var(--catkin-scale-neutral-7), var(--catkin-scale-neutral-8));
  --catkin-neutral-surface-inverse-weak-hover: light-dark(var(--catkin-scale-neutral-3), var(--catkin-scale-neutral-12));
  --catkin-neutral-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-neutral-6), var(--catkin-scale-neutral-9));
  --catkin-neutral-surface-vibrant: light-dark(var(--catkin-scale-neutral-9), var(--catkin-scale-neutral-9));
  --catkin-neutral-surface-vibrant-hover: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-12));
  --catkin-neutral-surface-vibrant-pressed: light-dark(var(--catkin-scale-neutral-10), var(--catkin-scale-neutral-10));
  --catkin-neutral-on-surface-100: light-dark(var(--catkin-scale-neutral-1), var(--catkin-scale-neutral-12));
  --catkin-neutral-on-surface-100-hover: light-dark(var(--catkin-scale-neutral-5), var(--catkin-scale-neutral-9));
  --catkin-neutral-on-surface-100-pressed: light-dark(var(--catkin-scale-neutral-2), var(--catkin-scale-neutral-11));
  --catkin-neutral-on-surface-90: light-dark(var(--catkin-scale-neutral-4), var(--catkin-scale-neutral-10));
  --catkin-neutral-on-surface-90-hover: light-dark(var(--catkin-scale-neutral-0), var(--catkin-scale-neutral-14));
  --catkin-neutral-on-surface-90-pressed: light-dark(var(--catkin-scale-neutral-3), var(--catkin-scale-neutral-11));
  --catkin-neutral-on-surface-80: light-dark(var(--catkin-scale-neutral-6), var(--catkin-scale-neutral-9));
  --catkin-neutral-on-surface-80-hover: light-dark(var(--catkin-scale-neutral-3), var(--catkin-scale-neutral-12));
  --catkin-neutral-on-surface-80-pressed: light-dark(var(--catkin-scale-neutral-5), var(--catkin-scale-neutral-10));
  --catkin-neutral-on-surface-70: light-dark(var(--catkin-scale-neutral-7), var(--catkin-scale-neutral-8));
  --catkin-neutral-on-surface-70-hover: light-dark(var(--catkin-scale-neutral-4), var(--catkin-scale-neutral-10));
  --catkin-neutral-on-surface-70-pressed: light-dark(var(--catkin-scale-neutral-6), var(--catkin-scale-neutral-9));
  --catkin-neutral-on-surface-60: light-dark(var(--catkin-scale-neutral-10), var(--catkin-scale-neutral-6));
  --catkin-neutral-on-surface-50: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-3));
  --catkin-neutral-on-inverse: light-dark(var(--catkin-scale-neutral-14), var(--catkin-scale-neutral-3));
  --catkin-neutral-on-inverse-hover: light-dark(var(--catkin-scale-neutral-11), var(--catkin-scale-neutral-0));
  --catkin-neutral-on-inverse-pressed: light-dark(var(--catkin-scale-neutral-13), var(--catkin-scale-neutral-2));
  --catkin-neutral-on-vibrant: light-dark(var(--catkin-scale-neutral-1), var(--catkin-scale-neutral-1));
  --catkin-neutral-on-vibrant-hover: light-dark(var(--catkin-scale-neutral-4), var(--catkin-scale-neutral-4));
  --catkin-neutral-on-vibrant-pressed: light-dark(var(--catkin-scale-neutral-2), var(--catkin-scale-neutral-2));
  --catkin-neutral-fill: light-dark(#5C635D, #A0A5A1);
  --catkin-neutral-fill-hover: light-dark(#4E554F, #B0B5B1);
  --catkin-neutral-fill-pressed: light-dark(#434A44, #BCC1BD);
  --catkin-neutral-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-brand-surface-1: light-dark(var(--catkin-scale-brand-14), var(--catkin-scale-brand-1));
  --catkin-brand-surface-1-hover: light-dark(var(--catkin-scale-brand-13), var(--catkin-scale-brand-3));
  --catkin-brand-surface-1-pressed: light-dark(var(--catkin-scale-brand-12), var(--catkin-scale-brand-4));
  --catkin-brand-surface-2: light-dark(var(--catkin-scale-brand-13), var(--catkin-scale-brand-2));
  --catkin-brand-surface-2-hover: light-dark(var(--catkin-scale-brand-12), var(--catkin-scale-brand-4));
  --catkin-brand-surface-2-pressed: light-dark(var(--catkin-scale-brand-11), var(--catkin-scale-brand-5));
  --catkin-brand-surface-3: light-dark(var(--catkin-scale-brand-12), var(--catkin-scale-brand-3));
  --catkin-brand-surface-3-hover: light-dark(var(--catkin-scale-brand-11), var(--catkin-scale-brand-1));
  --catkin-brand-surface-3-pressed: light-dark(var(--catkin-scale-brand-10), var(--catkin-scale-brand-0));
  --catkin-brand-surface-inverse-strong: light-dark(var(--catkin-scale-brand-1), var(--catkin-scale-brand-12));
  --catkin-brand-surface-inverse-strong-hover: light-dark(var(--catkin-scale-brand-5), var(--catkin-scale-brand-9));
  --catkin-brand-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-brand-2), var(--catkin-scale-brand-11));
  --catkin-brand-surface-inverse-medium: light-dark(var(--catkin-scale-brand-6), var(--catkin-scale-brand-9));
  --catkin-brand-surface-inverse-medium-hover: light-dark(var(--catkin-scale-brand-2), var(--catkin-scale-brand-12));
  --catkin-brand-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-brand-5), var(--catkin-scale-brand-10));
  --catkin-brand-surface-inverse-weak: light-dark(var(--catkin-scale-brand-7), var(--catkin-scale-brand-8));
  --catkin-brand-surface-inverse-weak-hover: light-dark(var(--catkin-scale-brand-3), var(--catkin-scale-brand-12));
  --catkin-brand-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-brand-6), var(--catkin-scale-brand-9));
  --catkin-brand-surface-vibrant: light-dark(var(--catkin-scale-brand-9), var(--catkin-scale-brand-9));
  --catkin-brand-surface-vibrant-hover: light-dark(var(--catkin-scale-brand-12), var(--catkin-scale-brand-12));
  --catkin-brand-surface-vibrant-pressed: light-dark(var(--catkin-scale-brand-10), var(--catkin-scale-brand-10));
  --catkin-brand-on-surface-100: light-dark(var(--catkin-scale-brand-1), var(--catkin-scale-brand-12));
  --catkin-brand-on-surface-100-hover: light-dark(var(--catkin-scale-brand-5), var(--catkin-scale-brand-9));
  --catkin-brand-on-surface-100-pressed: light-dark(var(--catkin-scale-brand-2), var(--catkin-scale-brand-11));
  --catkin-brand-on-surface-90: light-dark(var(--catkin-scale-brand-4), var(--catkin-scale-brand-10));
  --catkin-brand-on-surface-90-hover: light-dark(var(--catkin-scale-brand-0), var(--catkin-scale-brand-14));
  --catkin-brand-on-surface-90-pressed: light-dark(var(--catkin-scale-brand-3), var(--catkin-scale-brand-11));
  --catkin-brand-on-surface-80: light-dark(var(--catkin-scale-brand-6), var(--catkin-scale-brand-9));
  --catkin-brand-on-surface-80-hover: light-dark(var(--catkin-scale-brand-3), var(--catkin-scale-brand-12));
  --catkin-brand-on-surface-80-pressed: light-dark(var(--catkin-scale-brand-5), var(--catkin-scale-brand-10));
  --catkin-brand-on-surface-70: light-dark(var(--catkin-scale-brand-7), var(--catkin-scale-brand-8));
  --catkin-brand-on-surface-70-hover: light-dark(var(--catkin-scale-brand-4), var(--catkin-scale-brand-10));
  --catkin-brand-on-surface-70-pressed: light-dark(var(--catkin-scale-brand-6), var(--catkin-scale-brand-9));
  --catkin-brand-on-surface-60: light-dark(var(--catkin-scale-brand-10), var(--catkin-scale-brand-6));
  --catkin-brand-on-surface-50: light-dark(var(--catkin-scale-brand-12), var(--catkin-scale-brand-3));
  --catkin-brand-on-inverse: light-dark(var(--catkin-scale-brand-14), var(--catkin-scale-brand-3));
  --catkin-brand-on-inverse-hover: light-dark(var(--catkin-scale-brand-11), var(--catkin-scale-brand-0));
  --catkin-brand-on-inverse-pressed: light-dark(var(--catkin-scale-brand-13), var(--catkin-scale-brand-2));
  --catkin-brand-on-vibrant: light-dark(var(--catkin-scale-brand-1), var(--catkin-scale-brand-1));
  --catkin-brand-on-vibrant-hover: light-dark(var(--catkin-scale-brand-4), var(--catkin-scale-brand-4));
  --catkin-brand-on-vibrant-pressed: light-dark(var(--catkin-scale-brand-2), var(--catkin-scale-brand-2));
  --catkin-brand-fill: light-dark(#0E7B4A, #148552);
  --catkin-brand-fill-hover: light-dark(#006B3E, #007546);
  --catkin-brand-fill-pressed: light-dark(#005E36, #007546);
  --catkin-brand-on-fill: light-dark(#FFFFFF, #FFFFFF);
  --catkin-success-surface-1: light-dark(var(--catkin-scale-success-14), var(--catkin-scale-success-1));
  --catkin-success-surface-1-hover: light-dark(var(--catkin-scale-success-13), var(--catkin-scale-success-3));
  --catkin-success-surface-1-pressed: light-dark(var(--catkin-scale-success-12), var(--catkin-scale-success-4));
  --catkin-success-surface-2: light-dark(var(--catkin-scale-success-13), var(--catkin-scale-success-2));
  --catkin-success-surface-2-hover: light-dark(var(--catkin-scale-success-12), var(--catkin-scale-success-4));
  --catkin-success-surface-2-pressed: light-dark(var(--catkin-scale-success-11), var(--catkin-scale-success-5));
  --catkin-success-surface-3: light-dark(var(--catkin-scale-success-12), var(--catkin-scale-success-3));
  --catkin-success-surface-3-hover: light-dark(var(--catkin-scale-success-11), var(--catkin-scale-success-1));
  --catkin-success-surface-3-pressed: light-dark(var(--catkin-scale-success-10), var(--catkin-scale-success-0));
  --catkin-success-surface-inverse-strong: light-dark(var(--catkin-scale-success-1), var(--catkin-scale-success-12));
  --catkin-success-surface-inverse-strong-hover: light-dark(var(--catkin-scale-success-5), var(--catkin-scale-success-9));
  --catkin-success-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-success-2), var(--catkin-scale-success-11));
  --catkin-success-surface-inverse-medium: light-dark(var(--catkin-scale-success-6), var(--catkin-scale-success-9));
  --catkin-success-surface-inverse-medium-hover: light-dark(var(--catkin-scale-success-2), var(--catkin-scale-success-12));
  --catkin-success-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-success-5), var(--catkin-scale-success-10));
  --catkin-success-surface-inverse-weak: light-dark(var(--catkin-scale-success-7), var(--catkin-scale-success-8));
  --catkin-success-surface-inverse-weak-hover: light-dark(var(--catkin-scale-success-3), var(--catkin-scale-success-12));
  --catkin-success-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-success-6), var(--catkin-scale-success-9));
  --catkin-success-surface-vibrant: light-dark(var(--catkin-scale-success-9), var(--catkin-scale-success-9));
  --catkin-success-surface-vibrant-hover: light-dark(var(--catkin-scale-success-12), var(--catkin-scale-success-12));
  --catkin-success-surface-vibrant-pressed: light-dark(var(--catkin-scale-success-10), var(--catkin-scale-success-10));
  --catkin-success-on-surface-100: light-dark(var(--catkin-scale-success-1), var(--catkin-scale-success-12));
  --catkin-success-on-surface-100-hover: light-dark(var(--catkin-scale-success-5), var(--catkin-scale-success-9));
  --catkin-success-on-surface-100-pressed: light-dark(var(--catkin-scale-success-2), var(--catkin-scale-success-11));
  --catkin-success-on-surface-90: light-dark(var(--catkin-scale-success-4), var(--catkin-scale-success-10));
  --catkin-success-on-surface-90-hover: light-dark(var(--catkin-scale-success-0), var(--catkin-scale-success-14));
  --catkin-success-on-surface-90-pressed: light-dark(var(--catkin-scale-success-3), var(--catkin-scale-success-11));
  --catkin-success-on-surface-80: light-dark(var(--catkin-scale-success-6), var(--catkin-scale-success-9));
  --catkin-success-on-surface-80-hover: light-dark(var(--catkin-scale-success-3), var(--catkin-scale-success-12));
  --catkin-success-on-surface-80-pressed: light-dark(var(--catkin-scale-success-5), var(--catkin-scale-success-10));
  --catkin-success-on-surface-70: light-dark(var(--catkin-scale-success-7), var(--catkin-scale-success-8));
  --catkin-success-on-surface-70-hover: light-dark(var(--catkin-scale-success-4), var(--catkin-scale-success-10));
  --catkin-success-on-surface-70-pressed: light-dark(var(--catkin-scale-success-6), var(--catkin-scale-success-9));
  --catkin-success-on-surface-60: light-dark(var(--catkin-scale-success-10), var(--catkin-scale-success-6));
  --catkin-success-on-surface-50: light-dark(var(--catkin-scale-success-12), var(--catkin-scale-success-3));
  --catkin-success-on-inverse: light-dark(var(--catkin-scale-success-14), var(--catkin-scale-success-3));
  --catkin-success-on-inverse-hover: light-dark(var(--catkin-scale-success-11), var(--catkin-scale-success-0));
  --catkin-success-on-inverse-pressed: light-dark(var(--catkin-scale-success-13), var(--catkin-scale-success-2));
  --catkin-success-on-vibrant: light-dark(var(--catkin-scale-success-1), var(--catkin-scale-success-1));
  --catkin-success-on-vibrant-hover: light-dark(var(--catkin-scale-success-4), var(--catkin-scale-success-4));
  --catkin-success-on-vibrant-pressed: light-dark(var(--catkin-scale-success-2), var(--catkin-scale-success-2));
  --catkin-success-fill: light-dark(#0E7B4A, #6EB092);
  --catkin-success-fill-hover: light-dark(#006B3E, #7EC0A1);
  --catkin-success-fill-pressed: light-dark(#005E36, #8ACDAE);
  --catkin-success-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-info-surface-1: light-dark(var(--catkin-scale-info-14), var(--catkin-scale-info-1));
  --catkin-info-surface-1-hover: light-dark(var(--catkin-scale-info-13), var(--catkin-scale-info-3));
  --catkin-info-surface-1-pressed: light-dark(var(--catkin-scale-info-12), var(--catkin-scale-info-4));
  --catkin-info-surface-2: light-dark(var(--catkin-scale-info-13), var(--catkin-scale-info-2));
  --catkin-info-surface-2-hover: light-dark(var(--catkin-scale-info-12), var(--catkin-scale-info-4));
  --catkin-info-surface-2-pressed: light-dark(var(--catkin-scale-info-11), var(--catkin-scale-info-5));
  --catkin-info-surface-3: light-dark(var(--catkin-scale-info-12), var(--catkin-scale-info-3));
  --catkin-info-surface-3-hover: light-dark(var(--catkin-scale-info-11), var(--catkin-scale-info-1));
  --catkin-info-surface-3-pressed: light-dark(var(--catkin-scale-info-10), var(--catkin-scale-info-0));
  --catkin-info-surface-inverse-strong: light-dark(var(--catkin-scale-info-1), var(--catkin-scale-info-12));
  --catkin-info-surface-inverse-strong-hover: light-dark(var(--catkin-scale-info-5), var(--catkin-scale-info-9));
  --catkin-info-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-info-2), var(--catkin-scale-info-11));
  --catkin-info-surface-inverse-medium: light-dark(var(--catkin-scale-info-6), var(--catkin-scale-info-9));
  --catkin-info-surface-inverse-medium-hover: light-dark(var(--catkin-scale-info-2), var(--catkin-scale-info-12));
  --catkin-info-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-info-5), var(--catkin-scale-info-10));
  --catkin-info-surface-inverse-weak: light-dark(var(--catkin-scale-info-7), var(--catkin-scale-info-8));
  --catkin-info-surface-inverse-weak-hover: light-dark(var(--catkin-scale-info-3), var(--catkin-scale-info-12));
  --catkin-info-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-info-6), var(--catkin-scale-info-9));
  --catkin-info-surface-vibrant: light-dark(var(--catkin-scale-info-9), var(--catkin-scale-info-9));
  --catkin-info-surface-vibrant-hover: light-dark(var(--catkin-scale-info-12), var(--catkin-scale-info-12));
  --catkin-info-surface-vibrant-pressed: light-dark(var(--catkin-scale-info-10), var(--catkin-scale-info-10));
  --catkin-info-on-surface-100: light-dark(var(--catkin-scale-info-1), var(--catkin-scale-info-12));
  --catkin-info-on-surface-100-hover: light-dark(var(--catkin-scale-info-5), var(--catkin-scale-info-9));
  --catkin-info-on-surface-100-pressed: light-dark(var(--catkin-scale-info-2), var(--catkin-scale-info-11));
  --catkin-info-on-surface-90: light-dark(var(--catkin-scale-info-4), var(--catkin-scale-info-10));
  --catkin-info-on-surface-90-hover: light-dark(var(--catkin-scale-info-0), var(--catkin-scale-info-14));
  --catkin-info-on-surface-90-pressed: light-dark(var(--catkin-scale-info-3), var(--catkin-scale-info-11));
  --catkin-info-on-surface-80: light-dark(var(--catkin-scale-info-6), var(--catkin-scale-info-9));
  --catkin-info-on-surface-80-hover: light-dark(var(--catkin-scale-info-3), var(--catkin-scale-info-12));
  --catkin-info-on-surface-80-pressed: light-dark(var(--catkin-scale-info-5), var(--catkin-scale-info-10));
  --catkin-info-on-surface-70: light-dark(var(--catkin-scale-info-7), var(--catkin-scale-info-8));
  --catkin-info-on-surface-70-hover: light-dark(var(--catkin-scale-info-4), var(--catkin-scale-info-10));
  --catkin-info-on-surface-70-pressed: light-dark(var(--catkin-scale-info-6), var(--catkin-scale-info-9));
  --catkin-info-on-surface-60: light-dark(var(--catkin-scale-info-10), var(--catkin-scale-info-6));
  --catkin-info-on-surface-50: light-dark(var(--catkin-scale-info-12), var(--catkin-scale-info-3));
  --catkin-info-on-inverse: light-dark(var(--catkin-scale-info-14), var(--catkin-scale-info-3));
  --catkin-info-on-inverse-hover: light-dark(var(--catkin-scale-info-11), var(--catkin-scale-info-0));
  --catkin-info-on-inverse-pressed: light-dark(var(--catkin-scale-info-13), var(--catkin-scale-info-2));
  --catkin-info-on-vibrant: light-dark(var(--catkin-scale-info-1), var(--catkin-scale-info-1));
  --catkin-info-on-vibrant-hover: light-dark(var(--catkin-scale-info-4), var(--catkin-scale-info-4));
  --catkin-info-on-vibrant-pressed: light-dark(var(--catkin-scale-info-2), var(--catkin-scale-info-2));
  --catkin-info-fill: light-dark(#2557D6, #85A1E8);
  --catkin-info-fill-hover: light-dark(#1747C5, #94B1F9);
  --catkin-info-fill-pressed: light-dark(#0D39B7, #A4BEFF);
  --catkin-info-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-warning-surface-1: light-dark(var(--catkin-scale-warning-14), var(--catkin-scale-warning-1));
  --catkin-warning-surface-1-hover: light-dark(var(--catkin-scale-warning-13), var(--catkin-scale-warning-3));
  --catkin-warning-surface-1-pressed: light-dark(var(--catkin-scale-warning-12), var(--catkin-scale-warning-4));
  --catkin-warning-surface-2: light-dark(var(--catkin-scale-warning-13), var(--catkin-scale-warning-2));
  --catkin-warning-surface-2-hover: light-dark(var(--catkin-scale-warning-12), var(--catkin-scale-warning-4));
  --catkin-warning-surface-2-pressed: light-dark(var(--catkin-scale-warning-11), var(--catkin-scale-warning-5));
  --catkin-warning-surface-3: light-dark(var(--catkin-scale-warning-12), var(--catkin-scale-warning-3));
  --catkin-warning-surface-3-hover: light-dark(var(--catkin-scale-warning-11), var(--catkin-scale-warning-1));
  --catkin-warning-surface-3-pressed: light-dark(var(--catkin-scale-warning-10), var(--catkin-scale-warning-0));
  --catkin-warning-surface-inverse-strong: light-dark(var(--catkin-scale-warning-1), var(--catkin-scale-warning-12));
  --catkin-warning-surface-inverse-strong-hover: light-dark(var(--catkin-scale-warning-5), var(--catkin-scale-warning-9));
  --catkin-warning-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-warning-2), var(--catkin-scale-warning-11));
  --catkin-warning-surface-inverse-medium: light-dark(var(--catkin-scale-warning-6), var(--catkin-scale-warning-9));
  --catkin-warning-surface-inverse-medium-hover: light-dark(var(--catkin-scale-warning-2), var(--catkin-scale-warning-12));
  --catkin-warning-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-warning-5), var(--catkin-scale-warning-10));
  --catkin-warning-surface-inverse-weak: light-dark(var(--catkin-scale-warning-7), var(--catkin-scale-warning-8));
  --catkin-warning-surface-inverse-weak-hover: light-dark(var(--catkin-scale-warning-3), var(--catkin-scale-warning-12));
  --catkin-warning-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-warning-6), var(--catkin-scale-warning-9));
  --catkin-warning-surface-vibrant: light-dark(var(--catkin-scale-warning-9), var(--catkin-scale-warning-9));
  --catkin-warning-surface-vibrant-hover: light-dark(var(--catkin-scale-warning-12), var(--catkin-scale-warning-12));
  --catkin-warning-surface-vibrant-pressed: light-dark(var(--catkin-scale-warning-10), var(--catkin-scale-warning-10));
  --catkin-warning-on-surface-100: light-dark(var(--catkin-scale-warning-1), var(--catkin-scale-warning-12));
  --catkin-warning-on-surface-100-hover: light-dark(var(--catkin-scale-warning-5), var(--catkin-scale-warning-9));
  --catkin-warning-on-surface-100-pressed: light-dark(var(--catkin-scale-warning-2), var(--catkin-scale-warning-11));
  --catkin-warning-on-surface-90: light-dark(var(--catkin-scale-warning-4), var(--catkin-scale-warning-10));
  --catkin-warning-on-surface-90-hover: light-dark(var(--catkin-scale-warning-0), var(--catkin-scale-warning-14));
  --catkin-warning-on-surface-90-pressed: light-dark(var(--catkin-scale-warning-3), var(--catkin-scale-warning-11));
  --catkin-warning-on-surface-80: light-dark(var(--catkin-scale-warning-6), var(--catkin-scale-warning-9));
  --catkin-warning-on-surface-80-hover: light-dark(var(--catkin-scale-warning-3), var(--catkin-scale-warning-12));
  --catkin-warning-on-surface-80-pressed: light-dark(var(--catkin-scale-warning-5), var(--catkin-scale-warning-10));
  --catkin-warning-on-surface-70: light-dark(var(--catkin-scale-warning-7), var(--catkin-scale-warning-8));
  --catkin-warning-on-surface-70-hover: light-dark(var(--catkin-scale-warning-4), var(--catkin-scale-warning-10));
  --catkin-warning-on-surface-70-pressed: light-dark(var(--catkin-scale-warning-6), var(--catkin-scale-warning-9));
  --catkin-warning-on-surface-60: light-dark(var(--catkin-scale-warning-10), var(--catkin-scale-warning-6));
  --catkin-warning-on-surface-50: light-dark(var(--catkin-scale-warning-12), var(--catkin-scale-warning-3));
  --catkin-warning-on-inverse: light-dark(var(--catkin-scale-warning-14), var(--catkin-scale-warning-3));
  --catkin-warning-on-inverse-hover: light-dark(var(--catkin-scale-warning-11), var(--catkin-scale-warning-0));
  --catkin-warning-on-inverse-pressed: light-dark(var(--catkin-scale-warning-13), var(--catkin-scale-warning-2));
  --catkin-warning-on-vibrant: light-dark(var(--catkin-scale-warning-1), var(--catkin-scale-warning-1));
  --catkin-warning-on-vibrant-hover: light-dark(var(--catkin-scale-warning-4), var(--catkin-scale-warning-4));
  --catkin-warning-on-vibrant-pressed: light-dark(var(--catkin-scale-warning-2), var(--catkin-scale-warning-2));
  --catkin-warning-fill: light-dark(#A36200, #C49B5C);
  --catkin-warning-fill-hover: light-dark(#8F5600, #D4AB6B);
  --catkin-warning-fill-pressed: light-dark(#804C00, #E1B778);
  --catkin-warning-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-critical-surface-1: light-dark(var(--catkin-scale-critical-14), var(--catkin-scale-critical-1));
  --catkin-critical-surface-1-hover: light-dark(var(--catkin-scale-critical-13), var(--catkin-scale-critical-3));
  --catkin-critical-surface-1-pressed: light-dark(var(--catkin-scale-critical-12), var(--catkin-scale-critical-4));
  --catkin-critical-surface-2: light-dark(var(--catkin-scale-critical-13), var(--catkin-scale-critical-2));
  --catkin-critical-surface-2-hover: light-dark(var(--catkin-scale-critical-12), var(--catkin-scale-critical-4));
  --catkin-critical-surface-2-pressed: light-dark(var(--catkin-scale-critical-11), var(--catkin-scale-critical-5));
  --catkin-critical-surface-3: light-dark(var(--catkin-scale-critical-12), var(--catkin-scale-critical-3));
  --catkin-critical-surface-3-hover: light-dark(var(--catkin-scale-critical-11), var(--catkin-scale-critical-1));
  --catkin-critical-surface-3-pressed: light-dark(var(--catkin-scale-critical-10), var(--catkin-scale-critical-0));
  --catkin-critical-surface-inverse-strong: light-dark(var(--catkin-scale-critical-1), var(--catkin-scale-critical-12));
  --catkin-critical-surface-inverse-strong-hover: light-dark(var(--catkin-scale-critical-5), var(--catkin-scale-critical-9));
  --catkin-critical-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-critical-2), var(--catkin-scale-critical-11));
  --catkin-critical-surface-inverse-medium: light-dark(var(--catkin-scale-critical-6), var(--catkin-scale-critical-9));
  --catkin-critical-surface-inverse-medium-hover: light-dark(var(--catkin-scale-critical-2), var(--catkin-scale-critical-12));
  --catkin-critical-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-critical-5), var(--catkin-scale-critical-10));
  --catkin-critical-surface-inverse-weak: light-dark(var(--catkin-scale-critical-7), var(--catkin-scale-critical-8));
  --catkin-critical-surface-inverse-weak-hover: light-dark(var(--catkin-scale-critical-3), var(--catkin-scale-critical-12));
  --catkin-critical-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-critical-6), var(--catkin-scale-critical-9));
  --catkin-critical-surface-vibrant: light-dark(var(--catkin-scale-critical-9), var(--catkin-scale-critical-9));
  --catkin-critical-surface-vibrant-hover: light-dark(var(--catkin-scale-critical-12), var(--catkin-scale-critical-12));
  --catkin-critical-surface-vibrant-pressed: light-dark(var(--catkin-scale-critical-10), var(--catkin-scale-critical-10));
  --catkin-critical-on-surface-100: light-dark(var(--catkin-scale-critical-1), var(--catkin-scale-critical-12));
  --catkin-critical-on-surface-100-hover: light-dark(var(--catkin-scale-critical-5), var(--catkin-scale-critical-9));
  --catkin-critical-on-surface-100-pressed: light-dark(var(--catkin-scale-critical-2), var(--catkin-scale-critical-11));
  --catkin-critical-on-surface-90: light-dark(var(--catkin-scale-critical-4), var(--catkin-scale-critical-10));
  --catkin-critical-on-surface-90-hover: light-dark(var(--catkin-scale-critical-0), var(--catkin-scale-critical-14));
  --catkin-critical-on-surface-90-pressed: light-dark(var(--catkin-scale-critical-3), var(--catkin-scale-critical-11));
  --catkin-critical-on-surface-80: light-dark(var(--catkin-scale-critical-6), var(--catkin-scale-critical-9));
  --catkin-critical-on-surface-80-hover: light-dark(var(--catkin-scale-critical-3), var(--catkin-scale-critical-12));
  --catkin-critical-on-surface-80-pressed: light-dark(var(--catkin-scale-critical-5), var(--catkin-scale-critical-10));
  --catkin-critical-on-surface-70: light-dark(var(--catkin-scale-critical-7), var(--catkin-scale-critical-8));
  --catkin-critical-on-surface-70-hover: light-dark(var(--catkin-scale-critical-4), var(--catkin-scale-critical-10));
  --catkin-critical-on-surface-70-pressed: light-dark(var(--catkin-scale-critical-6), var(--catkin-scale-critical-9));
  --catkin-critical-on-surface-60: light-dark(var(--catkin-scale-critical-10), var(--catkin-scale-critical-6));
  --catkin-critical-on-surface-50: light-dark(var(--catkin-scale-critical-12), var(--catkin-scale-critical-3));
  --catkin-critical-on-inverse: light-dark(var(--catkin-scale-critical-14), var(--catkin-scale-critical-3));
  --catkin-critical-on-inverse-hover: light-dark(var(--catkin-scale-critical-11), var(--catkin-scale-critical-0));
  --catkin-critical-on-inverse-pressed: light-dark(var(--catkin-scale-critical-13), var(--catkin-scale-critical-2));
  --catkin-critical-on-vibrant: light-dark(var(--catkin-scale-critical-1), var(--catkin-scale-critical-1));
  --catkin-critical-on-vibrant-hover: light-dark(var(--catkin-scale-critical-4), var(--catkin-scale-critical-4));
  --catkin-critical-on-vibrant-pressed: light-dark(var(--catkin-scale-critical-2), var(--catkin-scale-critical-2));
  --catkin-critical-fill: light-dark(#B3261E, #D14343);
  --catkin-critical-fill-hover: light-dark(#A20D0B, #BF3135);
  --catkin-critical-fill-pressed: light-dark(#900003, #BC2E32);
  --catkin-critical-on-fill: light-dark(#FFFFFF, #FFFFFF);
  --catkin-violet-surface-1: light-dark(var(--catkin-scale-violet-14), var(--catkin-scale-violet-1));
  --catkin-violet-surface-1-hover: light-dark(var(--catkin-scale-violet-13), var(--catkin-scale-violet-3));
  --catkin-violet-surface-1-pressed: light-dark(var(--catkin-scale-violet-12), var(--catkin-scale-violet-4));
  --catkin-violet-surface-2: light-dark(var(--catkin-scale-violet-13), var(--catkin-scale-violet-2));
  --catkin-violet-surface-2-hover: light-dark(var(--catkin-scale-violet-12), var(--catkin-scale-violet-4));
  --catkin-violet-surface-2-pressed: light-dark(var(--catkin-scale-violet-11), var(--catkin-scale-violet-5));
  --catkin-violet-surface-3: light-dark(var(--catkin-scale-violet-12), var(--catkin-scale-violet-3));
  --catkin-violet-surface-3-hover: light-dark(var(--catkin-scale-violet-11), var(--catkin-scale-violet-1));
  --catkin-violet-surface-3-pressed: light-dark(var(--catkin-scale-violet-10), var(--catkin-scale-violet-0));
  --catkin-violet-surface-inverse-strong: light-dark(var(--catkin-scale-violet-1), var(--catkin-scale-violet-12));
  --catkin-violet-surface-inverse-strong-hover: light-dark(var(--catkin-scale-violet-5), var(--catkin-scale-violet-9));
  --catkin-violet-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-violet-2), var(--catkin-scale-violet-11));
  --catkin-violet-surface-inverse-medium: light-dark(var(--catkin-scale-violet-6), var(--catkin-scale-violet-9));
  --catkin-violet-surface-inverse-medium-hover: light-dark(var(--catkin-scale-violet-2), var(--catkin-scale-violet-12));
  --catkin-violet-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-violet-5), var(--catkin-scale-violet-10));
  --catkin-violet-surface-inverse-weak: light-dark(var(--catkin-scale-violet-7), var(--catkin-scale-violet-8));
  --catkin-violet-surface-inverse-weak-hover: light-dark(var(--catkin-scale-violet-3), var(--catkin-scale-violet-12));
  --catkin-violet-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-violet-6), var(--catkin-scale-violet-9));
  --catkin-violet-surface-vibrant: light-dark(var(--catkin-scale-violet-9), var(--catkin-scale-violet-9));
  --catkin-violet-surface-vibrant-hover: light-dark(var(--catkin-scale-violet-12), var(--catkin-scale-violet-12));
  --catkin-violet-surface-vibrant-pressed: light-dark(var(--catkin-scale-violet-10), var(--catkin-scale-violet-10));
  --catkin-violet-on-surface-100: light-dark(var(--catkin-scale-violet-1), var(--catkin-scale-violet-12));
  --catkin-violet-on-surface-100-hover: light-dark(var(--catkin-scale-violet-5), var(--catkin-scale-violet-9));
  --catkin-violet-on-surface-100-pressed: light-dark(var(--catkin-scale-violet-2), var(--catkin-scale-violet-11));
  --catkin-violet-on-surface-90: light-dark(var(--catkin-scale-violet-4), var(--catkin-scale-violet-10));
  --catkin-violet-on-surface-90-hover: light-dark(var(--catkin-scale-violet-0), var(--catkin-scale-violet-14));
  --catkin-violet-on-surface-90-pressed: light-dark(var(--catkin-scale-violet-3), var(--catkin-scale-violet-11));
  --catkin-violet-on-surface-80: light-dark(var(--catkin-scale-violet-6), var(--catkin-scale-violet-9));
  --catkin-violet-on-surface-80-hover: light-dark(var(--catkin-scale-violet-3), var(--catkin-scale-violet-12));
  --catkin-violet-on-surface-80-pressed: light-dark(var(--catkin-scale-violet-5), var(--catkin-scale-violet-10));
  --catkin-violet-on-surface-70: light-dark(var(--catkin-scale-violet-7), var(--catkin-scale-violet-8));
  --catkin-violet-on-surface-70-hover: light-dark(var(--catkin-scale-violet-4), var(--catkin-scale-violet-10));
  --catkin-violet-on-surface-70-pressed: light-dark(var(--catkin-scale-violet-6), var(--catkin-scale-violet-9));
  --catkin-violet-on-surface-60: light-dark(var(--catkin-scale-violet-10), var(--catkin-scale-violet-6));
  --catkin-violet-on-surface-50: light-dark(var(--catkin-scale-violet-12), var(--catkin-scale-violet-3));
  --catkin-violet-on-inverse: light-dark(var(--catkin-scale-violet-14), var(--catkin-scale-violet-3));
  --catkin-violet-on-inverse-hover: light-dark(var(--catkin-scale-violet-11), var(--catkin-scale-violet-0));
  --catkin-violet-on-inverse-pressed: light-dark(var(--catkin-scale-violet-13), var(--catkin-scale-violet-2));
  --catkin-violet-on-vibrant: light-dark(var(--catkin-scale-violet-1), var(--catkin-scale-violet-1));
  --catkin-violet-on-vibrant-hover: light-dark(var(--catkin-scale-violet-4), var(--catkin-scale-violet-4));
  --catkin-violet-on-vibrant-pressed: light-dark(var(--catkin-scale-violet-2), var(--catkin-scale-violet-2));
  --catkin-violet-fill: light-dark(#5B2FA8, #C4B0F5);
  --catkin-violet-fill-hover: light-dark(#4E1D98, #D3C2FF);
  --catkin-violet-fill-pressed: light-dark(#440A8B, #DED2FF);
  --catkin-violet-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-orange-surface-1: light-dark(var(--catkin-scale-orange-14), var(--catkin-scale-orange-1));
  --catkin-orange-surface-1-hover: light-dark(var(--catkin-scale-orange-13), var(--catkin-scale-orange-3));
  --catkin-orange-surface-1-pressed: light-dark(var(--catkin-scale-orange-12), var(--catkin-scale-orange-4));
  --catkin-orange-surface-2: light-dark(var(--catkin-scale-orange-13), var(--catkin-scale-orange-2));
  --catkin-orange-surface-2-hover: light-dark(var(--catkin-scale-orange-12), var(--catkin-scale-orange-4));
  --catkin-orange-surface-2-pressed: light-dark(var(--catkin-scale-orange-11), var(--catkin-scale-orange-5));
  --catkin-orange-surface-3: light-dark(var(--catkin-scale-orange-12), var(--catkin-scale-orange-3));
  --catkin-orange-surface-3-hover: light-dark(var(--catkin-scale-orange-11), var(--catkin-scale-orange-1));
  --catkin-orange-surface-3-pressed: light-dark(var(--catkin-scale-orange-10), var(--catkin-scale-orange-0));
  --catkin-orange-surface-inverse-strong: light-dark(var(--catkin-scale-orange-1), var(--catkin-scale-orange-12));
  --catkin-orange-surface-inverse-strong-hover: light-dark(var(--catkin-scale-orange-5), var(--catkin-scale-orange-9));
  --catkin-orange-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-orange-2), var(--catkin-scale-orange-11));
  --catkin-orange-surface-inverse-medium: light-dark(var(--catkin-scale-orange-6), var(--catkin-scale-orange-9));
  --catkin-orange-surface-inverse-medium-hover: light-dark(var(--catkin-scale-orange-2), var(--catkin-scale-orange-12));
  --catkin-orange-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-orange-5), var(--catkin-scale-orange-10));
  --catkin-orange-surface-inverse-weak: light-dark(var(--catkin-scale-orange-7), var(--catkin-scale-orange-8));
  --catkin-orange-surface-inverse-weak-hover: light-dark(var(--catkin-scale-orange-3), var(--catkin-scale-orange-12));
  --catkin-orange-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-orange-6), var(--catkin-scale-orange-9));
  --catkin-orange-surface-vibrant: light-dark(var(--catkin-scale-orange-9), var(--catkin-scale-orange-9));
  --catkin-orange-surface-vibrant-hover: light-dark(var(--catkin-scale-orange-12), var(--catkin-scale-orange-12));
  --catkin-orange-surface-vibrant-pressed: light-dark(var(--catkin-scale-orange-10), var(--catkin-scale-orange-10));
  --catkin-orange-on-surface-100: light-dark(var(--catkin-scale-orange-1), var(--catkin-scale-orange-12));
  --catkin-orange-on-surface-100-hover: light-dark(var(--catkin-scale-orange-5), var(--catkin-scale-orange-9));
  --catkin-orange-on-surface-100-pressed: light-dark(var(--catkin-scale-orange-2), var(--catkin-scale-orange-11));
  --catkin-orange-on-surface-90: light-dark(var(--catkin-scale-orange-4), var(--catkin-scale-orange-10));
  --catkin-orange-on-surface-90-hover: light-dark(var(--catkin-scale-orange-0), var(--catkin-scale-orange-14));
  --catkin-orange-on-surface-90-pressed: light-dark(var(--catkin-scale-orange-3), var(--catkin-scale-orange-11));
  --catkin-orange-on-surface-80: light-dark(var(--catkin-scale-orange-6), var(--catkin-scale-orange-9));
  --catkin-orange-on-surface-80-hover: light-dark(var(--catkin-scale-orange-3), var(--catkin-scale-orange-12));
  --catkin-orange-on-surface-80-pressed: light-dark(var(--catkin-scale-orange-5), var(--catkin-scale-orange-10));
  --catkin-orange-on-surface-70: light-dark(var(--catkin-scale-orange-7), var(--catkin-scale-orange-8));
  --catkin-orange-on-surface-70-hover: light-dark(var(--catkin-scale-orange-4), var(--catkin-scale-orange-10));
  --catkin-orange-on-surface-70-pressed: light-dark(var(--catkin-scale-orange-6), var(--catkin-scale-orange-9));
  --catkin-orange-on-surface-60: light-dark(var(--catkin-scale-orange-10), var(--catkin-scale-orange-6));
  --catkin-orange-on-surface-50: light-dark(var(--catkin-scale-orange-12), var(--catkin-scale-orange-3));
  --catkin-orange-on-inverse: light-dark(var(--catkin-scale-orange-14), var(--catkin-scale-orange-3));
  --catkin-orange-on-inverse-hover: light-dark(var(--catkin-scale-orange-11), var(--catkin-scale-orange-0));
  --catkin-orange-on-inverse-pressed: light-dark(var(--catkin-scale-orange-13), var(--catkin-scale-orange-2));
  --catkin-orange-on-vibrant: light-dark(var(--catkin-scale-orange-1), var(--catkin-scale-orange-1));
  --catkin-orange-on-vibrant-hover: light-dark(var(--catkin-scale-orange-4), var(--catkin-scale-orange-4));
  --catkin-orange-on-vibrant-pressed: light-dark(var(--catkin-scale-orange-2), var(--catkin-scale-orange-2));
  --catkin-orange-fill: light-dark(#DF600C, #DF600C);
  --catkin-orange-fill-hover: light-dark(#EB6B21, #F17028);
  --catkin-orange-fill-pressed: light-dark(#EB6B21, #FF7D38);
  --catkin-orange-on-fill: light-dark(#1A120B, #1A120B);
  --catkin-yellow-surface-1: light-dark(var(--catkin-scale-yellow-14), var(--catkin-scale-yellow-1));
  --catkin-yellow-surface-1-hover: light-dark(var(--catkin-scale-yellow-13), var(--catkin-scale-yellow-3));
  --catkin-yellow-surface-1-pressed: light-dark(var(--catkin-scale-yellow-12), var(--catkin-scale-yellow-4));
  --catkin-yellow-surface-2: light-dark(var(--catkin-scale-yellow-13), var(--catkin-scale-yellow-2));
  --catkin-yellow-surface-2-hover: light-dark(var(--catkin-scale-yellow-12), var(--catkin-scale-yellow-4));
  --catkin-yellow-surface-2-pressed: light-dark(var(--catkin-scale-yellow-11), var(--catkin-scale-yellow-5));
  --catkin-yellow-surface-3: light-dark(var(--catkin-scale-yellow-12), var(--catkin-scale-yellow-3));
  --catkin-yellow-surface-3-hover: light-dark(var(--catkin-scale-yellow-11), var(--catkin-scale-yellow-1));
  --catkin-yellow-surface-3-pressed: light-dark(var(--catkin-scale-yellow-10), var(--catkin-scale-yellow-0));
  --catkin-yellow-surface-inverse-strong: light-dark(var(--catkin-scale-yellow-1), var(--catkin-scale-yellow-12));
  --catkin-yellow-surface-inverse-strong-hover: light-dark(var(--catkin-scale-yellow-5), var(--catkin-scale-yellow-9));
  --catkin-yellow-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-yellow-2), var(--catkin-scale-yellow-11));
  --catkin-yellow-surface-inverse-medium: light-dark(var(--catkin-scale-yellow-6), var(--catkin-scale-yellow-9));
  --catkin-yellow-surface-inverse-medium-hover: light-dark(var(--catkin-scale-yellow-2), var(--catkin-scale-yellow-12));
  --catkin-yellow-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-yellow-5), var(--catkin-scale-yellow-10));
  --catkin-yellow-surface-inverse-weak: light-dark(var(--catkin-scale-yellow-7), var(--catkin-scale-yellow-8));
  --catkin-yellow-surface-inverse-weak-hover: light-dark(var(--catkin-scale-yellow-3), var(--catkin-scale-yellow-12));
  --catkin-yellow-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-yellow-6), var(--catkin-scale-yellow-9));
  --catkin-yellow-surface-vibrant: light-dark(var(--catkin-scale-yellow-9), var(--catkin-scale-yellow-9));
  --catkin-yellow-surface-vibrant-hover: light-dark(var(--catkin-scale-yellow-12), var(--catkin-scale-yellow-12));
  --catkin-yellow-surface-vibrant-pressed: light-dark(var(--catkin-scale-yellow-10), var(--catkin-scale-yellow-10));
  --catkin-yellow-on-surface-100: light-dark(var(--catkin-scale-yellow-1), var(--catkin-scale-yellow-12));
  --catkin-yellow-on-surface-100-hover: light-dark(var(--catkin-scale-yellow-5), var(--catkin-scale-yellow-9));
  --catkin-yellow-on-surface-100-pressed: light-dark(var(--catkin-scale-yellow-2), var(--catkin-scale-yellow-11));
  --catkin-yellow-on-surface-90: light-dark(var(--catkin-scale-yellow-4), var(--catkin-scale-yellow-10));
  --catkin-yellow-on-surface-90-hover: light-dark(var(--catkin-scale-yellow-0), var(--catkin-scale-yellow-14));
  --catkin-yellow-on-surface-90-pressed: light-dark(var(--catkin-scale-yellow-3), var(--catkin-scale-yellow-11));
  --catkin-yellow-on-surface-80: light-dark(var(--catkin-scale-yellow-6), var(--catkin-scale-yellow-9));
  --catkin-yellow-on-surface-80-hover: light-dark(var(--catkin-scale-yellow-3), var(--catkin-scale-yellow-12));
  --catkin-yellow-on-surface-80-pressed: light-dark(var(--catkin-scale-yellow-5), var(--catkin-scale-yellow-10));
  --catkin-yellow-on-surface-70: light-dark(var(--catkin-scale-yellow-7), var(--catkin-scale-yellow-8));
  --catkin-yellow-on-surface-70-hover: light-dark(var(--catkin-scale-yellow-4), var(--catkin-scale-yellow-10));
  --catkin-yellow-on-surface-70-pressed: light-dark(var(--catkin-scale-yellow-6), var(--catkin-scale-yellow-9));
  --catkin-yellow-on-surface-60: light-dark(var(--catkin-scale-yellow-10), var(--catkin-scale-yellow-6));
  --catkin-yellow-on-surface-50: light-dark(var(--catkin-scale-yellow-12), var(--catkin-scale-yellow-3));
  --catkin-yellow-on-inverse: light-dark(var(--catkin-scale-yellow-14), var(--catkin-scale-yellow-3));
  --catkin-yellow-on-inverse-hover: light-dark(var(--catkin-scale-yellow-11), var(--catkin-scale-yellow-0));
  --catkin-yellow-on-inverse-pressed: light-dark(var(--catkin-scale-yellow-13), var(--catkin-scale-yellow-2));
  --catkin-yellow-on-vibrant: light-dark(var(--catkin-scale-yellow-1), var(--catkin-scale-yellow-1));
  --catkin-yellow-on-vibrant-hover: light-dark(var(--catkin-scale-yellow-4), var(--catkin-scale-yellow-4));
  --catkin-yellow-on-vibrant-pressed: light-dark(var(--catkin-scale-yellow-2), var(--catkin-scale-yellow-2));
  --catkin-yellow-fill: light-dark(#705D00, #C6AA34);
  --catkin-yellow-fill-hover: light-dark(#604F00, #D6BA47);
  --catkin-yellow-fill-pressed: light-dark(#534500, #E3C756);
  --catkin-yellow-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-pink-surface-1: light-dark(var(--catkin-scale-pink-14), var(--catkin-scale-pink-1));
  --catkin-pink-surface-1-hover: light-dark(var(--catkin-scale-pink-13), var(--catkin-scale-pink-3));
  --catkin-pink-surface-1-pressed: light-dark(var(--catkin-scale-pink-12), var(--catkin-scale-pink-4));
  --catkin-pink-surface-2: light-dark(var(--catkin-scale-pink-13), var(--catkin-scale-pink-2));
  --catkin-pink-surface-2-hover: light-dark(var(--catkin-scale-pink-12), var(--catkin-scale-pink-4));
  --catkin-pink-surface-2-pressed: light-dark(var(--catkin-scale-pink-11), var(--catkin-scale-pink-5));
  --catkin-pink-surface-3: light-dark(var(--catkin-scale-pink-12), var(--catkin-scale-pink-3));
  --catkin-pink-surface-3-hover: light-dark(var(--catkin-scale-pink-11), var(--catkin-scale-pink-1));
  --catkin-pink-surface-3-pressed: light-dark(var(--catkin-scale-pink-10), var(--catkin-scale-pink-0));
  --catkin-pink-surface-inverse-strong: light-dark(var(--catkin-scale-pink-1), var(--catkin-scale-pink-12));
  --catkin-pink-surface-inverse-strong-hover: light-dark(var(--catkin-scale-pink-5), var(--catkin-scale-pink-9));
  --catkin-pink-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-pink-2), var(--catkin-scale-pink-11));
  --catkin-pink-surface-inverse-medium: light-dark(var(--catkin-scale-pink-6), var(--catkin-scale-pink-9));
  --catkin-pink-surface-inverse-medium-hover: light-dark(var(--catkin-scale-pink-2), var(--catkin-scale-pink-12));
  --catkin-pink-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-pink-5), var(--catkin-scale-pink-10));
  --catkin-pink-surface-inverse-weak: light-dark(var(--catkin-scale-pink-7), var(--catkin-scale-pink-8));
  --catkin-pink-surface-inverse-weak-hover: light-dark(var(--catkin-scale-pink-3), var(--catkin-scale-pink-12));
  --catkin-pink-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-pink-6), var(--catkin-scale-pink-9));
  --catkin-pink-surface-vibrant: light-dark(var(--catkin-scale-pink-9), var(--catkin-scale-pink-9));
  --catkin-pink-surface-vibrant-hover: light-dark(var(--catkin-scale-pink-12), var(--catkin-scale-pink-12));
  --catkin-pink-surface-vibrant-pressed: light-dark(var(--catkin-scale-pink-10), var(--catkin-scale-pink-10));
  --catkin-pink-on-surface-100: light-dark(var(--catkin-scale-pink-1), var(--catkin-scale-pink-12));
  --catkin-pink-on-surface-100-hover: light-dark(var(--catkin-scale-pink-5), var(--catkin-scale-pink-9));
  --catkin-pink-on-surface-100-pressed: light-dark(var(--catkin-scale-pink-2), var(--catkin-scale-pink-11));
  --catkin-pink-on-surface-90: light-dark(var(--catkin-scale-pink-4), var(--catkin-scale-pink-10));
  --catkin-pink-on-surface-90-hover: light-dark(var(--catkin-scale-pink-0), var(--catkin-scale-pink-14));
  --catkin-pink-on-surface-90-pressed: light-dark(var(--catkin-scale-pink-3), var(--catkin-scale-pink-11));
  --catkin-pink-on-surface-80: light-dark(var(--catkin-scale-pink-6), var(--catkin-scale-pink-9));
  --catkin-pink-on-surface-80-hover: light-dark(var(--catkin-scale-pink-3), var(--catkin-scale-pink-12));
  --catkin-pink-on-surface-80-pressed: light-dark(var(--catkin-scale-pink-5), var(--catkin-scale-pink-10));
  --catkin-pink-on-surface-70: light-dark(var(--catkin-scale-pink-7), var(--catkin-scale-pink-8));
  --catkin-pink-on-surface-70-hover: light-dark(var(--catkin-scale-pink-4), var(--catkin-scale-pink-10));
  --catkin-pink-on-surface-70-pressed: light-dark(var(--catkin-scale-pink-6), var(--catkin-scale-pink-9));
  --catkin-pink-on-surface-60: light-dark(var(--catkin-scale-pink-10), var(--catkin-scale-pink-6));
  --catkin-pink-on-surface-50: light-dark(var(--catkin-scale-pink-12), var(--catkin-scale-pink-3));
  --catkin-pink-on-inverse: light-dark(var(--catkin-scale-pink-14), var(--catkin-scale-pink-3));
  --catkin-pink-on-inverse-hover: light-dark(var(--catkin-scale-pink-11), var(--catkin-scale-pink-0));
  --catkin-pink-on-inverse-pressed: light-dark(var(--catkin-scale-pink-13), var(--catkin-scale-pink-2));
  --catkin-pink-on-vibrant: light-dark(var(--catkin-scale-pink-1), var(--catkin-scale-pink-1));
  --catkin-pink-on-vibrant-hover: light-dark(var(--catkin-scale-pink-4), var(--catkin-scale-pink-4));
  --catkin-pink-on-vibrant-pressed: light-dark(var(--catkin-scale-pink-2), var(--catkin-scale-pink-2));
  --catkin-pink-fill: light-dark(#A53168, #F788B5);
  --catkin-pink-fill-hover: light-dark(#941F5A, #FF9FC4);
  --catkin-pink-fill-pressed: light-dark(#870E4F, #FFB5D0);
  --catkin-pink-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-cyan-surface-1: light-dark(var(--catkin-scale-cyan-14), var(--catkin-scale-cyan-1));
  --catkin-cyan-surface-1-hover: light-dark(var(--catkin-scale-cyan-13), var(--catkin-scale-cyan-3));
  --catkin-cyan-surface-1-pressed: light-dark(var(--catkin-scale-cyan-12), var(--catkin-scale-cyan-4));
  --catkin-cyan-surface-2: light-dark(var(--catkin-scale-cyan-13), var(--catkin-scale-cyan-2));
  --catkin-cyan-surface-2-hover: light-dark(var(--catkin-scale-cyan-12), var(--catkin-scale-cyan-4));
  --catkin-cyan-surface-2-pressed: light-dark(var(--catkin-scale-cyan-11), var(--catkin-scale-cyan-5));
  --catkin-cyan-surface-3: light-dark(var(--catkin-scale-cyan-12), var(--catkin-scale-cyan-3));
  --catkin-cyan-surface-3-hover: light-dark(var(--catkin-scale-cyan-11), var(--catkin-scale-cyan-1));
  --catkin-cyan-surface-3-pressed: light-dark(var(--catkin-scale-cyan-10), var(--catkin-scale-cyan-0));
  --catkin-cyan-surface-inverse-strong: light-dark(var(--catkin-scale-cyan-1), var(--catkin-scale-cyan-12));
  --catkin-cyan-surface-inverse-strong-hover: light-dark(var(--catkin-scale-cyan-5), var(--catkin-scale-cyan-9));
  --catkin-cyan-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-cyan-2), var(--catkin-scale-cyan-11));
  --catkin-cyan-surface-inverse-medium: light-dark(var(--catkin-scale-cyan-6), var(--catkin-scale-cyan-9));
  --catkin-cyan-surface-inverse-medium-hover: light-dark(var(--catkin-scale-cyan-2), var(--catkin-scale-cyan-12));
  --catkin-cyan-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-cyan-5), var(--catkin-scale-cyan-10));
  --catkin-cyan-surface-inverse-weak: light-dark(var(--catkin-scale-cyan-7), var(--catkin-scale-cyan-8));
  --catkin-cyan-surface-inverse-weak-hover: light-dark(var(--catkin-scale-cyan-3), var(--catkin-scale-cyan-12));
  --catkin-cyan-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-cyan-6), var(--catkin-scale-cyan-9));
  --catkin-cyan-surface-vibrant: light-dark(var(--catkin-scale-cyan-9), var(--catkin-scale-cyan-9));
  --catkin-cyan-surface-vibrant-hover: light-dark(var(--catkin-scale-cyan-12), var(--catkin-scale-cyan-12));
  --catkin-cyan-surface-vibrant-pressed: light-dark(var(--catkin-scale-cyan-10), var(--catkin-scale-cyan-10));
  --catkin-cyan-on-surface-100: light-dark(var(--catkin-scale-cyan-1), var(--catkin-scale-cyan-12));
  --catkin-cyan-on-surface-100-hover: light-dark(var(--catkin-scale-cyan-5), var(--catkin-scale-cyan-9));
  --catkin-cyan-on-surface-100-pressed: light-dark(var(--catkin-scale-cyan-2), var(--catkin-scale-cyan-11));
  --catkin-cyan-on-surface-90: light-dark(var(--catkin-scale-cyan-4), var(--catkin-scale-cyan-10));
  --catkin-cyan-on-surface-90-hover: light-dark(var(--catkin-scale-cyan-0), var(--catkin-scale-cyan-14));
  --catkin-cyan-on-surface-90-pressed: light-dark(var(--catkin-scale-cyan-3), var(--catkin-scale-cyan-11));
  --catkin-cyan-on-surface-80: light-dark(var(--catkin-scale-cyan-6), var(--catkin-scale-cyan-9));
  --catkin-cyan-on-surface-80-hover: light-dark(var(--catkin-scale-cyan-3), var(--catkin-scale-cyan-12));
  --catkin-cyan-on-surface-80-pressed: light-dark(var(--catkin-scale-cyan-5), var(--catkin-scale-cyan-10));
  --catkin-cyan-on-surface-70: light-dark(var(--catkin-scale-cyan-7), var(--catkin-scale-cyan-8));
  --catkin-cyan-on-surface-70-hover: light-dark(var(--catkin-scale-cyan-4), var(--catkin-scale-cyan-10));
  --catkin-cyan-on-surface-70-pressed: light-dark(var(--catkin-scale-cyan-6), var(--catkin-scale-cyan-9));
  --catkin-cyan-on-surface-60: light-dark(var(--catkin-scale-cyan-10), var(--catkin-scale-cyan-6));
  --catkin-cyan-on-surface-50: light-dark(var(--catkin-scale-cyan-12), var(--catkin-scale-cyan-3));
  --catkin-cyan-on-inverse: light-dark(var(--catkin-scale-cyan-14), var(--catkin-scale-cyan-3));
  --catkin-cyan-on-inverse-hover: light-dark(var(--catkin-scale-cyan-11), var(--catkin-scale-cyan-0));
  --catkin-cyan-on-inverse-pressed: light-dark(var(--catkin-scale-cyan-13), var(--catkin-scale-cyan-2));
  --catkin-cyan-on-vibrant: light-dark(var(--catkin-scale-cyan-1), var(--catkin-scale-cyan-1));
  --catkin-cyan-on-vibrant-hover: light-dark(var(--catkin-scale-cyan-4), var(--catkin-scale-cyan-4));
  --catkin-cyan-on-vibrant-pressed: light-dark(var(--catkin-scale-cyan-2), var(--catkin-scale-cyan-2));
  --catkin-cyan-fill: light-dark(#006683, #50B7DB);
  --catkin-cyan-fill-hover: light-dark(#005770, #61C7EC);
  --catkin-cyan-fill-pressed: light-dark(#004B62, #6FD4F9);
  --catkin-cyan-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-turquoise-surface-1: light-dark(var(--catkin-scale-turquoise-14), var(--catkin-scale-turquoise-1));
  --catkin-turquoise-surface-1-hover: light-dark(var(--catkin-scale-turquoise-13), var(--catkin-scale-turquoise-3));
  --catkin-turquoise-surface-1-pressed: light-dark(var(--catkin-scale-turquoise-12), var(--catkin-scale-turquoise-4));
  --catkin-turquoise-surface-2: light-dark(var(--catkin-scale-turquoise-13), var(--catkin-scale-turquoise-2));
  --catkin-turquoise-surface-2-hover: light-dark(var(--catkin-scale-turquoise-12), var(--catkin-scale-turquoise-4));
  --catkin-turquoise-surface-2-pressed: light-dark(var(--catkin-scale-turquoise-11), var(--catkin-scale-turquoise-5));
  --catkin-turquoise-surface-3: light-dark(var(--catkin-scale-turquoise-12), var(--catkin-scale-turquoise-3));
  --catkin-turquoise-surface-3-hover: light-dark(var(--catkin-scale-turquoise-11), var(--catkin-scale-turquoise-1));
  --catkin-turquoise-surface-3-pressed: light-dark(var(--catkin-scale-turquoise-10), var(--catkin-scale-turquoise-0));
  --catkin-turquoise-surface-inverse-strong: light-dark(var(--catkin-scale-turquoise-1), var(--catkin-scale-turquoise-12));
  --catkin-turquoise-surface-inverse-strong-hover: light-dark(var(--catkin-scale-turquoise-5), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-turquoise-2), var(--catkin-scale-turquoise-11));
  --catkin-turquoise-surface-inverse-medium: light-dark(var(--catkin-scale-turquoise-6), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-surface-inverse-medium-hover: light-dark(var(--catkin-scale-turquoise-2), var(--catkin-scale-turquoise-12));
  --catkin-turquoise-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-turquoise-5), var(--catkin-scale-turquoise-10));
  --catkin-turquoise-surface-inverse-weak: light-dark(var(--catkin-scale-turquoise-7), var(--catkin-scale-turquoise-8));
  --catkin-turquoise-surface-inverse-weak-hover: light-dark(var(--catkin-scale-turquoise-3), var(--catkin-scale-turquoise-12));
  --catkin-turquoise-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-turquoise-6), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-surface-vibrant: light-dark(var(--catkin-scale-turquoise-9), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-surface-vibrant-hover: light-dark(var(--catkin-scale-turquoise-12), var(--catkin-scale-turquoise-12));
  --catkin-turquoise-surface-vibrant-pressed: light-dark(var(--catkin-scale-turquoise-10), var(--catkin-scale-turquoise-10));
  --catkin-turquoise-on-surface-100: light-dark(var(--catkin-scale-turquoise-1), var(--catkin-scale-turquoise-12));
  --catkin-turquoise-on-surface-100-hover: light-dark(var(--catkin-scale-turquoise-5), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-on-surface-100-pressed: light-dark(var(--catkin-scale-turquoise-2), var(--catkin-scale-turquoise-11));
  --catkin-turquoise-on-surface-90: light-dark(var(--catkin-scale-turquoise-4), var(--catkin-scale-turquoise-10));
  --catkin-turquoise-on-surface-90-hover: light-dark(var(--catkin-scale-turquoise-0), var(--catkin-scale-turquoise-14));
  --catkin-turquoise-on-surface-90-pressed: light-dark(var(--catkin-scale-turquoise-3), var(--catkin-scale-turquoise-11));
  --catkin-turquoise-on-surface-80: light-dark(var(--catkin-scale-turquoise-6), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-on-surface-80-hover: light-dark(var(--catkin-scale-turquoise-3), var(--catkin-scale-turquoise-12));
  --catkin-turquoise-on-surface-80-pressed: light-dark(var(--catkin-scale-turquoise-5), var(--catkin-scale-turquoise-10));
  --catkin-turquoise-on-surface-70: light-dark(var(--catkin-scale-turquoise-7), var(--catkin-scale-turquoise-8));
  --catkin-turquoise-on-surface-70-hover: light-dark(var(--catkin-scale-turquoise-4), var(--catkin-scale-turquoise-10));
  --catkin-turquoise-on-surface-70-pressed: light-dark(var(--catkin-scale-turquoise-6), var(--catkin-scale-turquoise-9));
  --catkin-turquoise-on-surface-60: light-dark(var(--catkin-scale-turquoise-10), var(--catkin-scale-turquoise-6));
  --catkin-turquoise-on-surface-50: light-dark(var(--catkin-scale-turquoise-12), var(--catkin-scale-turquoise-3));
  --catkin-turquoise-on-inverse: light-dark(var(--catkin-scale-turquoise-14), var(--catkin-scale-turquoise-3));
  --catkin-turquoise-on-inverse-hover: light-dark(var(--catkin-scale-turquoise-11), var(--catkin-scale-turquoise-0));
  --catkin-turquoise-on-inverse-pressed: light-dark(var(--catkin-scale-turquoise-13), var(--catkin-scale-turquoise-2));
  --catkin-turquoise-on-vibrant: light-dark(var(--catkin-scale-turquoise-1), var(--catkin-scale-turquoise-1));
  --catkin-turquoise-on-vibrant-hover: light-dark(var(--catkin-scale-turquoise-4), var(--catkin-scale-turquoise-4));
  --catkin-turquoise-on-vibrant-pressed: light-dark(var(--catkin-scale-turquoise-2), var(--catkin-scale-turquoise-2));
  --catkin-turquoise-fill: light-dark(#006965, #4FBCB5);
  --catkin-turquoise-fill-hover: light-dark(#005956, #61CCC5);
  --catkin-turquoise-fill-pressed: light-dark(#004D4A, #6ED9D2);
  --catkin-turquoise-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-burgundy-surface-1: light-dark(var(--catkin-scale-burgundy-14), var(--catkin-scale-burgundy-1));
  --catkin-burgundy-surface-1-hover: light-dark(var(--catkin-scale-burgundy-13), var(--catkin-scale-burgundy-3));
  --catkin-burgundy-surface-1-pressed: light-dark(var(--catkin-scale-burgundy-12), var(--catkin-scale-burgundy-4));
  --catkin-burgundy-surface-2: light-dark(var(--catkin-scale-burgundy-13), var(--catkin-scale-burgundy-2));
  --catkin-burgundy-surface-2-hover: light-dark(var(--catkin-scale-burgundy-12), var(--catkin-scale-burgundy-4));
  --catkin-burgundy-surface-2-pressed: light-dark(var(--catkin-scale-burgundy-11), var(--catkin-scale-burgundy-5));
  --catkin-burgundy-surface-3: light-dark(var(--catkin-scale-burgundy-12), var(--catkin-scale-burgundy-3));
  --catkin-burgundy-surface-3-hover: light-dark(var(--catkin-scale-burgundy-11), var(--catkin-scale-burgundy-1));
  --catkin-burgundy-surface-3-pressed: light-dark(var(--catkin-scale-burgundy-10), var(--catkin-scale-burgundy-0));
  --catkin-burgundy-surface-inverse-strong: light-dark(var(--catkin-scale-burgundy-1), var(--catkin-scale-burgundy-12));
  --catkin-burgundy-surface-inverse-strong-hover: light-dark(var(--catkin-scale-burgundy-5), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-burgundy-2), var(--catkin-scale-burgundy-11));
  --catkin-burgundy-surface-inverse-medium: light-dark(var(--catkin-scale-burgundy-6), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-surface-inverse-medium-hover: light-dark(var(--catkin-scale-burgundy-2), var(--catkin-scale-burgundy-12));
  --catkin-burgundy-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-burgundy-5), var(--catkin-scale-burgundy-10));
  --catkin-burgundy-surface-inverse-weak: light-dark(var(--catkin-scale-burgundy-7), var(--catkin-scale-burgundy-8));
  --catkin-burgundy-surface-inverse-weak-hover: light-dark(var(--catkin-scale-burgundy-3), var(--catkin-scale-burgundy-12));
  --catkin-burgundy-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-burgundy-6), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-surface-vibrant: light-dark(var(--catkin-scale-burgundy-9), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-surface-vibrant-hover: light-dark(var(--catkin-scale-burgundy-12), var(--catkin-scale-burgundy-12));
  --catkin-burgundy-surface-vibrant-pressed: light-dark(var(--catkin-scale-burgundy-10), var(--catkin-scale-burgundy-10));
  --catkin-burgundy-on-surface-100: light-dark(var(--catkin-scale-burgundy-1), var(--catkin-scale-burgundy-12));
  --catkin-burgundy-on-surface-100-hover: light-dark(var(--catkin-scale-burgundy-5), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-on-surface-100-pressed: light-dark(var(--catkin-scale-burgundy-2), var(--catkin-scale-burgundy-11));
  --catkin-burgundy-on-surface-90: light-dark(var(--catkin-scale-burgundy-4), var(--catkin-scale-burgundy-10));
  --catkin-burgundy-on-surface-90-hover: light-dark(var(--catkin-scale-burgundy-0), var(--catkin-scale-burgundy-14));
  --catkin-burgundy-on-surface-90-pressed: light-dark(var(--catkin-scale-burgundy-3), var(--catkin-scale-burgundy-11));
  --catkin-burgundy-on-surface-80: light-dark(var(--catkin-scale-burgundy-6), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-on-surface-80-hover: light-dark(var(--catkin-scale-burgundy-3), var(--catkin-scale-burgundy-12));
  --catkin-burgundy-on-surface-80-pressed: light-dark(var(--catkin-scale-burgundy-5), var(--catkin-scale-burgundy-10));
  --catkin-burgundy-on-surface-70: light-dark(var(--catkin-scale-burgundy-7), var(--catkin-scale-burgundy-8));
  --catkin-burgundy-on-surface-70-hover: light-dark(var(--catkin-scale-burgundy-4), var(--catkin-scale-burgundy-10));
  --catkin-burgundy-on-surface-70-pressed: light-dark(var(--catkin-scale-burgundy-6), var(--catkin-scale-burgundy-9));
  --catkin-burgundy-on-surface-60: light-dark(var(--catkin-scale-burgundy-10), var(--catkin-scale-burgundy-6));
  --catkin-burgundy-on-surface-50: light-dark(var(--catkin-scale-burgundy-12), var(--catkin-scale-burgundy-3));
  --catkin-burgundy-on-inverse: light-dark(var(--catkin-scale-burgundy-14), var(--catkin-scale-burgundy-3));
  --catkin-burgundy-on-inverse-hover: light-dark(var(--catkin-scale-burgundy-11), var(--catkin-scale-burgundy-0));
  --catkin-burgundy-on-inverse-pressed: light-dark(var(--catkin-scale-burgundy-13), var(--catkin-scale-burgundy-2));
  --catkin-burgundy-on-vibrant: light-dark(var(--catkin-scale-burgundy-1), var(--catkin-scale-burgundy-1));
  --catkin-burgundy-on-vibrant-hover: light-dark(var(--catkin-scale-burgundy-4), var(--catkin-scale-burgundy-4));
  --catkin-burgundy-on-vibrant-pressed: light-dark(var(--catkin-scale-burgundy-2), var(--catkin-scale-burgundy-2));
  --catkin-burgundy-fill: light-dark(#94445A, #E595A7);
  --catkin-burgundy-fill-hover: light-dark(#84364C, #F6A5B7);
  --catkin-burgundy-fill-pressed: light-dark(#772A42, #FFB4C4);
  --catkin-burgundy-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-red-surface-1: light-dark(var(--catkin-scale-red-14), var(--catkin-scale-red-1));
  --catkin-red-surface-1-hover: light-dark(var(--catkin-scale-red-13), var(--catkin-scale-red-3));
  --catkin-red-surface-1-pressed: light-dark(var(--catkin-scale-red-12), var(--catkin-scale-red-4));
  --catkin-red-surface-2: light-dark(var(--catkin-scale-red-13), var(--catkin-scale-red-2));
  --catkin-red-surface-2-hover: light-dark(var(--catkin-scale-red-12), var(--catkin-scale-red-4));
  --catkin-red-surface-2-pressed: light-dark(var(--catkin-scale-red-11), var(--catkin-scale-red-5));
  --catkin-red-surface-3: light-dark(var(--catkin-scale-red-12), var(--catkin-scale-red-3));
  --catkin-red-surface-3-hover: light-dark(var(--catkin-scale-red-11), var(--catkin-scale-red-1));
  --catkin-red-surface-3-pressed: light-dark(var(--catkin-scale-red-10), var(--catkin-scale-red-0));
  --catkin-red-surface-inverse-strong: light-dark(var(--catkin-scale-red-1), var(--catkin-scale-red-12));
  --catkin-red-surface-inverse-strong-hover: light-dark(var(--catkin-scale-red-5), var(--catkin-scale-red-9));
  --catkin-red-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-red-2), var(--catkin-scale-red-11));
  --catkin-red-surface-inverse-medium: light-dark(var(--catkin-scale-red-6), var(--catkin-scale-red-9));
  --catkin-red-surface-inverse-medium-hover: light-dark(var(--catkin-scale-red-2), var(--catkin-scale-red-12));
  --catkin-red-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-red-5), var(--catkin-scale-red-10));
  --catkin-red-surface-inverse-weak: light-dark(var(--catkin-scale-red-7), var(--catkin-scale-red-8));
  --catkin-red-surface-inverse-weak-hover: light-dark(var(--catkin-scale-red-3), var(--catkin-scale-red-12));
  --catkin-red-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-red-6), var(--catkin-scale-red-9));
  --catkin-red-surface-vibrant: light-dark(var(--catkin-scale-red-9), var(--catkin-scale-red-9));
  --catkin-red-surface-vibrant-hover: light-dark(var(--catkin-scale-red-12), var(--catkin-scale-red-12));
  --catkin-red-surface-vibrant-pressed: light-dark(var(--catkin-scale-red-10), var(--catkin-scale-red-10));
  --catkin-red-on-surface-100: light-dark(var(--catkin-scale-red-1), var(--catkin-scale-red-12));
  --catkin-red-on-surface-100-hover: light-dark(var(--catkin-scale-red-5), var(--catkin-scale-red-9));
  --catkin-red-on-surface-100-pressed: light-dark(var(--catkin-scale-red-2), var(--catkin-scale-red-11));
  --catkin-red-on-surface-90: light-dark(var(--catkin-scale-red-4), var(--catkin-scale-red-10));
  --catkin-red-on-surface-90-hover: light-dark(var(--catkin-scale-red-0), var(--catkin-scale-red-14));
  --catkin-red-on-surface-90-pressed: light-dark(var(--catkin-scale-red-3), var(--catkin-scale-red-11));
  --catkin-red-on-surface-80: light-dark(var(--catkin-scale-red-6), var(--catkin-scale-red-9));
  --catkin-red-on-surface-80-hover: light-dark(var(--catkin-scale-red-3), var(--catkin-scale-red-12));
  --catkin-red-on-surface-80-pressed: light-dark(var(--catkin-scale-red-5), var(--catkin-scale-red-10));
  --catkin-red-on-surface-70: light-dark(var(--catkin-scale-red-7), var(--catkin-scale-red-8));
  --catkin-red-on-surface-70-hover: light-dark(var(--catkin-scale-red-4), var(--catkin-scale-red-10));
  --catkin-red-on-surface-70-pressed: light-dark(var(--catkin-scale-red-6), var(--catkin-scale-red-9));
  --catkin-red-on-surface-60: light-dark(var(--catkin-scale-red-10), var(--catkin-scale-red-6));
  --catkin-red-on-surface-50: light-dark(var(--catkin-scale-red-12), var(--catkin-scale-red-3));
  --catkin-red-on-inverse: light-dark(var(--catkin-scale-red-14), var(--catkin-scale-red-3));
  --catkin-red-on-inverse-hover: light-dark(var(--catkin-scale-red-11), var(--catkin-scale-red-0));
  --catkin-red-on-inverse-pressed: light-dark(var(--catkin-scale-red-13), var(--catkin-scale-red-2));
  --catkin-red-on-vibrant: light-dark(var(--catkin-scale-red-1), var(--catkin-scale-red-1));
  --catkin-red-on-vibrant-hover: light-dark(var(--catkin-scale-red-4), var(--catkin-scale-red-4));
  --catkin-red-on-vibrant-pressed: light-dark(var(--catkin-scale-red-2), var(--catkin-scale-red-2));
  --catkin-red-fill: light-dark(#B02D1F, #FF8977);
  --catkin-red-fill-hover: light-dark(#9F190C, #FFA495);
  --catkin-red-fill-pressed: light-dark(#8F0800, #FFB8AC);
  --catkin-red-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-blue-surface-1: light-dark(var(--catkin-scale-blue-14), var(--catkin-scale-blue-1));
  --catkin-blue-surface-1-hover: light-dark(var(--catkin-scale-blue-13), var(--catkin-scale-blue-3));
  --catkin-blue-surface-1-pressed: light-dark(var(--catkin-scale-blue-12), var(--catkin-scale-blue-4));
  --catkin-blue-surface-2: light-dark(var(--catkin-scale-blue-13), var(--catkin-scale-blue-2));
  --catkin-blue-surface-2-hover: light-dark(var(--catkin-scale-blue-12), var(--catkin-scale-blue-4));
  --catkin-blue-surface-2-pressed: light-dark(var(--catkin-scale-blue-11), var(--catkin-scale-blue-5));
  --catkin-blue-surface-3: light-dark(var(--catkin-scale-blue-12), var(--catkin-scale-blue-3));
  --catkin-blue-surface-3-hover: light-dark(var(--catkin-scale-blue-11), var(--catkin-scale-blue-1));
  --catkin-blue-surface-3-pressed: light-dark(var(--catkin-scale-blue-10), var(--catkin-scale-blue-0));
  --catkin-blue-surface-inverse-strong: light-dark(var(--catkin-scale-blue-1), var(--catkin-scale-blue-12));
  --catkin-blue-surface-inverse-strong-hover: light-dark(var(--catkin-scale-blue-5), var(--catkin-scale-blue-9));
  --catkin-blue-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-blue-2), var(--catkin-scale-blue-11));
  --catkin-blue-surface-inverse-medium: light-dark(var(--catkin-scale-blue-6), var(--catkin-scale-blue-9));
  --catkin-blue-surface-inverse-medium-hover: light-dark(var(--catkin-scale-blue-2), var(--catkin-scale-blue-12));
  --catkin-blue-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-blue-5), var(--catkin-scale-blue-10));
  --catkin-blue-surface-inverse-weak: light-dark(var(--catkin-scale-blue-7), var(--catkin-scale-blue-8));
  --catkin-blue-surface-inverse-weak-hover: light-dark(var(--catkin-scale-blue-3), var(--catkin-scale-blue-12));
  --catkin-blue-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-blue-6), var(--catkin-scale-blue-9));
  --catkin-blue-surface-vibrant: light-dark(var(--catkin-scale-blue-9), var(--catkin-scale-blue-9));
  --catkin-blue-surface-vibrant-hover: light-dark(var(--catkin-scale-blue-12), var(--catkin-scale-blue-12));
  --catkin-blue-surface-vibrant-pressed: light-dark(var(--catkin-scale-blue-10), var(--catkin-scale-blue-10));
  --catkin-blue-on-surface-100: light-dark(var(--catkin-scale-blue-1), var(--catkin-scale-blue-12));
  --catkin-blue-on-surface-100-hover: light-dark(var(--catkin-scale-blue-5), var(--catkin-scale-blue-9));
  --catkin-blue-on-surface-100-pressed: light-dark(var(--catkin-scale-blue-2), var(--catkin-scale-blue-11));
  --catkin-blue-on-surface-90: light-dark(var(--catkin-scale-blue-4), var(--catkin-scale-blue-10));
  --catkin-blue-on-surface-90-hover: light-dark(var(--catkin-scale-blue-0), var(--catkin-scale-blue-14));
  --catkin-blue-on-surface-90-pressed: light-dark(var(--catkin-scale-blue-3), var(--catkin-scale-blue-11));
  --catkin-blue-on-surface-80: light-dark(var(--catkin-scale-blue-6), var(--catkin-scale-blue-9));
  --catkin-blue-on-surface-80-hover: light-dark(var(--catkin-scale-blue-3), var(--catkin-scale-blue-12));
  --catkin-blue-on-surface-80-pressed: light-dark(var(--catkin-scale-blue-5), var(--catkin-scale-blue-10));
  --catkin-blue-on-surface-70: light-dark(var(--catkin-scale-blue-7), var(--catkin-scale-blue-8));
  --catkin-blue-on-surface-70-hover: light-dark(var(--catkin-scale-blue-4), var(--catkin-scale-blue-10));
  --catkin-blue-on-surface-70-pressed: light-dark(var(--catkin-scale-blue-6), var(--catkin-scale-blue-9));
  --catkin-blue-on-surface-60: light-dark(var(--catkin-scale-blue-10), var(--catkin-scale-blue-6));
  --catkin-blue-on-surface-50: light-dark(var(--catkin-scale-blue-12), var(--catkin-scale-blue-3));
  --catkin-blue-on-inverse: light-dark(var(--catkin-scale-blue-14), var(--catkin-scale-blue-3));
  --catkin-blue-on-inverse-hover: light-dark(var(--catkin-scale-blue-11), var(--catkin-scale-blue-0));
  --catkin-blue-on-inverse-pressed: light-dark(var(--catkin-scale-blue-13), var(--catkin-scale-blue-2));
  --catkin-blue-on-vibrant: light-dark(var(--catkin-scale-blue-1), var(--catkin-scale-blue-1));
  --catkin-blue-on-vibrant-hover: light-dark(var(--catkin-scale-blue-4), var(--catkin-scale-blue-4));
  --catkin-blue-on-vibrant-pressed: light-dark(var(--catkin-scale-blue-2), var(--catkin-scale-blue-2));
  --catkin-blue-fill: light-dark(#2959B9, #7DABFF);
  --catkin-blue-fill-hover: light-dark(#1B4AA8, #97BCFF);
  --catkin-blue-fill-pressed: light-dark(#0F3E9B, #ABC9FF);
  --catkin-blue-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-green-surface-1: light-dark(var(--catkin-scale-green-14), var(--catkin-scale-green-1));
  --catkin-green-surface-1-hover: light-dark(var(--catkin-scale-green-13), var(--catkin-scale-green-3));
  --catkin-green-surface-1-pressed: light-dark(var(--catkin-scale-green-12), var(--catkin-scale-green-4));
  --catkin-green-surface-2: light-dark(var(--catkin-scale-green-13), var(--catkin-scale-green-2));
  --catkin-green-surface-2-hover: light-dark(var(--catkin-scale-green-12), var(--catkin-scale-green-4));
  --catkin-green-surface-2-pressed: light-dark(var(--catkin-scale-green-11), var(--catkin-scale-green-5));
  --catkin-green-surface-3: light-dark(var(--catkin-scale-green-12), var(--catkin-scale-green-3));
  --catkin-green-surface-3-hover: light-dark(var(--catkin-scale-green-11), var(--catkin-scale-green-1));
  --catkin-green-surface-3-pressed: light-dark(var(--catkin-scale-green-10), var(--catkin-scale-green-0));
  --catkin-green-surface-inverse-strong: light-dark(var(--catkin-scale-green-1), var(--catkin-scale-green-12));
  --catkin-green-surface-inverse-strong-hover: light-dark(var(--catkin-scale-green-5), var(--catkin-scale-green-9));
  --catkin-green-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-green-2), var(--catkin-scale-green-11));
  --catkin-green-surface-inverse-medium: light-dark(var(--catkin-scale-green-6), var(--catkin-scale-green-9));
  --catkin-green-surface-inverse-medium-hover: light-dark(var(--catkin-scale-green-2), var(--catkin-scale-green-12));
  --catkin-green-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-green-5), var(--catkin-scale-green-10));
  --catkin-green-surface-inverse-weak: light-dark(var(--catkin-scale-green-7), var(--catkin-scale-green-8));
  --catkin-green-surface-inverse-weak-hover: light-dark(var(--catkin-scale-green-3), var(--catkin-scale-green-12));
  --catkin-green-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-green-6), var(--catkin-scale-green-9));
  --catkin-green-surface-vibrant: light-dark(var(--catkin-scale-green-9), var(--catkin-scale-green-9));
  --catkin-green-surface-vibrant-hover: light-dark(var(--catkin-scale-green-12), var(--catkin-scale-green-12));
  --catkin-green-surface-vibrant-pressed: light-dark(var(--catkin-scale-green-10), var(--catkin-scale-green-10));
  --catkin-green-on-surface-100: light-dark(var(--catkin-scale-green-1), var(--catkin-scale-green-12));
  --catkin-green-on-surface-100-hover: light-dark(var(--catkin-scale-green-5), var(--catkin-scale-green-9));
  --catkin-green-on-surface-100-pressed: light-dark(var(--catkin-scale-green-2), var(--catkin-scale-green-11));
  --catkin-green-on-surface-90: light-dark(var(--catkin-scale-green-4), var(--catkin-scale-green-10));
  --catkin-green-on-surface-90-hover: light-dark(var(--catkin-scale-green-0), var(--catkin-scale-green-14));
  --catkin-green-on-surface-90-pressed: light-dark(var(--catkin-scale-green-3), var(--catkin-scale-green-11));
  --catkin-green-on-surface-80: light-dark(var(--catkin-scale-green-6), var(--catkin-scale-green-9));
  --catkin-green-on-surface-80-hover: light-dark(var(--catkin-scale-green-3), var(--catkin-scale-green-12));
  --catkin-green-on-surface-80-pressed: light-dark(var(--catkin-scale-green-5), var(--catkin-scale-green-10));
  --catkin-green-on-surface-70: light-dark(var(--catkin-scale-green-7), var(--catkin-scale-green-8));
  --catkin-green-on-surface-70-hover: light-dark(var(--catkin-scale-green-4), var(--catkin-scale-green-10));
  --catkin-green-on-surface-70-pressed: light-dark(var(--catkin-scale-green-6), var(--catkin-scale-green-9));
  --catkin-green-on-surface-60: light-dark(var(--catkin-scale-green-10), var(--catkin-scale-green-6));
  --catkin-green-on-surface-50: light-dark(var(--catkin-scale-green-12), var(--catkin-scale-green-3));
  --catkin-green-on-inverse: light-dark(var(--catkin-scale-green-14), var(--catkin-scale-green-3));
  --catkin-green-on-inverse-hover: light-dark(var(--catkin-scale-green-11), var(--catkin-scale-green-0));
  --catkin-green-on-inverse-pressed: light-dark(var(--catkin-scale-green-13), var(--catkin-scale-green-2));
  --catkin-green-on-vibrant: light-dark(var(--catkin-scale-green-1), var(--catkin-scale-green-1));
  --catkin-green-on-vibrant-hover: light-dark(var(--catkin-scale-green-4), var(--catkin-scale-green-4));
  --catkin-green-on-vibrant-pressed: light-dark(var(--catkin-scale-green-2), var(--catkin-scale-green-2));
  --catkin-green-fill: light-dark(#006E30, #6DBC7F);
  --catkin-green-fill-hover: light-dark(#005E28, #7DCC8E);
  --catkin-green-fill-pressed: light-dark(#005122, #89D99B);
  --catkin-green-on-fill: light-dark(#FFFFFF, #151A17);
  --catkin-light-green-surface-1: light-dark(var(--catkin-scale-light-green-14), var(--catkin-scale-light-green-1));
  --catkin-light-green-surface-1-hover: light-dark(var(--catkin-scale-light-green-13), var(--catkin-scale-light-green-3));
  --catkin-light-green-surface-1-pressed: light-dark(var(--catkin-scale-light-green-12), var(--catkin-scale-light-green-4));
  --catkin-light-green-surface-2: light-dark(var(--catkin-scale-light-green-13), var(--catkin-scale-light-green-2));
  --catkin-light-green-surface-2-hover: light-dark(var(--catkin-scale-light-green-12), var(--catkin-scale-light-green-4));
  --catkin-light-green-surface-2-pressed: light-dark(var(--catkin-scale-light-green-11), var(--catkin-scale-light-green-5));
  --catkin-light-green-surface-3: light-dark(var(--catkin-scale-light-green-12), var(--catkin-scale-light-green-3));
  --catkin-light-green-surface-3-hover: light-dark(var(--catkin-scale-light-green-11), var(--catkin-scale-light-green-1));
  --catkin-light-green-surface-3-pressed: light-dark(var(--catkin-scale-light-green-10), var(--catkin-scale-light-green-0));
  --catkin-light-green-surface-inverse-strong: light-dark(var(--catkin-scale-light-green-1), var(--catkin-scale-light-green-12));
  --catkin-light-green-surface-inverse-strong-hover: light-dark(var(--catkin-scale-light-green-5), var(--catkin-scale-light-green-9));
  --catkin-light-green-surface-inverse-strong-pressed: light-dark(var(--catkin-scale-light-green-2), var(--catkin-scale-light-green-11));
  --catkin-light-green-surface-inverse-medium: light-dark(var(--catkin-scale-light-green-6), var(--catkin-scale-light-green-9));
  --catkin-light-green-surface-inverse-medium-hover: light-dark(var(--catkin-scale-light-green-2), var(--catkin-scale-light-green-12));
  --catkin-light-green-surface-inverse-medium-pressed: light-dark(var(--catkin-scale-light-green-5), var(--catkin-scale-light-green-10));
  --catkin-light-green-surface-inverse-weak: light-dark(var(--catkin-scale-light-green-7), var(--catkin-scale-light-green-8));
  --catkin-light-green-surface-inverse-weak-hover: light-dark(var(--catkin-scale-light-green-3), var(--catkin-scale-light-green-12));
  --catkin-light-green-surface-inverse-weak-pressed: light-dark(var(--catkin-scale-light-green-6), var(--catkin-scale-light-green-9));
  --catkin-light-green-surface-vibrant: light-dark(var(--catkin-scale-light-green-9), var(--catkin-scale-light-green-9));
  --catkin-light-green-surface-vibrant-hover: light-dark(var(--catkin-scale-light-green-12), var(--catkin-scale-light-green-12));
  --catkin-light-green-surface-vibrant-pressed: light-dark(var(--catkin-scale-light-green-10), var(--catkin-scale-light-green-10));
  --catkin-light-green-on-surface-100: light-dark(var(--catkin-scale-light-green-1), var(--catkin-scale-light-green-12));
  --catkin-light-green-on-surface-100-hover: light-dark(var(--catkin-scale-light-green-5), var(--catkin-scale-light-green-9));
  --catkin-light-green-on-surface-100-pressed: light-dark(var(--catkin-scale-light-green-2), var(--catkin-scale-light-green-11));
  --catkin-light-green-on-surface-90: light-dark(var(--catkin-scale-light-green-4), var(--catkin-scale-light-green-10));
  --catkin-light-green-on-surface-90-hover: light-dark(var(--catkin-scale-light-green-0), var(--catkin-scale-light-green-14));
  --catkin-light-green-on-surface-90-pressed: light-dark(var(--catkin-scale-light-green-3), var(--catkin-scale-light-green-11));
  --catkin-light-green-on-surface-80: light-dark(var(--catkin-scale-light-green-6), var(--catkin-scale-light-green-9));
  --catkin-light-green-on-surface-80-hover: light-dark(var(--catkin-scale-light-green-3), var(--catkin-scale-light-green-12));
  --catkin-light-green-on-surface-80-pressed: light-dark(var(--catkin-scale-light-green-5), var(--catkin-scale-light-green-10));
  --catkin-light-green-on-surface-70: light-dark(var(--catkin-scale-light-green-7), var(--catkin-scale-light-green-8));
  --catkin-light-green-on-surface-70-hover: light-dark(var(--catkin-scale-light-green-4), var(--catkin-scale-light-green-10));
  --catkin-light-green-on-surface-70-pressed: light-dark(var(--catkin-scale-light-green-6), var(--catkin-scale-light-green-9));
  --catkin-light-green-on-surface-60: light-dark(var(--catkin-scale-light-green-10), var(--catkin-scale-light-green-6));
  --catkin-light-green-on-surface-50: light-dark(var(--catkin-scale-light-green-12), var(--catkin-scale-light-green-3));
  --catkin-light-green-on-inverse: light-dark(var(--catkin-scale-light-green-14), var(--catkin-scale-light-green-3));
  --catkin-light-green-on-inverse-hover: light-dark(var(--catkin-scale-light-green-11), var(--catkin-scale-light-green-0));
  --catkin-light-green-on-inverse-pressed: light-dark(var(--catkin-scale-light-green-13), var(--catkin-scale-light-green-2));
  --catkin-light-green-on-vibrant: light-dark(var(--catkin-scale-light-green-1), var(--catkin-scale-light-green-1));
  --catkin-light-green-on-vibrant-hover: light-dark(var(--catkin-scale-light-green-4), var(--catkin-scale-light-green-4));
  --catkin-light-green-on-vibrant-pressed: light-dark(var(--catkin-scale-light-green-2), var(--catkin-scale-light-green-2));
  --catkin-light-green-fill: light-dark(#476700, #8FB755);
  --catkin-light-green-fill-hover: light-dark(#3C5800, #9EC765);
  --catkin-light-green-fill-pressed: light-dark(#334C00, #ABD472);
  --catkin-light-green-on-fill: light-dark(#FFFFFF, #151A17);
}

/* ---- Farbkontext: Rollen ohne Familienname folgen data-color (Standard: neutral) ---- */
:root, [data-color="neutral"] {
  --catkin-surface-1: var(--catkin-neutral-surface-1);
  --catkin-surface-1-hover: var(--catkin-neutral-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-neutral-surface-1-pressed);
  --catkin-surface-2: var(--catkin-neutral-surface-2);
  --catkin-surface-2-hover: var(--catkin-neutral-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-neutral-surface-2-pressed);
  --catkin-surface-3: var(--catkin-neutral-surface-3);
  --catkin-surface-3-hover: var(--catkin-neutral-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-neutral-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-neutral-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-neutral-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-neutral-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-neutral-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-neutral-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-neutral-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-neutral-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-neutral-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-neutral-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-neutral-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-neutral-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-neutral-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-neutral-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-neutral-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-neutral-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-neutral-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-neutral-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-neutral-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-neutral-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-neutral-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-neutral-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-neutral-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-neutral-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-neutral-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-neutral-on-surface-60);
  --catkin-on-surface-50: var(--catkin-neutral-on-surface-50);
  --catkin-on-inverse: var(--catkin-neutral-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-neutral-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-neutral-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-neutral-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-neutral-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-neutral-on-vibrant-pressed);
  --catkin-fill: var(--catkin-neutral-fill);
  --catkin-fill-hover: var(--catkin-neutral-fill-hover);
  --catkin-fill-pressed: var(--catkin-neutral-fill-pressed);
  --catkin-on-fill: var(--catkin-neutral-on-fill);
}
[data-color="brand"] {
  --catkin-surface-1: var(--catkin-brand-surface-1);
  --catkin-surface-1-hover: var(--catkin-brand-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-brand-surface-1-pressed);
  --catkin-surface-2: var(--catkin-brand-surface-2);
  --catkin-surface-2-hover: var(--catkin-brand-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-brand-surface-2-pressed);
  --catkin-surface-3: var(--catkin-brand-surface-3);
  --catkin-surface-3-hover: var(--catkin-brand-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-brand-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-brand-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-brand-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-brand-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-brand-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-brand-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-brand-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-brand-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-brand-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-brand-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-brand-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-brand-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-brand-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-brand-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-brand-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-brand-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-brand-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-brand-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-brand-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-brand-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-brand-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-brand-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-brand-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-brand-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-brand-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-brand-on-surface-60);
  --catkin-on-surface-50: var(--catkin-brand-on-surface-50);
  --catkin-on-inverse: var(--catkin-brand-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-brand-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-brand-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-brand-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-brand-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-brand-on-vibrant-pressed);
  --catkin-fill: var(--catkin-brand-fill);
  --catkin-fill-hover: var(--catkin-brand-fill-hover);
  --catkin-fill-pressed: var(--catkin-brand-fill-pressed);
  --catkin-on-fill: var(--catkin-brand-on-fill);
}
[data-color="success"] {
  --catkin-surface-1: var(--catkin-success-surface-1);
  --catkin-surface-1-hover: var(--catkin-success-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-success-surface-1-pressed);
  --catkin-surface-2: var(--catkin-success-surface-2);
  --catkin-surface-2-hover: var(--catkin-success-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-success-surface-2-pressed);
  --catkin-surface-3: var(--catkin-success-surface-3);
  --catkin-surface-3-hover: var(--catkin-success-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-success-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-success-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-success-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-success-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-success-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-success-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-success-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-success-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-success-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-success-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-success-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-success-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-success-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-success-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-success-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-success-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-success-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-success-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-success-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-success-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-success-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-success-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-success-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-success-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-success-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-success-on-surface-60);
  --catkin-on-surface-50: var(--catkin-success-on-surface-50);
  --catkin-on-inverse: var(--catkin-success-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-success-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-success-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-success-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-success-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-success-on-vibrant-pressed);
  --catkin-fill: var(--catkin-success-fill);
  --catkin-fill-hover: var(--catkin-success-fill-hover);
  --catkin-fill-pressed: var(--catkin-success-fill-pressed);
  --catkin-on-fill: var(--catkin-success-on-fill);
}
[data-color="info"] {
  --catkin-surface-1: var(--catkin-info-surface-1);
  --catkin-surface-1-hover: var(--catkin-info-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-info-surface-1-pressed);
  --catkin-surface-2: var(--catkin-info-surface-2);
  --catkin-surface-2-hover: var(--catkin-info-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-info-surface-2-pressed);
  --catkin-surface-3: var(--catkin-info-surface-3);
  --catkin-surface-3-hover: var(--catkin-info-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-info-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-info-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-info-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-info-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-info-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-info-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-info-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-info-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-info-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-info-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-info-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-info-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-info-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-info-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-info-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-info-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-info-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-info-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-info-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-info-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-info-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-info-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-info-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-info-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-info-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-info-on-surface-60);
  --catkin-on-surface-50: var(--catkin-info-on-surface-50);
  --catkin-on-inverse: var(--catkin-info-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-info-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-info-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-info-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-info-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-info-on-vibrant-pressed);
  --catkin-fill: var(--catkin-info-fill);
  --catkin-fill-hover: var(--catkin-info-fill-hover);
  --catkin-fill-pressed: var(--catkin-info-fill-pressed);
  --catkin-on-fill: var(--catkin-info-on-fill);
}
[data-color="warning"] {
  --catkin-surface-1: var(--catkin-warning-surface-1);
  --catkin-surface-1-hover: var(--catkin-warning-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-warning-surface-1-pressed);
  --catkin-surface-2: var(--catkin-warning-surface-2);
  --catkin-surface-2-hover: var(--catkin-warning-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-warning-surface-2-pressed);
  --catkin-surface-3: var(--catkin-warning-surface-3);
  --catkin-surface-3-hover: var(--catkin-warning-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-warning-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-warning-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-warning-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-warning-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-warning-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-warning-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-warning-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-warning-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-warning-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-warning-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-warning-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-warning-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-warning-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-warning-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-warning-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-warning-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-warning-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-warning-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-warning-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-warning-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-warning-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-warning-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-warning-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-warning-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-warning-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-warning-on-surface-60);
  --catkin-on-surface-50: var(--catkin-warning-on-surface-50);
  --catkin-on-inverse: var(--catkin-warning-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-warning-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-warning-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-warning-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-warning-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-warning-on-vibrant-pressed);
  --catkin-fill: var(--catkin-warning-fill);
  --catkin-fill-hover: var(--catkin-warning-fill-hover);
  --catkin-fill-pressed: var(--catkin-warning-fill-pressed);
  --catkin-on-fill: var(--catkin-warning-on-fill);
}
[data-color="critical"] {
  --catkin-surface-1: var(--catkin-critical-surface-1);
  --catkin-surface-1-hover: var(--catkin-critical-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-critical-surface-1-pressed);
  --catkin-surface-2: var(--catkin-critical-surface-2);
  --catkin-surface-2-hover: var(--catkin-critical-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-critical-surface-2-pressed);
  --catkin-surface-3: var(--catkin-critical-surface-3);
  --catkin-surface-3-hover: var(--catkin-critical-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-critical-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-critical-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-critical-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-critical-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-critical-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-critical-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-critical-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-critical-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-critical-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-critical-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-critical-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-critical-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-critical-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-critical-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-critical-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-critical-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-critical-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-critical-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-critical-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-critical-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-critical-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-critical-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-critical-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-critical-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-critical-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-critical-on-surface-60);
  --catkin-on-surface-50: var(--catkin-critical-on-surface-50);
  --catkin-on-inverse: var(--catkin-critical-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-critical-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-critical-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-critical-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-critical-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-critical-on-vibrant-pressed);
  --catkin-fill: var(--catkin-critical-fill);
  --catkin-fill-hover: var(--catkin-critical-fill-hover);
  --catkin-fill-pressed: var(--catkin-critical-fill-pressed);
  --catkin-on-fill: var(--catkin-critical-on-fill);
}
[data-color="violet"] {
  --catkin-surface-1: var(--catkin-violet-surface-1);
  --catkin-surface-1-hover: var(--catkin-violet-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-violet-surface-1-pressed);
  --catkin-surface-2: var(--catkin-violet-surface-2);
  --catkin-surface-2-hover: var(--catkin-violet-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-violet-surface-2-pressed);
  --catkin-surface-3: var(--catkin-violet-surface-3);
  --catkin-surface-3-hover: var(--catkin-violet-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-violet-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-violet-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-violet-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-violet-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-violet-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-violet-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-violet-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-violet-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-violet-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-violet-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-violet-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-violet-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-violet-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-violet-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-violet-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-violet-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-violet-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-violet-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-violet-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-violet-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-violet-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-violet-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-violet-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-violet-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-violet-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-violet-on-surface-60);
  --catkin-on-surface-50: var(--catkin-violet-on-surface-50);
  --catkin-on-inverse: var(--catkin-violet-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-violet-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-violet-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-violet-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-violet-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-violet-on-vibrant-pressed);
  --catkin-fill: var(--catkin-violet-fill);
  --catkin-fill-hover: var(--catkin-violet-fill-hover);
  --catkin-fill-pressed: var(--catkin-violet-fill-pressed);
  --catkin-on-fill: var(--catkin-violet-on-fill);
}
[data-color="orange"] {
  --catkin-surface-1: var(--catkin-orange-surface-1);
  --catkin-surface-1-hover: var(--catkin-orange-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-orange-surface-1-pressed);
  --catkin-surface-2: var(--catkin-orange-surface-2);
  --catkin-surface-2-hover: var(--catkin-orange-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-orange-surface-2-pressed);
  --catkin-surface-3: var(--catkin-orange-surface-3);
  --catkin-surface-3-hover: var(--catkin-orange-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-orange-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-orange-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-orange-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-orange-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-orange-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-orange-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-orange-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-orange-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-orange-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-orange-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-orange-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-orange-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-orange-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-orange-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-orange-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-orange-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-orange-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-orange-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-orange-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-orange-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-orange-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-orange-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-orange-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-orange-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-orange-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-orange-on-surface-60);
  --catkin-on-surface-50: var(--catkin-orange-on-surface-50);
  --catkin-on-inverse: var(--catkin-orange-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-orange-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-orange-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-orange-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-orange-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-orange-on-vibrant-pressed);
  --catkin-fill: var(--catkin-orange-fill);
  --catkin-fill-hover: var(--catkin-orange-fill-hover);
  --catkin-fill-pressed: var(--catkin-orange-fill-pressed);
  --catkin-on-fill: var(--catkin-orange-on-fill);
}
[data-color="yellow"] {
  --catkin-surface-1: var(--catkin-yellow-surface-1);
  --catkin-surface-1-hover: var(--catkin-yellow-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-yellow-surface-1-pressed);
  --catkin-surface-2: var(--catkin-yellow-surface-2);
  --catkin-surface-2-hover: var(--catkin-yellow-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-yellow-surface-2-pressed);
  --catkin-surface-3: var(--catkin-yellow-surface-3);
  --catkin-surface-3-hover: var(--catkin-yellow-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-yellow-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-yellow-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-yellow-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-yellow-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-yellow-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-yellow-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-yellow-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-yellow-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-yellow-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-yellow-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-yellow-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-yellow-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-yellow-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-yellow-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-yellow-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-yellow-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-yellow-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-yellow-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-yellow-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-yellow-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-yellow-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-yellow-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-yellow-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-yellow-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-yellow-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-yellow-on-surface-60);
  --catkin-on-surface-50: var(--catkin-yellow-on-surface-50);
  --catkin-on-inverse: var(--catkin-yellow-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-yellow-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-yellow-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-yellow-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-yellow-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-yellow-on-vibrant-pressed);
  --catkin-fill: var(--catkin-yellow-fill);
  --catkin-fill-hover: var(--catkin-yellow-fill-hover);
  --catkin-fill-pressed: var(--catkin-yellow-fill-pressed);
  --catkin-on-fill: var(--catkin-yellow-on-fill);
}
[data-color="pink"] {
  --catkin-surface-1: var(--catkin-pink-surface-1);
  --catkin-surface-1-hover: var(--catkin-pink-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-pink-surface-1-pressed);
  --catkin-surface-2: var(--catkin-pink-surface-2);
  --catkin-surface-2-hover: var(--catkin-pink-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-pink-surface-2-pressed);
  --catkin-surface-3: var(--catkin-pink-surface-3);
  --catkin-surface-3-hover: var(--catkin-pink-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-pink-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-pink-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-pink-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-pink-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-pink-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-pink-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-pink-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-pink-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-pink-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-pink-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-pink-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-pink-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-pink-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-pink-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-pink-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-pink-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-pink-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-pink-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-pink-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-pink-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-pink-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-pink-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-pink-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-pink-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-pink-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-pink-on-surface-60);
  --catkin-on-surface-50: var(--catkin-pink-on-surface-50);
  --catkin-on-inverse: var(--catkin-pink-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-pink-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-pink-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-pink-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-pink-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-pink-on-vibrant-pressed);
  --catkin-fill: var(--catkin-pink-fill);
  --catkin-fill-hover: var(--catkin-pink-fill-hover);
  --catkin-fill-pressed: var(--catkin-pink-fill-pressed);
  --catkin-on-fill: var(--catkin-pink-on-fill);
}
[data-color="cyan"] {
  --catkin-surface-1: var(--catkin-cyan-surface-1);
  --catkin-surface-1-hover: var(--catkin-cyan-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-cyan-surface-1-pressed);
  --catkin-surface-2: var(--catkin-cyan-surface-2);
  --catkin-surface-2-hover: var(--catkin-cyan-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-cyan-surface-2-pressed);
  --catkin-surface-3: var(--catkin-cyan-surface-3);
  --catkin-surface-3-hover: var(--catkin-cyan-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-cyan-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-cyan-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-cyan-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-cyan-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-cyan-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-cyan-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-cyan-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-cyan-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-cyan-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-cyan-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-cyan-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-cyan-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-cyan-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-cyan-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-cyan-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-cyan-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-cyan-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-cyan-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-cyan-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-cyan-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-cyan-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-cyan-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-cyan-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-cyan-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-cyan-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-cyan-on-surface-60);
  --catkin-on-surface-50: var(--catkin-cyan-on-surface-50);
  --catkin-on-inverse: var(--catkin-cyan-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-cyan-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-cyan-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-cyan-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-cyan-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-cyan-on-vibrant-pressed);
  --catkin-fill: var(--catkin-cyan-fill);
  --catkin-fill-hover: var(--catkin-cyan-fill-hover);
  --catkin-fill-pressed: var(--catkin-cyan-fill-pressed);
  --catkin-on-fill: var(--catkin-cyan-on-fill);
}
[data-color="turquoise"] {
  --catkin-surface-1: var(--catkin-turquoise-surface-1);
  --catkin-surface-1-hover: var(--catkin-turquoise-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-turquoise-surface-1-pressed);
  --catkin-surface-2: var(--catkin-turquoise-surface-2);
  --catkin-surface-2-hover: var(--catkin-turquoise-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-turquoise-surface-2-pressed);
  --catkin-surface-3: var(--catkin-turquoise-surface-3);
  --catkin-surface-3-hover: var(--catkin-turquoise-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-turquoise-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-turquoise-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-turquoise-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-turquoise-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-turquoise-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-turquoise-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-turquoise-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-turquoise-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-turquoise-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-turquoise-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-turquoise-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-turquoise-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-turquoise-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-turquoise-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-turquoise-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-turquoise-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-turquoise-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-turquoise-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-turquoise-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-turquoise-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-turquoise-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-turquoise-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-turquoise-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-turquoise-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-turquoise-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-turquoise-on-surface-60);
  --catkin-on-surface-50: var(--catkin-turquoise-on-surface-50);
  --catkin-on-inverse: var(--catkin-turquoise-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-turquoise-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-turquoise-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-turquoise-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-turquoise-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-turquoise-on-vibrant-pressed);
  --catkin-fill: var(--catkin-turquoise-fill);
  --catkin-fill-hover: var(--catkin-turquoise-fill-hover);
  --catkin-fill-pressed: var(--catkin-turquoise-fill-pressed);
  --catkin-on-fill: var(--catkin-turquoise-on-fill);
}
[data-color="burgundy"] {
  --catkin-surface-1: var(--catkin-burgundy-surface-1);
  --catkin-surface-1-hover: var(--catkin-burgundy-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-burgundy-surface-1-pressed);
  --catkin-surface-2: var(--catkin-burgundy-surface-2);
  --catkin-surface-2-hover: var(--catkin-burgundy-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-burgundy-surface-2-pressed);
  --catkin-surface-3: var(--catkin-burgundy-surface-3);
  --catkin-surface-3-hover: var(--catkin-burgundy-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-burgundy-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-burgundy-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-burgundy-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-burgundy-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-burgundy-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-burgundy-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-burgundy-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-burgundy-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-burgundy-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-burgundy-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-burgundy-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-burgundy-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-burgundy-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-burgundy-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-burgundy-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-burgundy-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-burgundy-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-burgundy-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-burgundy-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-burgundy-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-burgundy-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-burgundy-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-burgundy-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-burgundy-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-burgundy-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-burgundy-on-surface-60);
  --catkin-on-surface-50: var(--catkin-burgundy-on-surface-50);
  --catkin-on-inverse: var(--catkin-burgundy-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-burgundy-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-burgundy-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-burgundy-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-burgundy-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-burgundy-on-vibrant-pressed);
  --catkin-fill: var(--catkin-burgundy-fill);
  --catkin-fill-hover: var(--catkin-burgundy-fill-hover);
  --catkin-fill-pressed: var(--catkin-burgundy-fill-pressed);
  --catkin-on-fill: var(--catkin-burgundy-on-fill);
}
[data-color="red"] {
  --catkin-surface-1: var(--catkin-red-surface-1);
  --catkin-surface-1-hover: var(--catkin-red-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-red-surface-1-pressed);
  --catkin-surface-2: var(--catkin-red-surface-2);
  --catkin-surface-2-hover: var(--catkin-red-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-red-surface-2-pressed);
  --catkin-surface-3: var(--catkin-red-surface-3);
  --catkin-surface-3-hover: var(--catkin-red-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-red-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-red-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-red-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-red-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-red-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-red-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-red-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-red-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-red-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-red-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-red-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-red-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-red-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-red-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-red-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-red-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-red-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-red-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-red-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-red-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-red-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-red-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-red-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-red-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-red-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-red-on-surface-60);
  --catkin-on-surface-50: var(--catkin-red-on-surface-50);
  --catkin-on-inverse: var(--catkin-red-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-red-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-red-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-red-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-red-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-red-on-vibrant-pressed);
  --catkin-fill: var(--catkin-red-fill);
  --catkin-fill-hover: var(--catkin-red-fill-hover);
  --catkin-fill-pressed: var(--catkin-red-fill-pressed);
  --catkin-on-fill: var(--catkin-red-on-fill);
}
[data-color="blue"] {
  --catkin-surface-1: var(--catkin-blue-surface-1);
  --catkin-surface-1-hover: var(--catkin-blue-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-blue-surface-1-pressed);
  --catkin-surface-2: var(--catkin-blue-surface-2);
  --catkin-surface-2-hover: var(--catkin-blue-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-blue-surface-2-pressed);
  --catkin-surface-3: var(--catkin-blue-surface-3);
  --catkin-surface-3-hover: var(--catkin-blue-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-blue-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-blue-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-blue-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-blue-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-blue-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-blue-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-blue-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-blue-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-blue-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-blue-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-blue-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-blue-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-blue-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-blue-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-blue-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-blue-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-blue-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-blue-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-blue-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-blue-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-blue-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-blue-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-blue-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-blue-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-blue-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-blue-on-surface-60);
  --catkin-on-surface-50: var(--catkin-blue-on-surface-50);
  --catkin-on-inverse: var(--catkin-blue-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-blue-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-blue-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-blue-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-blue-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-blue-on-vibrant-pressed);
  --catkin-fill: var(--catkin-blue-fill);
  --catkin-fill-hover: var(--catkin-blue-fill-hover);
  --catkin-fill-pressed: var(--catkin-blue-fill-pressed);
  --catkin-on-fill: var(--catkin-blue-on-fill);
}
[data-color="green"] {
  --catkin-surface-1: var(--catkin-green-surface-1);
  --catkin-surface-1-hover: var(--catkin-green-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-green-surface-1-pressed);
  --catkin-surface-2: var(--catkin-green-surface-2);
  --catkin-surface-2-hover: var(--catkin-green-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-green-surface-2-pressed);
  --catkin-surface-3: var(--catkin-green-surface-3);
  --catkin-surface-3-hover: var(--catkin-green-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-green-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-green-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-green-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-green-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-green-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-green-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-green-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-green-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-green-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-green-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-green-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-green-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-green-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-green-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-green-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-green-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-green-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-green-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-green-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-green-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-green-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-green-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-green-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-green-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-green-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-green-on-surface-60);
  --catkin-on-surface-50: var(--catkin-green-on-surface-50);
  --catkin-on-inverse: var(--catkin-green-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-green-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-green-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-green-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-green-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-green-on-vibrant-pressed);
  --catkin-fill: var(--catkin-green-fill);
  --catkin-fill-hover: var(--catkin-green-fill-hover);
  --catkin-fill-pressed: var(--catkin-green-fill-pressed);
  --catkin-on-fill: var(--catkin-green-on-fill);
}
[data-color="light-green"] {
  --catkin-surface-1: var(--catkin-light-green-surface-1);
  --catkin-surface-1-hover: var(--catkin-light-green-surface-1-hover);
  --catkin-surface-1-pressed: var(--catkin-light-green-surface-1-pressed);
  --catkin-surface-2: var(--catkin-light-green-surface-2);
  --catkin-surface-2-hover: var(--catkin-light-green-surface-2-hover);
  --catkin-surface-2-pressed: var(--catkin-light-green-surface-2-pressed);
  --catkin-surface-3: var(--catkin-light-green-surface-3);
  --catkin-surface-3-hover: var(--catkin-light-green-surface-3-hover);
  --catkin-surface-3-pressed: var(--catkin-light-green-surface-3-pressed);
  --catkin-surface-inverse-strong: var(--catkin-light-green-surface-inverse-strong);
  --catkin-surface-inverse-strong-hover: var(--catkin-light-green-surface-inverse-strong-hover);
  --catkin-surface-inverse-strong-pressed: var(--catkin-light-green-surface-inverse-strong-pressed);
  --catkin-surface-inverse-medium: var(--catkin-light-green-surface-inverse-medium);
  --catkin-surface-inverse-medium-hover: var(--catkin-light-green-surface-inverse-medium-hover);
  --catkin-surface-inverse-medium-pressed: var(--catkin-light-green-surface-inverse-medium-pressed);
  --catkin-surface-inverse-weak: var(--catkin-light-green-surface-inverse-weak);
  --catkin-surface-inverse-weak-hover: var(--catkin-light-green-surface-inverse-weak-hover);
  --catkin-surface-inverse-weak-pressed: var(--catkin-light-green-surface-inverse-weak-pressed);
  --catkin-surface-vibrant: var(--catkin-light-green-surface-vibrant);
  --catkin-surface-vibrant-hover: var(--catkin-light-green-surface-vibrant-hover);
  --catkin-surface-vibrant-pressed: var(--catkin-light-green-surface-vibrant-pressed);
  --catkin-on-surface-100: var(--catkin-light-green-on-surface-100);
  --catkin-on-surface-100-hover: var(--catkin-light-green-on-surface-100-hover);
  --catkin-on-surface-100-pressed: var(--catkin-light-green-on-surface-100-pressed);
  --catkin-on-surface-90: var(--catkin-light-green-on-surface-90);
  --catkin-on-surface-90-hover: var(--catkin-light-green-on-surface-90-hover);
  --catkin-on-surface-90-pressed: var(--catkin-light-green-on-surface-90-pressed);
  --catkin-on-surface-80: var(--catkin-light-green-on-surface-80);
  --catkin-on-surface-80-hover: var(--catkin-light-green-on-surface-80-hover);
  --catkin-on-surface-80-pressed: var(--catkin-light-green-on-surface-80-pressed);
  --catkin-on-surface-70: var(--catkin-light-green-on-surface-70);
  --catkin-on-surface-70-hover: var(--catkin-light-green-on-surface-70-hover);
  --catkin-on-surface-70-pressed: var(--catkin-light-green-on-surface-70-pressed);
  --catkin-on-surface-60: var(--catkin-light-green-on-surface-60);
  --catkin-on-surface-50: var(--catkin-light-green-on-surface-50);
  --catkin-on-inverse: var(--catkin-light-green-on-inverse);
  --catkin-on-inverse-hover: var(--catkin-light-green-on-inverse-hover);
  --catkin-on-inverse-pressed: var(--catkin-light-green-on-inverse-pressed);
  --catkin-on-vibrant: var(--catkin-light-green-on-vibrant);
  --catkin-on-vibrant-hover: var(--catkin-light-green-on-vibrant-hover);
  --catkin-on-vibrant-pressed: var(--catkin-light-green-on-vibrant-pressed);
  --catkin-fill: var(--catkin-light-green-fill);
  --catkin-fill-hover: var(--catkin-light-green-fill-hover);
  --catkin-fill-pressed: var(--catkin-light-green-fill-pressed);
  --catkin-on-fill: var(--catkin-light-green-on-fill);
}

/* ---- Maße ohne Dichte ---- */
:root {
  --catkin-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --catkin-font-title: "Sora", "Inter", system-ui, sans-serif;
  /* Schriftgewicht (CI8, CI24; ergänzt 15.10.2026, Anlass catkin-Portal #3043): Abweichungen vom Gewicht des Schrift-Tokens nur hiermit */
  --catkin-font-weight-regular: 400;
  --catkin-font-weight-medium: 500;
  --catkin-font-weight-semibold: 600;
  --catkin-font-weight-bold: 700;
  --catkin-border-width-3xs: 0.0625rem;
  --catkin-border-width-2xs: 0.125rem;
  --catkin-border-width-xs: 0.25rem;
  --catkin-border-width-sm: 0.375rem;
  --catkin-border-width-md: 0.5rem;
  --catkin-border-width-lg: 0.625rem;
  --catkin-border-width-xl: 0.75rem;
  --catkin-border-width-2xl: 0.875rem;
  --catkin-border-width-3xl: 1rem;
  --catkin-radius-3xs: 0.0625rem;
  --catkin-radius-2xs: 0.125rem;
  --catkin-radius-xs: 0.25rem;
  --catkin-radius-sm: 0.375rem;
  --catkin-radius-md: 0.625rem;
  --catkin-radius-lg: 1rem;
  --catkin-radius-xl: 1.5rem;
  --catkin-radius-2xl: 1.75rem;
  --catkin-radius-3xl: 2rem;
  --catkin-radius-full: 999rem;
  --catkin-opacity-3xs: 0.08;
  --catkin-opacity-2xs: 0.16;
  --catkin-opacity-xs: 0.24;
  --catkin-opacity-sm: 0.32;
  --catkin-opacity-md: 0.4;
  --catkin-opacity-lg: 0.68;
  --catkin-opacity-xl: 0.76;
  --catkin-opacity-2xl: 0.84;
  --catkin-opacity-3xl: 0.92;
  --catkin-duration-xfast: 75ms;
  --catkin-duration-fast: 0.15s;
  --catkin-duration-medium: 0.3s;
  --catkin-duration-slow: 0.4s;
  --catkin-duration-xslow: 0.5s;
  --catkin-easing-show: cubic-bezier(.49,.1,.16,1);
  --catkin-easing-hide: cubic-bezier(.49,.1,.16,1);
  --catkin-easing-expressive: cubic-bezier(.27,.05,.4,.95);
  --catkin-easing-functional: cubic-bezier(.15,0,.45,1);
  --catkin-container-3xs: 14rem;
  --catkin-container-2xs: 16rem;
  --catkin-container-xs: 20rem;
  --catkin-container-sm: 24rem;
  --catkin-container-md: 28rem;
  --catkin-container-lg: 32rem;
  --catkin-container-xl: 36rem;
  --catkin-container-2xl: 42rem;
  --catkin-container-3xl: 48rem;
  --catkin-screen-xs: 20em;
  --catkin-screen-sm: 48em;
  --catkin-screen-md: 64em;
  --catkin-screen-lg: 90em;
  --catkin-screen-xl: 120em;
  /* Ebenen flach (CI5): Hervorhebung als 1-px-Rahmen, keine Schatten */
  --catkin-elevation-sm: 0 0 0 1px var(--catkin-on-surface-60);
  --catkin-elevation-md: 0 0 0 1px var(--catkin-on-surface-60);
  --catkin-elevation-lg: 0 0 0 1px var(--catkin-on-surface-60);
  --catkin-size-header-mobile: 3.5rem;
  /* Mindestgröße jeder Klickfläche (WCAG 2.2, Zielgröße 24 × 24 px; K1, CI23) */
  --catkin-target-min: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --catkin-duration-xfast: 0s;
    --catkin-duration-fast: 0s;
    --catkin-duration-medium: 0s;
    --catkin-duration-slow: 0s;
    --catkin-duration-xslow: 0s;
  }
}

/* ---- Dichte und Gerät: Abstände, Größen, Schrift ---- */
:root, [data-density="regular"] {
  --catkin-space-3xs: 0.125rem;
  --catkin-space-2xs: 0.25rem;
  --catkin-space-xs: 0.5rem;
  --catkin-space-sm: 0.75rem;
  --catkin-space-md: 1rem;
  --catkin-space-lg: 1.5rem;
  --catkin-space-xl: 2rem;
  --catkin-space-2xl: 3rem;
  --catkin-space-3xl: 5rem;
  --catkin-size-3xs: 0.5rem;
  --catkin-size-2xs: 0.75rem;
  --catkin-size-xs: 1rem;
  --catkin-size-sm: 1.5rem;
  --catkin-size-md: 2.5rem;
  --catkin-size-lg: 4rem;
  --catkin-size-xl: 6rem;
  --catkin-size-2xl: 10rem;
  --catkin-size-3xl: 15rem;
  --catkin-control-height: 2.5rem;
  --catkin-control-height-row: 1.5rem;
  --catkin-space-fluid-3xs: 1.25rem;
  --catkin-space-fluid-2xs: 1.5rem;
  --catkin-space-fluid-xs: 2rem;
  --catkin-space-fluid-sm: 3rem;
  --catkin-space-fluid-md: 5rem;
  --catkin-space-fluid-lg: 7.5rem;
  --catkin-space-fluid-xl: 15rem;
  --catkin-space-fluid-2xl: 30rem;
  --catkin-space-fluid-3xl: 40rem;
  --catkin-type-title-3xs: 600 1rem/1.25 var(--catkin-font-title);
  --catkin-type-title-2xs: 600 1.25rem/1.2 var(--catkin-font-title);
  --catkin-type-title-xs: 600 1.5rem/1.1667 var(--catkin-font-title);
  --catkin-type-title-sm: 600 1.75rem/1.1429 var(--catkin-font-title);
  --catkin-type-title-md: 600 2rem/1.25 var(--catkin-font-title);
  --catkin-type-title-lg: 600 2.5rem/1.2 var(--catkin-font-title);
  --catkin-type-title-xl: 600 3rem/1.3333 var(--catkin-font-title);
  --catkin-type-title-2xl: 600 4rem/1.25 var(--catkin-font-title);
  --catkin-type-title-3xl: 600 5rem/1.2 var(--catkin-font-title);
  --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-sm: 400 0.875rem/1.4286 var(--catkin-font-text);
  --catkin-type-body-md: 400 1rem/1.5 var(--catkin-font-text);
  --catkin-type-body-lg: 400 1.25rem/1.4 var(--catkin-font-text);
  --catkin-type-body-xl: 400 1.5rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-2xl: 400 1.75rem/1.4286 var(--catkin-font-text);
  --catkin-type-body-3xl: 400 2rem/1.5 var(--catkin-font-text);
  --catkin-icon-title-3xs: 1.25rem;
  --catkin-icon-title-2xs: 1.5rem;
  --catkin-icon-title-xs: 1.75rem;
  --catkin-icon-title-sm: 2rem;
  --catkin-icon-title-md: 2.5rem;
  --catkin-icon-title-lg: 3rem;
  --catkin-icon-title-xl: 4rem;
  --catkin-icon-title-2xl: 5rem;
  --catkin-icon-title-3xl: 6rem;
  --catkin-icon-body-3xs: 0.875rem;
  --catkin-icon-body-2xs: 0.875rem;
  --catkin-icon-body-xs: 1rem;
  --catkin-icon-body-sm: 1.25rem;
  --catkin-icon-body-md: 1.5rem;
  --catkin-icon-body-lg: 1.75rem;
  --catkin-icon-body-xl: 2rem;
  --catkin-icon-body-2xl: 2.5rem;
  --catkin-icon-body-3xl: 3rem;
}
[data-density="compact"] {
  --catkin-space-3xs: 0.125rem;
  --catkin-space-2xs: 0.25rem;
  --catkin-space-xs: 0.375rem;
  --catkin-space-sm: 0.5rem;
  --catkin-space-md: 0.75rem;
  --catkin-space-lg: 1rem;
  --catkin-space-xl: 1.5rem;
  --catkin-space-2xl: 2rem;
  --catkin-space-3xl: 3rem;
  --catkin-size-3xs: 0.375rem;
  --catkin-size-2xs: 0.625rem;
  --catkin-size-xs: 0.875rem;
  --catkin-size-sm: 1.25rem;
  --catkin-size-md: 2rem;
  --catkin-size-lg: 3rem;
  --catkin-size-xl: 5rem;
  --catkin-size-2xl: 7.5rem;
  --catkin-size-3xl: 10rem;
  --catkin-control-height: 2rem;
  --catkin-control-height-row: 1.25rem;
  --catkin-space-fluid-3xs: 1rem;
  --catkin-space-fluid-2xs: 1.25rem;
  --catkin-space-fluid-xs: 1.75rem;
  --catkin-space-fluid-sm: 2.5rem;
  --catkin-space-fluid-md: 4rem;
  --catkin-space-fluid-lg: 6rem;
  --catkin-space-fluid-xl: 10rem;
  --catkin-space-fluid-2xl: 15rem;
  --catkin-space-fluid-3xl: 30rem;
  --catkin-type-title-3xs: 600 0.875rem/1.1429 var(--catkin-font-title);
  --catkin-type-title-2xs: 600 0.875rem/1.1429 var(--catkin-font-title);
  --catkin-type-title-xs: 600 1rem/1.25 var(--catkin-font-title);
  --catkin-type-title-sm: 600 1.25rem/1.2 var(--catkin-font-title);
  --catkin-type-title-md: 600 1.5rem/1.1667 var(--catkin-font-title);
  --catkin-type-title-lg: 600 1.75rem/1.1429 var(--catkin-font-title);
  --catkin-type-title-xl: 600 2rem/1.25 var(--catkin-font-title);
  --catkin-type-title-2xl: 600 2.5rem/1.2 var(--catkin-font-title);
  --catkin-type-title-3xl: 600 2.5rem/1.2 var(--catkin-font-title);
  --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-sm: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-md: 400 0.875rem/1.4286 var(--catkin-font-text);
  --catkin-type-body-lg: 400 1rem/1.5 var(--catkin-font-text);
  --catkin-type-body-xl: 400 1.25rem/1.4 var(--catkin-font-text);
  --catkin-type-body-2xl: 400 1.5rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-3xl: 400 1.75rem/1.4286 var(--catkin-font-text);
  --catkin-icon-title-3xs: 1rem;
  --catkin-icon-title-2xs: 1rem;
  --catkin-icon-title-xs: 1.25rem;
  --catkin-icon-title-sm: 1.5rem;
  --catkin-icon-title-md: 1.75rem;
  --catkin-icon-title-lg: 2rem;
  --catkin-icon-title-xl: 2.5rem;
  --catkin-icon-title-2xl: 3rem;
  --catkin-icon-title-3xl: 3rem;
  --catkin-icon-body-3xs: 0.875rem;
  --catkin-icon-body-2xs: 0.875rem;
  --catkin-icon-body-xs: 0.875rem;
  --catkin-icon-body-sm: 1rem;
  --catkin-icon-body-md: 1.25rem;
  --catkin-icon-body-lg: 1.5rem;
  --catkin-icon-body-xl: 1.75rem;
  --catkin-icon-body-2xl: 2rem;
  --catkin-icon-body-3xl: 2.5rem;
}
[data-density="comfortable"] {
  --catkin-space-3xs: 0.25rem;
  --catkin-space-2xs: 0.5rem;
  --catkin-space-xs: 0.75rem;
  --catkin-space-sm: 1rem;
  --catkin-space-md: 1.5rem;
  --catkin-space-lg: 2rem;
  --catkin-space-xl: 3rem;
  --catkin-space-2xl: 5rem;
  --catkin-space-3xl: 7.5rem;
  --catkin-size-3xs: 0.625rem;
  --catkin-size-2xs: 0.875rem;
  --catkin-size-xs: 1.25rem;
  --catkin-size-sm: 1.75rem;
  --catkin-size-md: 3rem;
  --catkin-size-lg: 5rem;
  --catkin-size-xl: 7.5rem;
  --catkin-size-2xl: 15rem;
  --catkin-size-3xl: 30rem;
  --catkin-control-height: 3rem;
  --catkin-control-height-row: 1.75rem;
  --catkin-space-fluid-3xs: 1.75rem;
  --catkin-space-fluid-2xs: 2rem;
  --catkin-space-fluid-xs: 3rem;
  --catkin-space-fluid-sm: 5rem;
  --catkin-space-fluid-md: 7.5rem;
  --catkin-space-fluid-lg: 15rem;
  --catkin-space-fluid-xl: 30rem;
  --catkin-space-fluid-2xl: 40rem;
  --catkin-space-fluid-3xl: 50rem;
  --catkin-type-title-3xs: 600 1.25rem/1.2 var(--catkin-font-title);
  --catkin-type-title-2xs: 600 1.5rem/1.1667 var(--catkin-font-title);
  --catkin-type-title-xs: 600 1.75rem/1.1429 var(--catkin-font-title);
  --catkin-type-title-sm: 600 2rem/1.25 var(--catkin-font-title);
  --catkin-type-title-md: 600 2.5rem/1.2 var(--catkin-font-title);
  --catkin-type-title-lg: 600 3rem/1.3333 var(--catkin-font-title);
  --catkin-type-title-xl: 600 4rem/1.25 var(--catkin-font-title);
  --catkin-type-title-2xl: 600 5rem/1.2 var(--catkin-font-title);
  --catkin-type-title-3xl: 600 6rem/1.25 var(--catkin-font-title);
  --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-xs: 400 0.875rem/1.4286 var(--catkin-font-text);
  --catkin-type-body-sm: 400 1rem/1.5 var(--catkin-font-text);
  --catkin-type-body-md: 400 1.25rem/1.4 var(--catkin-font-text);
  --catkin-type-body-lg: 400 1.5rem/1.3333 var(--catkin-font-text);
  --catkin-type-body-xl: 400 1.75rem/1.4286 var(--catkin-font-text);
  --catkin-type-body-2xl: 400 2rem/1.5 var(--catkin-font-text);
  --catkin-type-body-3xl: 400 2.5rem/1.6 var(--catkin-font-text);
  --catkin-icon-title-3xs: 1.5rem;
  --catkin-icon-title-2xs: 1.75rem;
  --catkin-icon-title-xs: 2rem;
  --catkin-icon-title-sm: 2.5rem;
  --catkin-icon-title-md: 3rem;
  --catkin-icon-title-lg: 4rem;
  --catkin-icon-title-xl: 5rem;
  --catkin-icon-title-2xl: 6rem;
  --catkin-icon-title-3xl: 7.5rem;
  --catkin-icon-body-3xs: 0.875rem;
  --catkin-icon-body-2xs: 1rem;
  --catkin-icon-body-xs: 1.25rem;
  --catkin-icon-body-sm: 1.5rem;
  --catkin-icon-body-md: 1.75rem;
  --catkin-icon-body-lg: 2rem;
  --catkin-icon-body-xl: 2.5rem;
  --catkin-icon-body-2xl: 3rem;
  --catkin-icon-body-3xl: 4rem;
}
@media (max-width: 64em) {
  :root, [data-density="regular"] {
    --catkin-space-fluid-3xs: 1rem;
    --catkin-space-fluid-2xs: 1.25rem;
    --catkin-space-fluid-xs: 1.75rem;
    --catkin-space-fluid-sm: 2.5rem;
    --catkin-space-fluid-md: 4rem;
    --catkin-space-fluid-lg: 6rem;
    --catkin-space-fluid-xl: 10rem;
    --catkin-space-fluid-2xl: 15rem;
    --catkin-space-fluid-3xl: 30rem;
    --catkin-type-title-3xs: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-2xs: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-xs: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-sm: 600 1.5rem/1.1667 var(--catkin-font-title);
    --catkin-type-title-md: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-lg: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-title-xl: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-title-2xl: 600 3rem/1.3333 var(--catkin-font-title);
    --catkin-type-title-3xl: 600 3rem/1.3333 var(--catkin-font-title);
    --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-sm: 400 0.875rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-md: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-lg: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-xl: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xl: 400 1.75rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-3xl: 400 2rem/1.5 var(--catkin-font-text);
    --catkin-icon-title-3xs: 1.25rem;
    --catkin-icon-title-2xs: 1.25rem;
    --catkin-icon-title-xs: 1.5rem;
    --catkin-icon-title-sm: 1.75rem;
    --catkin-icon-title-md: 2rem;
    --catkin-icon-title-lg: 2.5rem;
    --catkin-icon-title-xl: 3rem;
    --catkin-icon-title-2xl: 4rem;
    --catkin-icon-title-3xl: 4rem;
    --catkin-icon-body-3xs: 0.875rem;
    --catkin-icon-body-2xs: 0.875rem;
    --catkin-icon-body-xs: 1rem;
    --catkin-icon-body-sm: 1.25rem;
    --catkin-icon-body-md: 1.5rem;
    --catkin-icon-body-lg: 1.75rem;
    --catkin-icon-body-xl: 2rem;
    --catkin-icon-body-2xl: 2.5rem;
    --catkin-icon-body-3xl: 3rem;
  }
  [data-density="compact"] {
    --catkin-space-fluid-3xs: 1rem;
    --catkin-space-fluid-2xs: 1.25rem;
    --catkin-space-fluid-xs: 1.5rem;
    --catkin-space-fluid-sm: 2rem;
    --catkin-space-fluid-md: 3rem;
    --catkin-space-fluid-lg: 5rem;
    --catkin-space-fluid-xl: 7.5rem;
    --catkin-space-fluid-2xl: 10rem;
    --catkin-space-fluid-3xl: 15rem;
    --catkin-type-title-3xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-2xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-xs: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-sm: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-md: 600 1.5rem/1.1667 var(--catkin-font-title);
    --catkin-type-title-lg: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-xl: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-title-2xl: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-title-3xl: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-sm: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-md: 400 0.875rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-lg: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-xl: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-2xl: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-3xl: 400 1.75rem/1.4286 var(--catkin-font-text);
    --catkin-icon-title-3xs: 1rem;
    --catkin-icon-title-2xs: 1rem;
    --catkin-icon-title-xs: 1.25rem;
    --catkin-icon-title-sm: 1.5rem;
    --catkin-icon-title-md: 1.75rem;
    --catkin-icon-title-lg: 2rem;
    --catkin-icon-title-xl: 2.5rem;
    --catkin-icon-title-2xl: 3rem;
    --catkin-icon-title-3xl: 3rem;
    --catkin-icon-body-3xs: 0.875rem;
    --catkin-icon-body-2xs: 0.875rem;
    --catkin-icon-body-xs: 0.875rem;
    --catkin-icon-body-sm: 1rem;
    --catkin-icon-body-md: 1.25rem;
    --catkin-icon-body-lg: 1.5rem;
    --catkin-icon-body-xl: 1.75rem;
    --catkin-icon-body-2xl: 2rem;
    --catkin-icon-body-3xl: 2.5rem;
  }
  [data-density="comfortable"] {
    --catkin-space-fluid-3xs: 1.5rem;
    --catkin-space-fluid-2xs: 1.75rem;
    --catkin-space-fluid-xs: 2.5rem;
    --catkin-space-fluid-sm: 4rem;
    --catkin-space-fluid-md: 6rem;
    --catkin-space-fluid-lg: 10rem;
    --catkin-space-fluid-xl: 15rem;
    --catkin-space-fluid-2xl: 30rem;
    --catkin-space-fluid-3xl: 40rem;
    --catkin-type-title-3xs: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-2xs: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-xs: 600 1.5rem/1.1667 var(--catkin-font-title);
    --catkin-type-title-sm: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-md: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-title-lg: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-title-xl: 600 3rem/1.3333 var(--catkin-font-title);
    --catkin-type-title-2xl: 600 4rem/1.25 var(--catkin-font-title);
    --catkin-type-title-3xl: 600 5rem/1.2 var(--catkin-font-title);
    --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xs: 400 0.875rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-sm: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-md: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-lg: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xl: 400 1.75rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-2xl: 400 2rem/1.5 var(--catkin-font-text);
    --catkin-type-body-3xl: 400 2.5rem/1.6 var(--catkin-font-text);
    --catkin-icon-title-3xs: 1.5rem;
    --catkin-icon-title-2xs: 1.5rem;
    --catkin-icon-title-xs: 1.75rem;
    --catkin-icon-title-sm: 2rem;
    --catkin-icon-title-md: 2.5rem;
    --catkin-icon-title-lg: 3rem;
    --catkin-icon-title-xl: 4rem;
    --catkin-icon-title-2xl: 5rem;
    --catkin-icon-title-3xl: 6rem;
    --catkin-icon-body-3xs: 0.875rem;
    --catkin-icon-body-2xs: 1rem;
    --catkin-icon-body-xs: 1.25rem;
    --catkin-icon-body-sm: 1.5rem;
    --catkin-icon-body-md: 1.75rem;
    --catkin-icon-body-lg: 2rem;
    --catkin-icon-body-xl: 2.5rem;
    --catkin-icon-body-2xl: 3rem;
    --catkin-icon-body-3xl: 4rem;
  }
}
@media (max-width: 48em) {
  :root, [data-density="regular"] {
    --catkin-space-fluid-3xs: 1rem;
    --catkin-space-fluid-2xs: 1.25rem;
    --catkin-space-fluid-xs: 1.5rem;
    --catkin-space-fluid-sm: 2rem;
    --catkin-space-fluid-md: 3rem;
    --catkin-space-fluid-lg: 5rem;
    --catkin-space-fluid-xl: 7.5rem;
    --catkin-space-fluid-2xl: 10rem;
    --catkin-space-fluid-3xl: 15rem;
    --catkin-type-title-3xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-2xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-xs: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-sm: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-md: 600 1.5rem/1.1667 var(--catkin-font-title);
    --catkin-type-title-lg: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-xl: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-title-2xl: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-title-3xl: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-sm: 400 0.875rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-md: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-lg: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-xl: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-2xl: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-3xl: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-icon-title-3xs: 1rem;
    --catkin-icon-title-2xs: 1rem;
    --catkin-icon-title-xs: 1.25rem;
    --catkin-icon-title-sm: 1.5rem;
    --catkin-icon-title-md: 1.75rem;
    --catkin-icon-title-lg: 2rem;
    --catkin-icon-title-xl: 2.5rem;
    --catkin-icon-title-2xl: 2.5rem;
    --catkin-icon-title-3xl: 2.5rem;
    --catkin-icon-body-3xs: 0.875rem;
    --catkin-icon-body-2xs: 0.875rem;
    --catkin-icon-body-xs: 1rem;
    --catkin-icon-body-sm: 1.25rem;
    --catkin-icon-body-md: 1.5rem;
    --catkin-icon-body-lg: 1.75rem;
    --catkin-icon-body-xl: 1.75rem;
    --catkin-icon-body-2xl: 1.75rem;
    --catkin-icon-body-3xl: 1.75rem;
  }
  [data-density="compact"] {
    --catkin-space-fluid-3xs: 1rem;
    --catkin-space-fluid-2xs: 1.25rem;
    --catkin-space-fluid-xs: 1.25rem;
    --catkin-space-fluid-sm: 1.75rem;
    --catkin-space-fluid-md: 2.5rem;
    --catkin-space-fluid-lg: 4rem;
    --catkin-space-fluid-xl: 6rem;
    --catkin-space-fluid-2xl: 7.5rem;
    --catkin-space-fluid-3xl: 10rem;
    --catkin-type-title-3xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-2xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-xs: 600 0.875rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-sm: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-md: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-lg: 600 1.5rem/1.1667 var(--catkin-font-title);
    --catkin-type-title-xl: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-2xl: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-3xl: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-sm: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-md: 400 0.875rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-lg: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-xl: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-2xl: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-3xl: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-icon-title-3xs: 1rem;
    --catkin-icon-title-2xs: 1rem;
    --catkin-icon-title-xs: 1rem;
    --catkin-icon-title-sm: 1.25rem;
    --catkin-icon-title-md: 1.5rem;
    --catkin-icon-title-lg: 1.75rem;
    --catkin-icon-title-xl: 2rem;
    --catkin-icon-title-2xl: 2rem;
    --catkin-icon-title-3xl: 2rem;
    --catkin-icon-body-3xs: 0.875rem;
    --catkin-icon-body-2xs: 0.875rem;
    --catkin-icon-body-xs: 0.875rem;
    --catkin-icon-body-sm: 1rem;
    --catkin-icon-body-md: 1.25rem;
    --catkin-icon-body-lg: 1.5rem;
    --catkin-icon-body-xl: 1.5rem;
    --catkin-icon-body-2xl: 1.5rem;
    --catkin-icon-body-3xl: 1.5rem;
  }
  [data-density="comfortable"] {
    --catkin-space-fluid-3xs: 1.25rem;
    --catkin-space-fluid-2xs: 1.5rem;
    --catkin-space-fluid-xs: 2rem;
    --catkin-space-fluid-sm: 3rem;
    --catkin-space-fluid-md: 5rem;
    --catkin-space-fluid-lg: 7.5rem;
    --catkin-space-fluid-xl: 10rem;
    --catkin-space-fluid-2xl: 15rem;
    --catkin-space-fluid-3xl: 30rem;
    --catkin-type-title-3xs: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-2xs: 600 1rem/1.25 var(--catkin-font-title);
    --catkin-type-title-xs: 600 1.25rem/1.2 var(--catkin-font-title);
    --catkin-type-title-sm: 600 1.5rem/1.1667 var(--catkin-font-title);
    --catkin-type-title-md: 600 1.75rem/1.1429 var(--catkin-font-title);
    --catkin-type-title-lg: 600 2rem/1.25 var(--catkin-font-title);
    --catkin-type-title-xl: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-title-2xl: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-title-3xl: 600 2.5rem/1.2 var(--catkin-font-title);
    --catkin-type-body-3xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xs: 400 0.75rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xs: 400 0.875rem/1.4286 var(--catkin-font-text);
    --catkin-type-body-sm: 400 1rem/1.5 var(--catkin-font-text);
    --catkin-type-body-md: 400 1.25rem/1.4 var(--catkin-font-text);
    --catkin-type-body-lg: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-xl: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-2xl: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-type-body-3xl: 400 1.5rem/1.3333 var(--catkin-font-text);
    --catkin-icon-title-3xs: 1.25rem;
    --catkin-icon-title-2xs: 1.25rem;
    --catkin-icon-title-xs: 1.5rem;
    --catkin-icon-title-sm: 1.75rem;
    --catkin-icon-title-md: 2rem;
    --catkin-icon-title-lg: 2.5rem;
    --catkin-icon-title-xl: 3rem;
    --catkin-icon-title-2xl: 3rem;
    --catkin-icon-title-3xl: 3rem;
    --catkin-icon-body-3xs: 0.875rem;
    --catkin-icon-body-2xs: 1rem;
    --catkin-icon-body-xs: 1.25rem;
    --catkin-icon-body-sm: 1.5rem;
    --catkin-icon-body-md: 1.75rem;
    --catkin-icon-body-lg: 2rem;
    --catkin-icon-body-xl: 2rem;
    --catkin-icon-body-2xl: 2rem;
    --catkin-icon-body-3xl: 2rem;
  }
}

/* ---- Übergang: Namen der Revisionen 3–5 (BIMS, catkin-Portal, kachel.css) ---- */
/* Palette der Revisionen 3–5 (Rohmaterial, bleibt für bestehende Oberflächen gültig; neue Oberflächen nutzen
   Rollen, CI7). Wird von build_tokens.py unverändert in tokens.css übernommen. */
:root {
  --catkin-green-50: #F1F9F5;
  --catkin-green-100: #D7EFE4;
  --catkin-green-200: #A9DFC7;
  --catkin-green-300: #77CFA8;
  --catkin-green-400: #39C084;
  --catkin-green-500: #239F67;
  --catkin-green-600: #148552;
  --catkin-green-700: #0E7B4A;
  --catkin-green-800: #0C5A37;
  --catkin-green-900: #0A3321;
  --catkin-green: var(--catkin-green-700);
  --catkin-green-strong: var(--catkin-green-800);
  --catkin-green-soft: var(--catkin-green-50);

  --catkin-signal-50: #FEF6F0;
  --catkin-signal-100: #FDE4D3;
  --catkin-signal-200: #FAC6A3;
  --catkin-signal-300: #F59F66;
  --catkin-signal-400: #F48134;
  --catkin-signal-500: #F5680A;
  --catkin-signal-600: #DF600C;
  --catkin-signal-700: #B3500F;
  --catkin-signal-800: #8A400F;
  --catkin-signal-900: #62300E;
  --catkin-signal: var(--catkin-signal-600);
  --catkin-signal-on: #1A120B;
  --catkin-signal-on-dark: var(--catkin-signal-400);

  --catkin-ink: #1F2421;
  --catkin-ink-soft: #3A403B;
  --catkin-gray-500: #5C635D;
  --catkin-gray-400: #80877F;
  --catkin-gray-300: #A7ACA6;
  --catkin-paper: #F7F9F7;
  --catkin-white: #FFFFFF;

  --catkin-logo-green: var(--catkin-green-600);
  --font-logo: "Saira", "Eurostile", "Segoe UI", sans-serif;
  --radius-squircle: 22%;
}
:root {
  --catkin-bg: light-dark(var(--catkin-scale-neutral-13), var(--catkin-scale-neutral-1));
  --catkin-surface: light-dark(var(--catkin-scale-neutral-14), var(--catkin-scale-neutral-2));
  --catkin-surface-alt: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-3));
  --catkin-tint-neutral: light-dark(var(--catkin-scale-neutral-11), var(--catkin-scale-neutral-3));
  --catkin-placeholder: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-3));
  --catkin-scrim: light-dark(rgb(31 36 33 / 0.45), rgb(8 10 9 / 0.65));
  --catkin-text: var(--catkin-neutral-on-surface-100);
  --catkin-text-muted: var(--catkin-neutral-on-surface-80);
  --catkin-link: var(--catkin-brand-on-surface-80);
  --catkin-border-decor: var(--catkin-neutral-on-surface-60);
  --catkin-border-control: var(--catkin-neutral-on-surface-70);
  --catkin-border-active: var(--catkin-brand-on-surface-70);
  --catkin-border-subtle: light-dark(var(--catkin-scale-neutral-12), var(--catkin-scale-neutral-3));
  --catkin-primary-bg: var(--catkin-brand-fill);
  --catkin-primary-bg-hover: var(--catkin-brand-fill-hover);
  --catkin-primary-fg: var(--catkin-brand-on-fill);
  --catkin-signal-bg: var(--catkin-orange-fill);
  --catkin-signal-fg: var(--catkin-orange-on-fill);
  --catkin-danger-bg: var(--catkin-critical-fill);
  --catkin-danger-fg: var(--catkin-critical-on-fill);
  --catkin-status-neu-bg: var(--catkin-neutral-surface-3);
  --catkin-status-neu-fg: var(--catkin-neutral-on-surface-100);
  --catkin-status-neu-icon: var(--catkin-neutral-fill);
  --catkin-status-offen-bg: var(--catkin-warning-surface-3);
  --catkin-status-offen-fg: var(--catkin-warning-on-surface-100);
  --catkin-status-offen-icon: var(--catkin-warning-fill);
  --catkin-status-in-arbeit-bg: var(--catkin-info-surface-3);
  --catkin-status-in-arbeit-fg: var(--catkin-info-on-surface-100);
  --catkin-status-in-arbeit-icon: var(--catkin-info-fill);
  --catkin-status-unterwegs-bg: var(--catkin-violet-surface-3);
  --catkin-status-unterwegs-fg: var(--catkin-violet-on-surface-100);
  --catkin-status-unterwegs-icon: var(--catkin-violet-fill);
  --catkin-status-erledigt-bg: var(--catkin-success-surface-3);
  --catkin-status-erledigt-fg: var(--catkin-success-on-surface-100);
  --catkin-status-erledigt-icon: var(--catkin-success-fill);
  --catkin-status-achtung-bg: var(--catkin-critical-surface-3);
  --catkin-status-achtung-fg: var(--catkin-critical-on-surface-100);
  --catkin-status-achtung-icon: var(--catkin-critical-fill);
  --catkin-status-gesperrt-bg: var(--catkin-neutral-surface-inverse-strong);
  --catkin-status-gesperrt-fg: var(--catkin-neutral-on-inverse);
  --catkin-status-gesperrt-icon: var(--catkin-neutral-surface-inverse-strong);
  --catkin-status-hinweis-icon: var(--catkin-orange-fill);
  --font-ui: var(--catkin-font-text);
  --font-display: var(--catkin-font-title);
  --radius-s: var(--catkin-radius-sm);
  --radius-m: var(--catkin-radius-md);
  --radius-l: var(--catkin-radius-lg);
}