:root {
/* rem (Base Tokens) */
  --rem-0rem: 0;
  --rem-0-25x: 1px;
  --rem-0-5x: 2px;
  --rem-1x: 4px;
  --rem-1-5x: 6px;
  --rem-2x: 8px;
  --rem-2-5x: 10px;
  --rem-3x: 12px;
  --rem-3-5x: 14px;
  --rem-1rem: 16px;
  --rem-4-5x: 18px;
  --rem-5x: 20px;
  --rem-5-5x: 22px;
  --rem-6x: 24px;
  --rem-6-5x: 26px;
  --rem-7x: 28px;
  --rem-7-5x: 30px;
  --rem-8x: 32px;
  --rem-8-5x: 34px;
  --rem-9x: 36px;
  --rem-9-5x: 38px;
  --rem-10x: 40px;
  --rem-10-5x: 42px;
  --rem-11x: 44px;
  --rem-11-5x: 46px;
  --rem-12x: 48px;
  --rem-12-5x: 50px;
  --rem-13x: 52px;
  --rem-13-5x: 54px;
  --rem-14x: 56px;
  --rem-14-5x: 58px;
  --rem-15x: 60px;
  --rem-15-5x: 62px;
  --rem-16x: 64px;
  --rem-16-5x: 66px;
  --rem-17x: 68px;
  --rem-17-5x: 70px;
  --rem-18x: 72px;
  --rem-18-5x: 74px;
  --rem-19x: 76px;
  --rem-19-5x: 78px;
  --rem-20x: 80px;
  --rem-21x: 84px;
  --rem-22x: 88px;
  --rem-23x: 92px;
  --rem-24x: 96px;
  --rem-25x: 100px;
  --rem-26x: 104px;
  --rem-27x: 108px;
  --rem-28x: 112px;
  --rem-29x: 116px;
  --rem-30x: 120px;

  /* colors (Base Tokens) */
  --colors-white: #ffffff;
  --colors-black: #000000;
  --colors-grey-95: #f1f2f3;
  --colors-grey-90: #e3e5e8;
  --colors-grey-80: #c7cad1;
  --colors-grey-70: #abb0ba;
  --colors-grey-60: #8f96a3;
  --colors-grey-50: #737b8c;
  --colors-grey-40: #5c6370;
  --colors-grey-30: #454a54;
  --colors-grey-20: #2e3138;
  --colors-grey-10: #17191c;

  /* ---- Farbpalette (neu, 2026-09-27): yellow, blue, green in 9 Stufen ---- */
  /* yellow */
  --colors-yellow-10: #281E0B;
  --colors-yellow-20: #523D14;
  --colors-yellow-30: #7E5D1B;
  --colors-yellow-40: #AC7D20;
  --colors-yellow-50: #D99D26;
  --colors-yellow-60: #E5B24D;
  --colors-yellow-70: #EFC676;
  --colors-yellow-80: #F6DAA2;
  --colors-yellow-90: #FCEDCF;
  /* blue */
  --colors-blue-10: #0B1928;
  --colors-blue-20: #143152;
  --colors-blue-30: #1B497E;
  --colors-blue-40: #2062AC;
  --colors-blue-50: #267AD9;
  --colors-blue-60: #4D94E5;
  --colors-blue-70: #76AFEF;
  --colors-blue-80: #A2C9F6;
  --colors-blue-90: #CFE4FC;
  /* green */
  --colors-green-10: #0F241D;
  --colors-green-20: #1D493A;
  --colors-green-30: #2A6F58;
  --colors-green-40: #359776;
  --colors-green-50: #41BE94;
  --colors-green-60: #64CEAA;
  --colors-green-70: #88DDC0;
  --colors-green-80: #AFE9D6;
  --colors-green-90: #D6F5EB;

  /* ---- ARCHIV / outdated: alte Werte yellow, blue, green, sand (nicht aktiv) ----
     sand ersetzt durch yellow: sand-90 → yellow-80, sand-50 → yellow-40, sand-10 → yellow-10

     --colors-yellow-90: #fcedcf;
     --colors-yellow-80: #f6daa2;
     --colors-yellow-70: #efc676;
     --colors-yellow-60: #e5b24d;
     --colors-yellow-50: #d99d26;
     --colors-yellow-40: #ab7d21;
     --colors-yellow-30: #7e5d1b;
     --colors-yellow-20: #533d14;
     --colors-yellow-10: #291f0b;
     --colors-green-90: #d5e5c2;
     --colors-blue-90: #cedff1;
     --colors-blue-50: #718498;
     --colors-blue-10: #122335;
     --colors-green-50: #798966;
     --colors-green-10: #182905;
     --colors-sand-90: #f6daa2;
     --colors-sand-50: #ab7d21;
     --colors-sand-10: #291f0b;
  ---- Ende Archiv ---- */
  --colors-signaling-green-90: #ccffcc;
  --colors-signaling-green-80: #99ff99;
  --colors-signaling-green-70: #66f966;
  --colors-signaling-green-60: #33e733;
  --colors-signaling-green-50: #00cc00;
  --colors-signaling-green-40: #00b400;
  --colors-signaling-green-30: #009300;
  --colors-signaling-green-20: #006600;
  --colors-signaling-green-10: #003300;
  --colors-signaling-yellow-90: #ffffcc;
  --colors-signaling-yellow-80: #ffff99;
  --colors-signaling-yellow-70: #f9f966;
  --colors-signaling-yellow-60: #e7e733;
  --colors-signaling-yellow-50: #cccc00;
  --colors-signaling-yellow-40: #b4b400;
  --colors-signaling-yellow-30: #939300;
  --colors-signaling-yellow-20: #666600;
  --colors-signaling-yellow-10: #333300;
  --colors-signaling-red-90: #ffcccc;
  --colors-signaling-red-80: #ff9999;
  --colors-signaling-red-70: #f96666;
  --colors-signaling-red-60: #e73333;
  --colors-signaling-red-50: #cc0000;
  --colors-signaling-red-40: #b40000;
  --colors-signaling-red-30: #930000;
  --colors-signaling-red-20: #660000;
  --colors-signaling-red-10: #330000;

  /* font (Base Tokens) */
  --font-font-family: "Suisse Intl";
  --font-font-style-700: Bold;
  --font-font-style-400: Regular;
  --font-font-style-300: Light;

  /* radius (Base Tokens) */
  --radius-border-radius-2: 2px;
  --radius-border-radius-6: 6px;
  --radius-border-radius-16: 16px;
  --radius-border-radius-100: 100px;
}

/* ============================================================
   siduvia — Foundation
   Fonts, Reset, Grid. Baut ausschließlich auf tokens.css auf.
   Reihenfolge im HTML: tokens.css -> foundation.css -> components.css
   ============================================================ */

/* -------------------- Fonts -------------------- */
/* Font-Family-Name hier bewusst identisch zum korrigierten
   --font-font-family aus tokens-overlay.css: 'Suisse Intl' */
