/* Farbthemen. Die App setzt ihre Farben nur noch ueber diese Variablen, das
   Layout bleibt in allen Themen identisch - es aendert sich die Palette.
   Gewaehlt wird im Profil, gespeichert pro Geraet in localStorage; ohne
   Auswahl gilt "sand". */

:root,
[data-theme="sand"] {
  color-scheme: light;

  --bg: #e6d9c0;              /* Seitenhintergrund */
  --bg-glow: #f5ead8;         /* heller Verlauf oben */
  --paper: #f9f4ed;           /* Karten */
  --paper-2: #ebddc5;         /* zweite Flaeche */
  --paper-3: #eee7db;         /* Chips, kleine Knoepfe */
  --paper-bright: #fbf7f0;    /* Papier der Landingpage */
  --sheet: #f5ead8;           /* Bottom-Sheets */

  --ink: #201e1d;             /* Fliesstext */
  --ink-2: #474238;
  --ink-3: #645c50;
  --ink-4: #82796a;           /* Meta-Angaben */
  --ink-5: #a19786;
  --ink-6: #c0b6a5;
  --ink-rgb: 32, 30, 29;      /* Basis fuer Linien und Raender */
  --shadow-rgb: 46, 43, 37;
  --hair: rgba(130, 121, 106, .35);
  --overlay: rgba(32, 30, 29, .45);

  --accent: #c67139;          /* Hauptaktion */
  --accent-hover: #b2622d;
  --accent-soft: #d67f48;
  --accent-ink: #8c491a;      /* Akzent als Text */
  --tape: rgba(214, 127, 72, .26);

  --ok: #8fa073;              /* erledigt */
  --ok-soft: #aebf92;
  --ok-deep: #728157;
  --ok-ink: #56633f;
  --ok-ink-2: #3d472b;
  --ok-bg: #f0fae1;
  --ok-bg-2: #e1eecc;

  --warn-bg: #ffe1d0;
  --toast-bg: #2e2b25;
  --toast-fg: #f9f4ed;
  --toast-line: rgba(249, 244, 237, .35);
}

/* Kuehles Blau, gleiche Helligkeitsstufen wie Sand. */
[data-theme="meer"] {
  color-scheme: light;

  --bg: #cfdce4;
  --bg-glow: #e7f0f5;
  --paper: #f4f9fb;
  --paper-2: #dceaf1;
  --paper-3: #e4edf2;
  --paper-bright: #f8fbfc;
  --sheet: #e7f0f5;

  --ink: #16202a;
  --ink-2: #33424e;
  --ink-3: #4d5f6c;
  --ink-4: #6d8190;
  --ink-5: #93a6b3;
  --ink-6: #b6c6d0;
  --ink-rgb: 22, 32, 42;
  --shadow-rgb: 24, 42, 56;
  --hair: rgba(109, 129, 144, .35);
  --overlay: rgba(16, 28, 38, .45);

  --accent: #2f77a8;
  --accent-hover: #26648f;
  --accent-soft: #4a90bf;
  --accent-ink: #1d5a83;
  --tape: rgba(74, 144, 191, .24);

  --ok: #4f9481;
  --ok-soft: #7ab3a3;
  --ok-deep: #3d7a69;
  --ok-ink: #2f6a5a;
  --ok-ink-2: #1f4a3f;
  --ok-bg: #e2f4ee;
  --ok-bg-2: #cfe9e0;

  --warn-bg: #dbe9f2;
  --toast-bg: #1b2b36;
  --toast-fg: #f1f7fa;
  --toast-line: rgba(241, 247, 250, .35);
}

/* Warmes Rosé mit Pflaume als Akzent. */
[data-theme="rose"] {
  color-scheme: light;

  --bg: #e7d5da;
  --bg-glow: #f7ebef;
  --paper: #fdf6f8;
  --paper-2: #f0dfe4;
  --paper-3: #f2e6e9;
  --paper-bright: #fefafb;
  --sheet: #f7ebef;

  --ink: #241a1e;
  --ink-2: #4a3a40;
  --ink-3: #665058;
  --ink-4: #8a7078;
  --ink-5: #ab9199;
  --ink-6: #cbb4bb;
  --ink-rgb: 36, 26, 30;
  --shadow-rgb: 58, 38, 46;
  --hair: rgba(138, 112, 120, .35);
  --overlay: rgba(36, 26, 30, .45);

  --accent: #9c4f74;
  --accent-hover: #863f61;
  --accent-soft: #b56b8d;
  --accent-ink: #7d3a58;
  --tape: rgba(181, 107, 141, .24);

  --ok: #6f8f6a;
  --ok-soft: #92ac8d;
  --ok-deep: #5b7856;
  --ok-ink: #4c6748;
  --ok-ink-2: #35492f;
  --ok-bg: #eef5ea;
  --ok-bg-2: #dfead9;

  --warn-bg: #f6dde7;
  --toast-bg: #2c2024;
  --toast-fg: #fbf2f5;
  --toast-line: rgba(251, 242, 245, .35);
}

/* Dunkles Thema: warmes Anthrazit, Akzent kraeftig genug fuer weisse Schrift. */
[data-theme="nacht"] {
  color-scheme: dark;

  --bg: #17140f;
  --bg-glow: #221d17;
  --paper: #262019;
  --paper-2: #2f2820;
  --paper-3: #3a3129;
  --paper-bright: #2b241d;
  --sheet: #221d17;

  --ink: #f4ece1;
  --ink-2: #ded3c5;
  --ink-3: #c0b4a4;
  --ink-4: #9c9082;
  --ink-5: #7d7264;
  --ink-6: #5e564b;
  --ink-rgb: 244, 236, 225;
  --shadow-rgb: 0, 0, 0;
  --hair: rgba(244, 236, 225, .2);
  --overlay: rgba(0, 0, 0, .62);

  --accent: #c06a30;
  --accent-hover: #d47c40;
  --accent-soft: #d08348;
  --accent-ink: #e8a068;
  --tape: rgba(208, 131, 72, .3);

  --ok: #6f8558;
  --ok-soft: #8aa072;
  --ok-deep: #9cb583;
  --ok-ink: #b3cb96;
  --ok-ink-2: #cde0b4;
  --ok-bg: #232c1a;
  --ok-bg-2: #2c3722;

  --warn-bg: #4a2f1d;
  --toast-bg: #3a322a;
  --toast-fg: #f4ece1;
  --toast-line: rgba(244, 236, 225, .35);
}