/* ==========================================================================
   Design Tokens · GridFlex Website
   Automatisch erzeugt aus src/_data/farben.js. Nicht von Hand bearbeiten.

   Zwei Faelle derselben Rollen:
     :root                       dunkel, die Startfassung
     [data-modus="hell"]         hell, beige statt weiss
     .auf-hell / .auf-dunkel     Inseln, die unabhaengig vom Modus gelten

   Alle Bausteine und alle Effekte kennen nur Rollen, nie feste Werte.
   ========================================================================== */

:root, [data-modus="dunkel"] {
  --primary: #63B184;
  --primary-dark: #235A3E;
  --primary-light: #97D3B0;
  --primary-tint: #23282A;
  --secondary: #9BA3A4;
  --accent: #C9855A;
  --accent-light: #E3AC82;
  --bg: #191B1C;
  --bg-alt: #151718;
  --surface: #202324;
  --surface-elevated: #272A2B;
  --inverse: #0F1011;
  --text: #ECEDEA;
  --text-2: #A8ACA9;
  --text-inverse: #ECEDEA;
  --border: #343839;
  --muted: #7A7E7C;
  --success: #63B184;
  --verlauf: linear-gradient(180deg, #191B1C 0%, #23282A 100%);
  --lg-sym: #D08F65;
  --lg-grid: #D08F65;
  --lg-flex: #8CC1A6;
  --lg-sub: #A7C4B4;
  --lg-punkt: #7FB99C;
  --fx-nacht: 1;
  color-scheme: dark;
}

[data-modus="hell"] {
  --primary: #1E513C;
  --primary-dark: #143A2A;
  --primary-light: #6C9C83;
  --primary-tint: #E4EAE3;
  --secondary: #2C3431;
  --accent: #A8633A;
  --accent-light: #C98B5C;
  --bg: #F2EEE4;
  --bg-alt: #EAE5D8;
  --surface: #F8F5EE;
  --surface-elevated: #FFFCF6;
  --inverse: #182220;
  --text: #1A211D;
  --text-2: #59635C;
  --text-inverse: #F2EEE4;
  --border: #D9D2C2;
  --muted: #8B8577;
  --success: #2E7D4F;
  --verlauf: linear-gradient(180deg, #F2EEE4 0%, #E4EAE3 100%);
  --lg-sym: #A8633A;
  --lg-grid: #A8633A;
  --lg-flex: #1E513C;
  --lg-sub: #1E513C;
  --lg-punkt: #1E513C;
  --fx-nacht: 0;
  color-scheme: light;
}

/* Inseln: ein heller Block im dunklen Modus und umgekehrt */
.auf-hell {
  --primary: #1E513C;
  --primary-dark: #143A2A;
  --primary-light: #6C9C83;
  --primary-tint: #E4EAE3;
  --secondary: #2C3431;
  --accent: #A8633A;
  --accent-light: #C98B5C;
  --bg: #F2EEE4;
  --bg-alt: #EAE5D8;
  --surface: #F8F5EE;
  --surface-elevated: #FFFCF6;
  --inverse: #182220;
  --text: #1A211D;
  --text-2: #59635C;
  --text-inverse: #F2EEE4;
  --border: #D9D2C2;
  --muted: #8B8577;
  --success: #2E7D4F;
  --lg-sym: #A8633A;
  --lg-grid: #A8633A;
  --lg-flex: #1E513C;
  --lg-sub: #1E513C;
  --lg-punkt: #1E513C;
  --fx-nacht: 0;
}
.auf-dunkel {
  --primary: #63B184;
  --primary-dark: #235A3E;
  --primary-light: #97D3B0;
  --primary-tint: #23282A;
  --secondary: #9BA3A4;
  --accent: #C9855A;
  --accent-light: #E3AC82;
  --bg: #191B1C;
  --bg-alt: #151718;
  --surface: #202324;
  --surface-elevated: #272A2B;
  --inverse: #0F1011;
  --text: #ECEDEA;
  --text-2: #A8ACA9;
  --text-inverse: #ECEDEA;
  --border: #343839;
  --muted: #7A7E7C;
  --success: #63B184;
  --lg-sym: #D08F65;
  --lg-grid: #D08F65;
  --lg-flex: #8CC1A6;
  --lg-sub: #A7C4B4;
  --lg-punkt: #7FB99C;
  --fx-nacht: 1;
}