@font-face {
  font-family: "Suisse Intl";
  src: url('../assets/fonts/SuisseIntl-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('../assets/fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------- Reset -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-font-family), 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mode (data-mode) sitzt auf body, daher lösen sich die Mode-Variablen
   hier auf. Der body-Hintergrund wird vom Browser auf die ganze
   Fläche übertragen (Überscrollen, Scrollbar-Platz). */
body {
  min-height: 100vh;
  color: var(--typography-color-text-primary);
  background: var(--surface-color-layer-1);
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

/* Fokus-Sichtbarkeit: 1px Outline in Primärtextfarbe, 2px Versatz */
:focus-visible {
  outline: 1px solid var(--typography-color-text-primary);
  outline-offset: 2px;
}

/* Figma exportiert jeden Text-Layer mit Cap-Height-Kürzung
   (text-box-trim/text-box-edge) statt normalem Leading — ohne das
   rendern Controls (Button-Label, Badge, Tag, Input-Badge, Formular-
   felder ...) spürbar höher als in Figma spezifiziert (z.B. Input-Badge
   19px statt 13px). Bewusst NUR auf Controls beschränkt, nicht auf
   Headlines/Copy-Text (h1–h6, .paragraph*, Fließtext) — dort soll der
   Zeilenabstand sich wie normales `line-height` verhalten (siehe die
   .h1–.h5/.paragraph*-Regeln weiter unten), nicht Figmas Cap-Height-
   Trimming. Nur Vertikalabstand außen betroffen, Zeilenabstand
   innerhalb mehrzeiligen Texts bleibt unverändert. */
input, textarea, button, select,
.badge, .tag, .btn__label, .input__badge {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* -------------------- Theme / Mode Verschachtelung --------------------
   Pflicht-Kette: Density -> Farbthema -> Mode
   <html>                                           Density automatisch per Media Query
                                                    (Desktop ≥1280 / Tablet 640–1279 /
                                                    Mobile <640 / Print), erzwingbar mit
                                                    data-theme="Desktop|Tablet|Mobile"
     <body data-theme="Default" data-mode="Auto">   Farbthema + Mode (Auto/Light/Dark)
   </html>
   [data-mode] verweist auf die *-light/*-dark-Werte aus dem Farbthema,
   daher Farbthema auf demselben Element oder darüber.
   Elemente mit eigenem Farbthema (z. B. <section data-theme="Grey">)
   übernehmen den Mode des body automatisch: die Mode-Blöcke gelten
   auch für [data-mode] [data-theme] und werden dort mit den Werten
   des neuen Farbthemas neu aufgelöst.
------------------------------------------------------------------- */

/* -------------------- Grid --------------------
   Breakpoints:  Mobile < 640px | Tablet 640–959px | Desktop ≥ 960px
   Spalten:           4        |        6         |       12
   Gutter --layout-spacing-container-gap-1x,
   Seitenrand --layout-spacing-container-padding (je nach Dichte).
   Volle Viewportbreite, kein max-width, kein zentrierter Block.
------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--layout-spacing-container-gap-1x);
  padding-inline: var(--layout-spacing-container-padding);
  width: 100%;
}

@media (max-width: 959px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 639px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Spaltenspannen und Startspalte
   Breite (wie viele Spalten):
     .col-{n}          Desktop (1–12)
     .col-t-{n}        Tablet  (1–6)
     .col-m-{n}        Mobile  (1–4)
   Start (ab welcher Spalte), gilt nur im jeweiligen Breakpoint:
     .col-start-{n}    Desktop (1–12)
     .col-t-start-{n}  Tablet  (1–6)
     .col-m-start-{n}  Mobile  (1–4)
   Ohne passende Breiten-Klasse für den Breakpoint: volle Breite.
   Ohne Start-Klasse: nächste freie Spalte.
   Beispiel: class="col-8 col-start-5 col-t-4 col-t-start-3"
             → Desktop Spalte 5–12, Tablet Spalte 3–6, Mobile volle Breite
   Breite setzt nur das Ende (grid-column-end: span n), Start nur den
   Anfang (grid-column-start) — so lassen sich beide kombinieren.
   Unter 960px setzt .col-t-/.col-m-{n} den Start auf auto zurück (die
   Desktop-Breite stellt dort volle Breite 1 / -1 ein); eine Start-Klasse
   des Breakpoints steht danach und gewinnt. */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

@media (min-width: 960px) {
  .col-start-1  { grid-column-start: 1; }
  .col-start-2  { grid-column-start: 2; }
  .col-start-3  { grid-column-start: 3; }
  .col-start-4  { grid-column-start: 4; }
  .col-start-5  { grid-column-start: 5; }
  .col-start-6  { grid-column-start: 6; }
  .col-start-7  { grid-column-start: 7; }
  .col-start-8  { grid-column-start: 8; }
  .col-start-9  { grid-column-start: 9; }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }
  .col-start-12 { grid-column-start: 12; }
}

@media (max-width: 959px) {
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { grid-column: 1 / -1; }
  .col-t-1 { grid-column: auto / span 1; }
  .col-t-2 { grid-column: auto / span 2; }
  .col-t-3 { grid-column: auto / span 3; }
  .col-t-4 { grid-column: auto / span 4; }
  .col-t-5 { grid-column: auto / span 5; }
  .col-t-6 { grid-column: auto / span 6; }
}

@media (min-width: 640px) and (max-width: 959px) {
  .col-t-start-1 { grid-column-start: 1; }
  .col-t-start-2 { grid-column-start: 2; }
  .col-t-start-3 { grid-column-start: 3; }
  .col-t-start-4 { grid-column-start: 4; }
  .col-t-start-5 { grid-column-start: 5; }
  .col-t-start-6 { grid-column-start: 6; }
}

@media (max-width: 639px) {
  .col-t-1,.col-t-2,.col-t-3,.col-t-4,.col-t-5,.col-t-6 { grid-column: 1 / -1; }
  .col-m-1 { grid-column: auto / span 1; }
  .col-m-2 { grid-column: auto / span 2; }
  .col-m-3 { grid-column: auto / span 3; }
  .col-m-4 { grid-column: auto / span 4; }
  .col-m-start-1 { grid-column-start: 1; }
  .col-m-start-2 { grid-column-start: 2; }
  .col-m-start-3 { grid-column-start: 3; }
  .col-m-start-4 { grid-column-start: 4; }
}

/* Sektions-Rhythmus */
.section {
  padding-block: var(--layout-spacing-container-gap-4x);
}
.stack-1 > * + * { margin-block-start: var(--layout-spacing-container-gap-1x); }
.stack-2 > * + * { margin-block-start: var(--layout-spacing-container-gap-2x); }
.stack-3 > * + * { margin-block-start: var(--layout-spacing-container-gap-3x); }
.stack-4 > * + * { margin-block-start: var(--layout-spacing-container-gap-4x); }

/* -------------------- Typografie --------------------
   Größen laufen ausschließlich über HTML-Tags, keine Größenklassen:
     h1–h5          Headlines, Bold (700)
     p              Paragraph, Regular (400)
     small          Paragraph/Label small
     label          Label (Formulare)
   Modifier (nur Schnitt, nie Größe):
     .secondary     Light (300) — bei h5 Regular (400), so aus Figma
     .bold          Bold (700), z. B. <p class="bold">, <small class="bold">
   Auch auf Teilen einsetzbar: <h3>Erst … <span class="secondary">dann …</span></h3>
   Figma-Textstyles: line-height 125 % (unitless 1.25, damit es pro
   Element gilt), letter-spacing 0. Größen-Tokens: --typography-font-size-*
   (h1–h4 fluid, siehe add-styles.css). Keine Versalien-Transformation.
------------------------------------------------------------------- */
body {
  font-size: var(--typography-font-size-body);
  line-height: 1.25;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: var(--typography-font-size-h1); }
h2 { font-size: var(--typography-font-size-h2); }
h3 { font-size: var(--typography-font-size-h3); }
h4 { font-size: var(--typography-font-size-h4); }
h5 { font-size: var(--typography-font-size-h5); }

p {
  font-size: var(--typography-font-size-p);
  font-weight: 400;
}

small {
  font-size: var(--typography-font-size-p-small);
}

label {
  font-size: var(--typography-font-size-label);
}

.secondary { font-weight: 300; }
h5.secondary,
h5 .secondary { font-weight: 400; }
.bold { font-weight: 700; }

.text-primary   { color: var(--typography-color-text-primary); }
.text-secondary { color: var(--typography-color-text-secondary); }
.text-inverted  { color: var(--typography-color-text-primary-inverted); }

/* -------------------- Icon-Basis --------------------
   Carbon-Icons (32px Viewbox), als <svg class="icon"><use> eingebunden.
   Größe wird über width/height am jeweiligen Verwendungsort gesetzt.
------------------------------------------------------------------- */
.icon {
  width: var(--rem-6x);
  height: var(--rem-6x);
  fill: currentColor;
  flex: none;
}
.icon--sm { width: var(--rem-5x); height: var(--rem-5x); }
.icon--lg { width: var(--rem-8x); height: var(--rem-8x); }


/* Mode (Light / Dark / Auto) --------------------------------------
   Ein Block für alle Modi: light-dark() wählt je nach color-scheme
   den *-light- oder *-dark-Wert des Farbthemas.
     data-mode="Auto"   folgt dem Betriebssystem
     data-mode="Light"  fest hell
     data-mode="Dark"   fest dunkel
   Gilt auch für [data-theme]-Elemente darunter, damit die Werte mit
   dem jeweiligen Farbthema neu aufgelöst werden.
------------------------------------------------------------------ */
[data-mode='Light'] { color-scheme: light; }
[data-mode='Dark']  { color-scheme: dark; }
[data-mode='Auto']  { color-scheme: light dark; }

[data-mode],
[data-mode] [data-theme] {
/* Mode (Aliases) */
  --mode-color-logo: light-dark(var(--typography-color-text-primary-light), var(--typography-color-text-primary-dark));
  --mode-error-foreground: light-dark(var(--colors-signaling-red-50), var(--colors-signaling-red-50));
  --mode-error-background: light-dark(var(--colors-signaling-red-90), var(--colors-signaling-red-10));

  /* surface (Aliases) — Ebenen, gezählt nach Tiefe:
       layer-1  Seite
       layer-2  auf der Seite: Card, Menü, Footer-CTA …
       layer-3  auf layer-2: Fläche in der Card, Eingabefeld …
       layer-4  auf layer-3 (layer-5, layer-6 für Controls auf tiefen Ebenen)
     Jede weitere Ebene eine Stufe weiter zur Mitte (Light dunkler,
     Dark heller).
       cutout   ausgestanzt: Tag light, aktiver Button der Button-Group,
                Label-Chip — nehmen die Fläche eine Ebene zurück (auf der
                Seite layer-0, auf layer-2 layer-1, auf layer-4 layer-3).
                Hier der Wert für die Seite; tiefere Flächen setzen ihn
                (components.css)
       layer-0  eine Stufe vor layer-1: Weiß bzw. Schwarz (in Default
                gleich layer-1, in den Farbthemen heller bzw. dunkler)
     Floating Window: layer-2, 85 % deckend (mit Weichzeichner).
     Input-Fläche: wie der Secondary-Button die nächste Ebene (next). */
  --surface-color-layer-1: light-dark(var(--surface-color-layer-1-light), var(--surface-color-layer-1-dark));
  --surface-color-layer-2: light-dark(var(--surface-color-layer-2-light), var(--surface-color-layer-2-dark));
  --surface-color-layer-3: light-dark(var(--surface-color-layer-3-light), var(--surface-color-layer-3-dark));
  --surface-color-layer-4: light-dark(var(--surface-color-layer-4-light), var(--surface-color-layer-4-dark));
  --surface-color-layer-0: light-dark(var(--colors-white), var(--colors-black));
  --surface-color-cutout: var(--surface-color-layer-0);
  --surface-color-layer-5: light-dark(var(--surface-color-layer-5-light), var(--surface-color-layer-5-dark));
  --surface-color-layer-6: light-dark(var(--surface-color-layer-6-light), var(--surface-color-layer-6-dark));
  /* Controls relativ zur Fläche, auf der sie liegen: next = nächste
     Ebene (Secondary-Button, Eingabefelder, Button-Group, Slider,
     Checkbox …), next-2 = übernächste (Hover des Secondary-Buttons;
     Felder zeigen Hover nur am Rand).
     Hier für die Seite; Flächen der Ebene 2 und tiefer setzen sie
     (components.css), die Control-Werte darunter rechnen dort neu. */
  --surface-color-next: var(--surface-color-layer-2);
  --surface-color-next-2: var(--surface-color-layer-3);
  --surface-color-floating-window: light-dark(color-mix(in srgb, var(--surface-color-layer-2-light) 85%, transparent), color-mix(in srgb, var(--surface-color-layer-2-dark) 85%, transparent));

  /* typography (Aliases) */
  --typography-color-text-primary: light-dark(var(--typography-color-text-primary-light), var(--typography-color-text-primary-dark));
  --typography-color-text-secondary: light-dark(var(--typography-color-text-secondary-light), var(--typography-color-text-secondary-dark));
  --typography-color-text-primary-inverted: light-dark(var(--typography-color-text-primary-dark), var(--typography-color-text-primary-light));
  --typography-color-text-secondary-inverted: light-dark(var(--typography-color-text-secondary-dark), var(--typography-color-text-secondary-light));

  /* inputs (Aliases) */
  --inputs-primary-default-color-input-border: var(--surface-color-next);
  --inputs-primary-default-color-input-container: var(--surface-color-next);
  --inputs-primary-default-color-input-content: light-dark(var(--inputs-default-light-color-input-content), var(--inputs-default-dark-color-input-content));
  --inputs-primary-hover-color-input-border: light-dark(var(--inputs-hover-light-color-input-border), var(--inputs-hover-dark-color-input-border));
  --inputs-primary-hover-color-input-container: var(--surface-color-next);
  --inputs-primary-hover-color-input-content: light-dark(var(--inputs-hover-light-color-input-content), var(--inputs-hover-dark-color-input-content));
  --inputs-primary-active-color-input-border: light-dark(var(--inputs-active-light-color-input-border), var(--inputs-active-dark-color-input-border));
  --inputs-primary-active-color-input-container: var(--surface-color-next);
  --inputs-primary-active-color-input-content: light-dark(var(--inputs-active-light-color-input-content), var(--inputs-active-dark-color-input-content));
  --inputs-primary-focused-color-input-border: light-dark(var(--inputs-active-light-color-input-border), var(--inputs-active-dark-color-input-border));
  --inputs-primary-focused-color-input-container: var(--surface-color-next);
  --inputs-primary-focused-color-input-content: light-dark(var(--inputs-active-light-color-input-content), var(--inputs-active-dark-color-input-content));
  --inputs-primary-disabled-color-input-border: light-dark(var(--inputs-hover-light-color-input-border), var(--inputs-hover-dark-color-input-border));
  --inputs-primary-disabled-color-input-container: var(--surface-color-next);
  --inputs-primary-disabled-color-input-content: light-dark(var(--inputs-hover-light-color-input-border), var(--inputs-hover-dark-color-input-border));
  --inputs-primary-active-color-input-border-2: light-dark(var(--inputs-active-light-color-input-border), var(--inputs-active-dark-color-input-border));
  --inputs-primary-active-color-input-container-2: var(--surface-color-next);
  --inputs-primary-active-color-input-content-2: light-dark(var(--inputs-active-light-color-input-content), var(--inputs-active-dark-color-input-content));

  /* controls (Aliases) */
  --controls-primary-default-color-control-border: light-dark(var(--controls-primary-default-light-color-control-border), var(--controls-primary-default-dark-color-control-border));
  --controls-primary-default-color-control-container: light-dark(var(--controls-primary-default-light-color-control-container), var(--controls-primary-default-dark-color-control-container));
  --controls-primary-default-color-control-content: light-dark(var(--controls-primary-default-light-color-control-content), var(--controls-primary-default-dark-color-control-content));
  --controls-secondary-default-color-control-border: var(--surface-color-next);
  --controls-secondary-default-color-control-container: var(--surface-color-next);
  --controls-secondary-default-color-control-content: light-dark(var(--controls-secondary-default-light-color-control-content), var(--controls-secondary-default-dark-color-control-content));
  --controls-primary-hover-color-control-border: light-dark(var(--controls-primary-hover-light-color-control-border), var(--controls-primary-hover-dark-color-control-border));
  --controls-primary-hover-color-control-container: light-dark(var(--controls-primary-hover-light-color-control-container), var(--controls-primary-hover-dark-color-control-container));
  --controls-primary-hover-color-control-content: light-dark(var(--controls-primary-hover-light-color-control-content), var(--controls-primary-hover-dark-color-control-content));
  --controls-secondary-hover-color-control-border: var(--surface-color-next-2);
  --controls-secondary-hover-color-control-container: var(--surface-color-next-2);
  --controls-secondary-hover-color-control-content: light-dark(var(--controls-secondary-hover-light-color-control-content), var(--controls-secondary-hover-dark-color-control-content));
  --controls-primary-active-color-control-border: light-dark(var(--controls-primary-default-light-color-control-border), var(--controls-primary-default-dark-color-control-border));
  --controls-primary-active-color-control-container: light-dark(var(--controls-primary-default-light-color-control-container), var(--controls-primary-default-dark-color-control-container));
  --controls-primary-active-color-control-content: light-dark(var(--controls-primary-default-light-color-control-content), var(--controls-primary-default-dark-color-control-content));
  --controls-primary-focused-color-control-border: light-dark(var(--controls-primary-default-light-color-control-border), var(--controls-primary-default-dark-color-control-border));
  --controls-primary-focused-color-control-container: light-dark(var(--controls-primary-default-light-color-control-container), var(--controls-primary-default-dark-color-control-container));
  --controls-primary-focused-color-control-content: light-dark(var(--controls-primary-default-light-color-control-content), var(--controls-primary-default-dark-color-control-content));
  --controls-primary-disabled-color-control-border: light-dark(var(--controls-primary-default-light-color-control-border), var(--controls-primary-default-dark-color-control-border));
  --controls-primary-disabled-color-control-container: light-dark(var(--controls-primary-default-light-color-control-container), var(--controls-primary-default-dark-color-control-container));
  --controls-primary-disabled-color-control-content: light-dark(var(--controls-primary-default-light-color-control-content), var(--controls-primary-default-dark-color-control-content));
}

/* Flächen ab Ebene 2 setzen --surface-color-next/-next-2 (components.css);
   die relativen Control-Werte werden dort neu aufgelöst. Kalender: Tag
   (Monat) und Stundenspalte (Woche, Tag) inkl. Wochenende. */
.header,
.card,
.accordion--filled,
.sticky-stack--filled,
.floating,
.calendar__day,
.calendar__slots {
  --inputs-primary-default-color-input-border: var(--surface-color-next);
  --inputs-primary-default-color-input-container: var(--surface-color-next);
  --inputs-primary-hover-color-input-container: var(--surface-color-next);
  --inputs-primary-active-color-input-container: var(--surface-color-next);
  --inputs-primary-focused-color-input-container: var(--surface-color-next);
  --inputs-primary-disabled-color-input-container: var(--surface-color-next);
  --inputs-primary-active-color-input-container-2: var(--surface-color-next);
  --controls-secondary-default-color-control-border: var(--surface-color-next);
  --controls-secondary-default-color-control-container: var(--surface-color-next);
  --controls-secondary-hover-color-control-border: var(--surface-color-next-2);
  --controls-secondary-hover-color-control-container: var(--surface-color-next-2);
}


/* Desktop theme — Standard (≥ 1280px) */
:root,
[data-theme='Desktop'] {
/* typography (Base Tokens) */
  --typography-font-size-body: 16px;
  --typography-font-size-p: 16px;
  --typography-font-size-p-small: 12px;
  --typography-font-size-label: 16px;
  --typography-font-size-label-small: 12px;
  --typography-font-size-h5: 16px;
  --typography-font-size-h4: 24px;
  --typography-font-size-h3: 32px;
  --typography-font-size-h2: 40px;
  --typography-font-size-h1: 48px;
  --typography-line-height-body: 16px;
  --typography-line-height-p: 20px;
  --typography-line-height-label: 20px;
  --typography-line-height-label-small: 14px;
  --typography-line-height-h4: 24px;
  --typography-line-height-h3: 32px;
  --typography-line-height-h2: 40px;
  --typography-line-height-h1: 48px;

  /* controls (Base Tokens) */
  --controls-size-container-min-width: 40px;
  --controls-size-container-min-height: 40px;
  --controls-size-input-min-width: 64px;
  --controls-size-input-min-height: 40px;
  --controls-spacing-container-padding-large: var(--rem-2x);
  --controls-spacing-container-gap-large: var(--rem-2x);
  --controls-spacing-container-padding-medium: var(--rem-1x);
  --controls-spacing-container-gap-medium: var(--rem-1x);
  --controls-spacing-container-padding-small: var(--rem-0-5x);
  --controls-spacing-container-gap-small: var(--rem-0-5x);

  /* layout (Base Tokens) */
  --layout-spacing-container-padding: 32px;
  --layout-spacing-container-gap-1x: 24px;
  --layout-spacing-container-gap-2x: 32px;
  --layout-spacing-container-gap-3x: 48px;
  --layout-spacing-container-gap-4x: 64px;
}

/* Tablet theme — 640–1279px */
@media (max-width: 1279px) {
  :root,
  [data-theme='Tablet'] {
  /* typography (Base Tokens) */
    --typography-font-size-body: 16px;
    --typography-font-size-p: 16px;
    --typography-font-size-p-small: 12px;
    --typography-font-size-label: 16px;
    --typography-font-size-label-small: 12px;
    --typography-font-size-h5: 16px;
    --typography-font-size-h4: 24px;
    --typography-font-size-h3: 28px;
    --typography-font-size-h2: 32px;
    --typography-font-size-h1: 40px;
    --typography-line-height-body: 20px;
    --typography-line-height-p: 20px;
    --typography-line-height-label: 20px;
    --typography-line-height-label-small: 14px;
    --typography-line-height-h4: 24px;
    --typography-line-height-h3: 32px;
    --typography-line-height-h2: 40px;
    --typography-line-height-h1: 48px;

    /* controls (Base Tokens) */
    --controls-size-container-min-width: 48px;
    --controls-size-container-min-height: 48px;
    --controls-size-input-min-width: 64px;
    --controls-size-input-min-height: 48px;
    --controls-spacing-container-padding-large: var(--rem-2x);
    --controls-spacing-container-gap-large: var(--rem-2x);
    --controls-spacing-container-padding-medium: var(--rem-1x);
    --controls-spacing-container-gap-medium: var(--rem-1x);
    --controls-spacing-container-padding-small: var(--rem-0-5x);
    --controls-spacing-container-gap-small: var(--rem-0-5x);

    /* layout (Base Tokens) */
    --layout-spacing-container-padding: 32px;
    --layout-spacing-container-gap-1x: 24px;
    --layout-spacing-container-gap-2x: 32px;
    --layout-spacing-container-gap-3x: 48px;
    --layout-spacing-container-gap-4x: 64px;
  }
}

/* Mobile theme — < 640px */
@media (max-width: 639px) {
  :root,
  [data-theme='Mobile'] {
  /* typography (Base Tokens) */
    --typography-font-size-body: 16px;
    --typography-font-size-p: 16px;
    --typography-font-size-p-small: 12px;
    --typography-font-size-label: 16px;
    --typography-font-size-label-small: 12px;
    --typography-font-size-h5: 16px;
    --typography-font-size-h4: 20px;
    --typography-font-size-h3: 24px;
    --typography-font-size-h2: 28px;
    --typography-font-size-h1: 32px;
    --typography-line-height-body: 20px;
    --typography-line-height-p: 20px;
    --typography-line-height-label: 20px;
    --typography-line-height-label-small: 14px;
    --typography-line-height-h4: 20px;
    --typography-line-height-h3: 24px;
    --typography-line-height-h2: 28px;
    --typography-line-height-h1: 32px;

    /* controls (Base Tokens) */
    --controls-size-container-min-width: 40px;
    --controls-size-container-min-height: 32px;
    --controls-size-input-min-width: 64px;
    --controls-size-input-min-height: 40px;
    --controls-spacing-container-padding-large: var(--rem-2x);
    --controls-spacing-container-gap-large: var(--rem-2x);
    --controls-spacing-container-padding-medium: var(--rem-1x);
    --controls-spacing-container-gap-medium: var(--rem-1x);
    --controls-spacing-container-padding-small: var(--rem-0-5x);
    --controls-spacing-container-gap-small: var(--rem-0-5x);

    /* layout (Base Tokens) */
    --layout-spacing-container-padding: 24px;
    --layout-spacing-container-gap-1x: 16px;
    --layout-spacing-container-gap-2x: 24px;
    --layout-spacing-container-gap-3x: 32px;
    --layout-spacing-container-gap-4x: 48px;
  }
}

/* Print theme — Druck */
@media print {
  :root,
  [data-theme='Print'] {
  /* typography (Base Tokens) */
    --typography-font-size-body: 12px;
    --typography-font-size-p: 10px;
    --typography-font-size-p-small: 8px;
    --typography-font-size-label: 10px;
    --typography-font-size-label-small: 8px;
    --typography-font-size-h5: 10px;
    --typography-font-size-h4: 12px;
    --typography-font-size-h3: 16px;
    --typography-font-size-h2: 24px;
    --typography-font-size-h1: 32px;
    --typography-line-height-body: 20px;
    --typography-line-height-p: 20px;
    --typography-line-height-label: 20px;
    --typography-line-height-label-small: 12px;
    --typography-line-height-h4: 20px;
    --typography-line-height-h3: 32px;
    --typography-line-height-h2: 48px;
    --typography-line-height-h1: 64px;

    /* controls (Base Tokens) */
    --controls-size-container-min-width: 32px;
    --controls-size-container-min-height: 32px;
    --controls-size-input-min-width: 64px;
    --controls-size-input-min-height: 32px;
    --controls-spacing-container-padding-large: var(--rem-1x);
    --controls-spacing-container-gap-large: var(--rem-1x);
    --controls-spacing-container-padding-medium: var(--rem-0-5x);
    --controls-spacing-container-gap-medium: var(--rem-0-5x);
    --controls-spacing-container-padding-small: var(--rem-0-25x);
    --controls-spacing-container-gap-small: var(--rem-0-25x);

    /* layout (Base Tokens) */
    --layout-spacing-container-padding: 16px;
    --layout-spacing-container-gap-1x: 24px;
    --layout-spacing-container-gap-2x: 32px;
    --layout-spacing-container-gap-3x: 48px;
    --layout-spacing-container-gap-4x: 64px;
  }
}

/* Default theme */
[data-theme='Default'] {
/* surface (Aliases) */
  --surface-color-layer-1-light: var(--colors-white);
  --surface-color-layer-1-dark: var(--colors-black);
  --surface-color-layer-2-light: var(--colors-grey-95);
  --surface-color-layer-2-dark: var(--colors-grey-10);
  --surface-color-layer-3-light: var(--colors-grey-90);
  --surface-color-layer-3-dark: var(--colors-grey-20);
  --surface-color-layer-4-light: var(--colors-grey-80);
  --surface-color-layer-4-dark: var(--colors-grey-30);
  --surface-color-layer-5-light: var(--colors-grey-70);
  --surface-color-layer-5-dark: var(--colors-grey-40);
  --surface-color-layer-6-light: var(--colors-grey-60);
  --surface-color-layer-6-dark: var(--colors-grey-50);

  /* typography (Aliases) */
  --typography-color-text-primary-light: var(--colors-grey-10);
  --typography-color-text-primary-dark: var(--colors-grey-95);
  --typography-color-text-secondary-light: var(--colors-grey-50);
  --typography-color-text-secondary-dark: var(--colors-grey-50);

  /* Inputs (Aliases) */
  --inputs-default-light-color-input-border: var(--colors-grey-90);
  --inputs-default-light-color-input-container: var(--colors-grey-90);
  --inputs-default-light-color-input-content: var(--colors-grey-10);
  --inputs-default-dark-color-input-border: var(--colors-grey-20);
  --inputs-default-dark-color-input-container: var(--colors-grey-20);
  --inputs-default-dark-color-input-content: var(--colors-grey-95);
  --inputs-hover-light-color-input-border: var(--colors-grey-50);
  --inputs-hover-light-color-input-container: var(--colors-grey-90);
  --inputs-hover-light-color-input-content: var(--colors-grey-10);
  --inputs-hover-dark-color-input-border: var(--colors-grey-50);
  --inputs-hover-dark-color-input-container: var(--colors-grey-20);
  --inputs-hover-dark-color-input-content: var(--colors-grey-95);
  --inputs-active-light-color-input-border: var(--colors-grey-10);
  --inputs-active-light-color-input-container: var(--colors-grey-90);
  --inputs-active-light-color-input-content: var(--colors-grey-10);
  --inputs-active-dark-color-input-border: var(--colors-grey-95);
  --inputs-active-dark-color-input-container: var(--colors-grey-20);
  --inputs-active-dark-color-input-content: var(--colors-grey-95);

  /* controls (Aliases) */
  --controls-primary-default-light-color-control-border: var(--colors-grey-10);
  --controls-primary-default-light-color-control-container: var(--colors-grey-10);
  --controls-primary-default-dark-color-control-border: var(--colors-grey-95);
  --controls-primary-default-light-color-control-content: var(--colors-grey-95);
  --controls-primary-default-dark-color-control-container: var(--colors-grey-95);
  --controls-primary-default-dark-color-control-content: var(--colors-grey-10);
  --controls-secondary-default-light-color-control-border: var(--colors-grey-95);
  --controls-secondary-default-light-color-control-container: var(--colors-grey-95);
  --controls-secondary-default-light-color-control-content: var(--colors-grey-10);
  --controls-primary-hover-light-color-control-border: var(--colors-grey-20);
  --controls-primary-hover-light-color-control-container: var(--colors-grey-20);
  --controls-primary-hover-light-color-control-content: var(--colors-grey-95);
  --controls-primary-hover-dark-color-control-border: var(--colors-grey-90);
  --controls-primary-hover-dark-color-control-container: var(--colors-grey-90);
  --controls-primary-hover-dark-color-control-content: var(--colors-grey-10);
  --controls-secondary-default-dark-color-control-border: var(--colors-grey-10);
  --controls-secondary-default-dark-color-control-container: var(--colors-grey-10);
  --controls-secondary-default-dark-color-control-content: var(--colors-grey-95);
  --controls-secondary-hover-light-color-control-border: var(--colors-grey-90);
  --controls-secondary-hover-light-color-control-container: var(--colors-grey-90);
  --controls-secondary-hover-dark-color-control-border: var(--colors-grey-20);
  --controls-secondary-hover-light-color-control-content: var(--colors-grey-10);
  --controls-secondary-hover-dark-color-control-container: var(--colors-grey-20);
  --controls-secondary-hover-dark-color-control-content: var(--colors-grey-95);
}

/* Grey theme */
[data-theme='Grey'] {
/* surface (Aliases) */
  --surface-color-layer-1-light: var(--colors-grey-95);
  --surface-color-layer-1-dark: var(--colors-grey-10);
  --surface-color-layer-2-light: var(--colors-grey-90);
  --surface-color-layer-2-dark: var(--colors-grey-20);
  --surface-color-layer-3-light: var(--colors-grey-80);
  --surface-color-layer-3-dark: var(--colors-grey-30);
  --surface-color-layer-4-light: var(--colors-grey-70);
  --surface-color-layer-4-dark: var(--colors-grey-40);
  --surface-color-layer-5-light: var(--colors-grey-60);
  --surface-color-layer-5-dark: var(--colors-grey-50);
  --surface-color-layer-6-light: var(--colors-grey-50);
  --surface-color-layer-6-dark: var(--colors-grey-60);

  /* typography (Aliases) */
  --typography-color-text-primary-light: var(--colors-grey-10);
  --typography-color-text-primary-dark: var(--colors-grey-95);
  --typography-color-text-secondary-light: var(--colors-grey-50);
  --typography-color-text-secondary-dark: var(--colors-grey-50);
}

[data-theme='Grey'] {
  /* Inputs (Aliases) */
  --inputs-default-light-color-input-border: var(--colors-grey-80);
  --inputs-default-light-color-input-container: var(--colors-grey-80);
  --inputs-default-light-color-input-content: var(--colors-grey-10);
  --inputs-default-dark-color-input-border: var(--colors-grey-30);
  --inputs-default-dark-color-input-container: var(--colors-grey-30);
  --inputs-default-dark-color-input-content: var(--colors-grey-90);
  --inputs-hover-light-color-input-border: var(--colors-grey-50);
  --inputs-hover-light-color-input-container: var(--colors-grey-80);
  --inputs-hover-light-color-input-content: var(--colors-grey-10);
  --inputs-hover-dark-color-input-border: var(--colors-grey-50);
  --inputs-hover-dark-color-input-container: var(--colors-grey-30);
  --inputs-hover-dark-color-input-content: var(--colors-grey-90);
  --inputs-active-light-color-input-border: var(--colors-grey-10);
  --inputs-active-light-color-input-container: var(--colors-grey-80);
  --inputs-active-light-color-input-content: var(--colors-grey-10);
  --inputs-active-dark-color-input-border: var(--colors-grey-90);
  --inputs-active-dark-color-input-container: var(--colors-grey-30);
  --inputs-active-dark-color-input-content: var(--colors-grey-90);

  /* controls (Aliases) */
  --controls-primary-default-light-color-control-border: var(--colors-grey-10);
  --controls-primary-default-light-color-control-container: var(--colors-grey-10);
  --controls-primary-default-dark-color-control-border: var(--colors-grey-90);
  --controls-primary-default-light-color-control-content: var(--colors-grey-95);
  --controls-primary-default-dark-color-control-container: var(--colors-grey-90);
  --controls-primary-default-dark-color-control-content: var(--colors-grey-10);
  --controls-secondary-default-light-color-control-border: var(--colors-grey-90);
  --controls-secondary-default-light-color-control-container: var(--colors-grey-90);
  --controls-secondary-default-light-color-control-content: var(--colors-grey-10);
  --controls-primary-hover-light-color-control-border: var(--colors-grey-20);
  --controls-primary-hover-light-color-control-container: var(--colors-grey-20);
  --controls-primary-hover-light-color-control-content: var(--colors-grey-95);
  --controls-primary-hover-dark-color-control-border: var(--colors-grey-80);
  --controls-primary-hover-dark-color-control-container: var(--colors-grey-80);
  --controls-primary-hover-dark-color-control-content: var(--colors-grey-10);
  --controls-secondary-default-dark-color-control-border: var(--colors-grey-20);
  --controls-secondary-default-dark-color-control-container: var(--colors-grey-20);
  --controls-secondary-default-dark-color-control-content: var(--colors-grey-90);
  --controls-secondary-hover-light-color-control-border: var(--colors-grey-80);
  --controls-secondary-hover-light-color-control-container: var(--colors-grey-80);
  --controls-secondary-hover-dark-color-control-border: var(--colors-grey-30);
  --controls-secondary-hover-light-color-control-content: var(--colors-grey-10);
  --controls-secondary-hover-dark-color-control-container: var(--colors-grey-30);
  --controls-secondary-hover-dark-color-control-content: var(--colors-grey-90);
}

/* Yellow theme */
[data-theme='Yellow'] {
/* surface (Aliases) */
  --surface-color-layer-1-light: var(--colors-yellow-90);
  --surface-color-layer-1-dark: var(--colors-yellow-10);
  --surface-color-layer-2-light: var(--colors-yellow-80);
  --surface-color-layer-2-dark: var(--colors-yellow-20);
  --surface-color-layer-3-light: var(--colors-yellow-70);
  --surface-color-layer-3-dark: var(--colors-yellow-30);
  --surface-color-layer-4-light: var(--colors-yellow-60);
  --surface-color-layer-4-dark: var(--colors-yellow-40);
  --surface-color-layer-5-light: var(--colors-yellow-50);
  --surface-color-layer-5-dark: var(--colors-yellow-50);
  --surface-color-layer-6-light: var(--colors-yellow-40);
  --surface-color-layer-6-dark: var(--colors-yellow-60);

  /* typography (Aliases) */
  --typography-color-text-primary-light: var(--colors-yellow-10);
  --typography-color-text-primary-dark: var(--colors-yellow-80);
  --typography-color-text-secondary-light: var(--colors-yellow-40);
  --typography-color-text-secondary-dark: var(--colors-yellow-40);

  /* Inputs (Aliases) */
  --inputs-default-light-color-input-border: var(--colors-yellow-70);
  --inputs-default-light-color-input-container: var(--colors-yellow-70);
  --inputs-default-light-color-input-content: var(--colors-yellow-10);
  --inputs-default-dark-color-input-border: var(--colors-yellow-30);
  --inputs-default-dark-color-input-container: var(--colors-yellow-30);
  --inputs-default-dark-color-input-content: var(--colors-yellow-80);
  --inputs-hover-light-color-input-border: var(--colors-yellow-40);
  --inputs-hover-light-color-input-container: var(--colors-yellow-70);
  --inputs-hover-light-color-input-content: var(--colors-yellow-10);
  --inputs-hover-dark-color-input-border: var(--colors-yellow-40);
  --inputs-hover-dark-color-input-container: var(--colors-yellow-30);
  --inputs-hover-dark-color-input-content: var(--colors-yellow-80);
  --inputs-active-light-color-input-border: var(--colors-yellow-10);
  --inputs-active-light-color-input-container: var(--colors-yellow-70);
  --inputs-active-light-color-input-content: var(--colors-yellow-10);
  --inputs-active-dark-color-input-border: var(--colors-yellow-80);
  --inputs-active-dark-color-input-container: var(--colors-yellow-30);
  --inputs-active-dark-color-input-content: var(--colors-yellow-80);

  /* controls (Aliases) */
  --controls-primary-default-light-color-control-border: var(--colors-yellow-10);
  --controls-primary-default-light-color-control-container: var(--colors-yellow-10);
  --controls-primary-default-dark-color-control-border: var(--colors-yellow-80);
  --controls-primary-default-light-color-control-content: var(--colors-yellow-90);
  --controls-primary-default-dark-color-control-container: var(--colors-yellow-80);
  --controls-primary-default-dark-color-control-content: var(--colors-yellow-10);
  --controls-secondary-default-light-color-control-border: var(--colors-yellow-80);
  --controls-secondary-default-light-color-control-container: var(--colors-yellow-80);
  --controls-secondary-default-light-color-control-content: var(--colors-yellow-10);
  --controls-primary-hover-light-color-control-border: var(--colors-yellow-20);
  --controls-primary-hover-light-color-control-container: var(--colors-yellow-20);
  --controls-primary-hover-light-color-control-content: var(--colors-yellow-90);
  --controls-primary-hover-dark-color-control-border: var(--colors-yellow-70);
  --controls-primary-hover-dark-color-control-container: var(--colors-yellow-70);
  --controls-primary-hover-dark-color-control-content: var(--colors-yellow-10);
  --controls-secondary-default-dark-color-control-border: var(--colors-yellow-20);
  --controls-secondary-default-dark-color-control-container: var(--colors-yellow-20);
  --controls-secondary-default-dark-color-control-content: var(--colors-yellow-80);
  --controls-secondary-hover-light-color-control-border: var(--colors-yellow-70);
  --controls-secondary-hover-light-color-control-container: var(--colors-yellow-70);
  --controls-secondary-hover-dark-color-control-border: var(--colors-yellow-30);
  --controls-secondary-hover-light-color-control-content: var(--colors-yellow-10);
  --controls-secondary-hover-dark-color-control-container: var(--colors-yellow-30);
  --controls-secondary-hover-dark-color-control-content: var(--colors-yellow-80);
}

/* Green theme */
[data-theme='Green'] {
/* surface (Aliases) */
  --surface-color-layer-1-light: var(--colors-green-90);
  --surface-color-layer-1-dark: var(--colors-green-10);
  --surface-color-layer-2-light: var(--colors-green-80);
  --surface-color-layer-2-dark: var(--colors-green-20);
  --surface-color-layer-3-light: var(--colors-green-70);
  --surface-color-layer-3-dark: var(--colors-green-30);
  --surface-color-layer-4-light: var(--colors-green-60);
  --surface-color-layer-4-dark: var(--colors-green-40);
  --surface-color-layer-5-light: var(--colors-green-50);
  --surface-color-layer-5-dark: var(--colors-green-50);
  --surface-color-layer-6-light: var(--colors-green-40);
  --surface-color-layer-6-dark: var(--colors-green-60);

  /* typography (Aliases) */
  --typography-color-text-primary-light: var(--colors-green-10);
  --typography-color-text-primary-dark: var(--colors-green-90);
  --typography-color-text-secondary-light: var(--colors-green-50);
  --typography-color-text-secondary-dark: var(--colors-green-50);

  /* Inputs (Aliases) */
  --inputs-default-light-color-input-border: var(--colors-green-70);
  --inputs-default-light-color-input-container: var(--colors-green-70);
  --inputs-default-light-color-input-content: var(--colors-green-10);
  --inputs-default-dark-color-input-border: var(--colors-green-30);
  --inputs-default-dark-color-input-container: var(--colors-green-30);
  --inputs-default-dark-color-input-content: var(--colors-green-90);
  --inputs-hover-light-color-input-border: var(--colors-green-50);
  --inputs-hover-light-color-input-container: var(--colors-green-70);
  --inputs-hover-light-color-input-content: var(--colors-green-10);
  --inputs-hover-dark-color-input-border: var(--colors-green-50);
  --inputs-hover-dark-color-input-container: var(--colors-green-30);
  --inputs-hover-dark-color-input-content: var(--colors-green-90);
  --inputs-active-light-color-input-border: var(--colors-green-10);
  --inputs-active-light-color-input-container: var(--colors-green-70);
  --inputs-active-light-color-input-content: var(--colors-green-10);
  --inputs-active-dark-color-input-border: var(--colors-green-90);
  --inputs-active-dark-color-input-container: var(--colors-green-30);
  --inputs-active-dark-color-input-content: var(--colors-green-90);

  /* controls (Aliases) */
  --controls-primary-default-light-color-control-border: var(--colors-green-10);
  --controls-primary-default-light-color-control-container: var(--colors-green-10);
  --controls-primary-default-dark-color-control-border: var(--colors-green-90);
  --controls-primary-default-light-color-control-content: var(--colors-green-90);
  --controls-primary-default-dark-color-control-container: var(--colors-green-90);
  --controls-primary-default-dark-color-control-content: var(--colors-green-10);
  --controls-secondary-default-light-color-control-border: var(--colors-green-80);
  --controls-secondary-default-light-color-control-container: var(--colors-green-80);
  --controls-secondary-default-light-color-control-content: var(--colors-green-10);
  --controls-primary-hover-light-color-control-border: var(--colors-green-20);
  --controls-primary-hover-light-color-control-container: var(--colors-green-20);
  --controls-primary-hover-light-color-control-content: var(--colors-green-90);
  --controls-primary-hover-dark-color-control-border: var(--colors-green-80);
  --controls-primary-hover-dark-color-control-container: var(--colors-green-80);
  --controls-primary-hover-dark-color-control-content: var(--colors-green-10);
  --controls-secondary-default-dark-color-control-border: var(--colors-green-20);
  --controls-secondary-default-dark-color-control-container: var(--colors-green-20);
  --controls-secondary-default-dark-color-control-content: var(--colors-green-90);
  --controls-secondary-hover-light-color-control-border: var(--colors-green-70);
  --controls-secondary-hover-light-color-control-container: var(--colors-green-70);
  --controls-secondary-hover-dark-color-control-border: var(--colors-green-30);
  --controls-secondary-hover-light-color-control-content: var(--colors-green-10);
  --controls-secondary-hover-dark-color-control-container: var(--colors-green-30);
  --controls-secondary-hover-dark-color-control-content: var(--colors-green-90);
}

/* Blue theme */
[data-theme='Blue'] {
/* surface (Aliases) */
  --surface-color-layer-1-light: var(--colors-blue-90);
  --surface-color-layer-1-dark: var(--colors-blue-10);
  --surface-color-layer-2-light: var(--colors-blue-80);
  --surface-color-layer-2-dark: var(--colors-blue-20);
  --surface-color-layer-3-light: var(--colors-blue-70);
  --surface-color-layer-3-dark: var(--colors-blue-30);
  --surface-color-layer-4-light: var(--colors-blue-60);
  --surface-color-layer-4-dark: var(--colors-blue-40);
  --surface-color-layer-5-light: var(--colors-blue-50);
  --surface-color-layer-5-dark: var(--colors-blue-50);
  --surface-color-layer-6-light: var(--colors-blue-40);
  --surface-color-layer-6-dark: var(--colors-blue-60);

  /* typography (Aliases) */
  --typography-color-text-primary-light: var(--colors-blue-10);
  --typography-color-text-primary-dark: var(--colors-blue-90);
  --typography-color-text-secondary-light: var(--colors-blue-50);
  --typography-color-text-secondary-dark: var(--colors-blue-50);

  /* Inputs (Aliases) */
  --inputs-default-light-color-input-border: var(--colors-blue-70);
  --inputs-default-light-color-input-container: var(--colors-blue-70);
  --inputs-default-light-color-input-content: var(--colors-blue-10);
  --inputs-default-dark-color-input-border: var(--colors-blue-30);
  --inputs-default-dark-color-input-container: var(--colors-blue-30);
  --inputs-default-dark-color-input-content: var(--colors-blue-90);
  --inputs-hover-light-color-input-border: var(--colors-blue-50);
  --inputs-hover-light-color-input-container: var(--colors-blue-70);
  --inputs-hover-light-color-input-content: var(--colors-blue-10);
  --inputs-hover-dark-color-input-border: var(--colors-blue-50);
  --inputs-hover-dark-color-input-container: var(--colors-blue-30);
  --inputs-hover-dark-color-input-content: var(--colors-blue-90);
  --inputs-active-light-color-input-border: var(--colors-blue-10);
  --inputs-active-light-color-input-container: var(--colors-blue-70);
  --inputs-active-light-color-input-content: var(--colors-blue-10);
  --inputs-active-dark-color-input-border: var(--colors-blue-90);
  --inputs-active-dark-color-input-container: var(--colors-blue-30);
  --inputs-active-dark-color-input-content: var(--colors-blue-90);

  /* controls (Aliases) */
  --controls-primary-default-light-color-control-border: var(--colors-blue-10);
  --controls-primary-default-light-color-control-container: var(--colors-blue-10);
  --controls-primary-default-dark-color-control-border: var(--colors-blue-90);
  --controls-primary-default-light-color-control-content: var(--colors-blue-90);
  --controls-primary-default-dark-color-control-container: var(--colors-blue-90);
  --controls-primary-default-dark-color-control-content: var(--colors-blue-10);
  --controls-secondary-default-light-color-control-border: var(--colors-blue-80);
  --controls-secondary-default-light-color-control-container: var(--colors-blue-80);
  --controls-secondary-default-light-color-control-content: var(--colors-blue-10);
  --controls-primary-hover-light-color-control-border: var(--colors-blue-20);
  --controls-primary-hover-light-color-control-container: var(--colors-blue-20);
  --controls-primary-hover-light-color-control-content: var(--colors-blue-90);
  --controls-primary-hover-dark-color-control-border: var(--colors-blue-80);
  --controls-primary-hover-dark-color-control-container: var(--colors-blue-80);
  --controls-primary-hover-dark-color-control-content: var(--colors-blue-10);
  --controls-secondary-default-dark-color-control-border: var(--colors-blue-20);
  --controls-secondary-default-dark-color-control-container: var(--colors-blue-20);
  --controls-secondary-default-dark-color-control-content: var(--colors-blue-90);
  --controls-secondary-hover-light-color-control-border: var(--colors-blue-70);
  --controls-secondary-hover-light-color-control-container: var(--colors-blue-70);
  --controls-secondary-hover-dark-color-control-border: var(--colors-blue-30);
  --controls-secondary-hover-light-color-control-content: var(--colors-blue-10);
  --controls-secondary-hover-dark-color-control-container: var(--colors-blue-30);
  --controls-secondary-hover-dark-color-control-content: var(--colors-blue-90);
}


/* Paint Styles */
.white {
  background-color: var(--colors-white);
  opacity: 1;
}

.black {
  background-color: var(--colors-black);
  opacity: 1;
}

.grey-light {
  background-color: var(--colors-grey-95);
  opacity: 1;
}

.grey-mid {
  background-color: var(--colors-grey-50);
  opacity: 1;
}

.grey-dark {
  background-color: var(--colors-grey-10);
  opacity: 1;
}

.yellow-light {
  background-color: var(--colors-yellow-80);
  opacity: 1;
}

.yellow-mid {
  background-color: var(--colors-yellow-40);
  opacity: 1;
}

.yellow-dark {
  background-color: var(--colors-yellow-10);
  opacity: 1;
}

.green-light {
  background-color: var(--colors-green-90);
  opacity: 1;
}

.green-mid {
  background-color: var(--colors-green-50);
  opacity: 1;
}

.green-dark {
  background-color: var(--colors-green-10);
  opacity: 1;
}

.blue-light {
  background-color: var(--colors-blue-90);
  opacity: 1;
}

.blue-mid {
  background-color: var(--colors-blue-50);
  opacity: 1;
}

.blue-dark {
  background-color: var(--colors-blue-10);
  opacity: 1;
}