/*
 * Gestaltungs-Variablen der Aufgaben-Kiste.
 *
 * Nüchtern wie ein Werkzeug, aber warm: leicht getönter Hintergrund statt
 * reinem Weiß, im Dunkelmodus warmes Dunkelgrau statt Schwarz, eine einzige
 * Akzentfarbe. Alle anderen Stylesheets verwenden nur diese Variablen.
 */

:root {
  color-scheme: light dark;

  /* Farben – hell */
  --color-bg: #f6f1e9;            /* warmer, leicht cremiger Hintergrund */
  --color-surface: #fffcf7;       /* Karten, Leisten, Eingabefelder */
  --color-surface-sunken: #eee7dc;
  --color-text: #2b2621;
  --color-text-muted: #6d645a;
  --color-border: #e0d7c9;
  --color-accent: #b4532e;        /* Terrakotta: Knöpfe und Markierungen */
  --color-accent-hover: #9c4524;
  --color-on-accent: #ffffff;     /* Text auf Akzentfläche */
  --color-danger: #a3322a;
  --color-focus: #b4532e;

  /* Abstände (4er-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Schrift: freundliche serifenlose Systemschrift, Zahlen in gleicher Breite */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  --font-numeric: tabular-nums;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height: 1.45;

  /* Formen und Größen */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-round: 999px;
  --tap-size: 44px;               /* Mindestgröße jeder Tippfläche */
  --chip-pill-height: 40px;       /* sichtbare Höhe der Schlagwort-Pills */
  --plus-size: 56px;
  --tabbar-height: 64px;
  --content-max-width: 72rem;
  --shadow-raised: 0 2px 8px rgb(60 40 20 / 0.18);
}

/* Farben – dunkel, folgt der Einstellung des Geräts */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1f1c19;          /* warmes Dunkelgrau statt Schwarz */
    --color-surface: #2a2622;
    --color-surface-sunken: #171512;
    --color-text: #eee7dd;
    --color-text-muted: #a99f93;
    --color-border: #3d3731;
    --color-accent: #e17c53;
    --color-accent-hover: #ec916c;
    --color-on-accent: #1f1c19;
    --color-danger: #ef7b70;
    --color-focus: #e17c53;
    --shadow-raised: 0 2px 8px rgb(0 0 0 / 0.5);
  }
}

/*
 * Farbschema „Grün“ (in den Einstellungen wählbar): freundliche, gedämpfte
 * Grüntöne statt Terrakotta. Gilt über das Attribut data-theme am <html>.
 */
:root[data-theme="green"] {
  --color-bg: #eef3ea;            /* zartes Salbeigrün */
  --color-surface: #fbfdf8;
  --color-surface-sunken: #e0e9da;
  --color-text: #232a20;
  --color-text-muted: #5b6855;
  --color-border: #d2ddc9;
  --color-accent: #3f7d4e;        /* Blattgrün: Knöpfe und Markierungen */
  --color-accent-hover: #336842;
  --color-on-accent: #ffffff;
  --color-focus: #3f7d4e;
  --shadow-raised: 0 2px 8px rgb(30 50 30 / 0.18);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="green"] {
    --color-bg: #171c18;          /* dunkles Moosgrau */
    --color-surface: #212823;
    --color-surface-sunken: #111512;
    --color-text: #e3ebe0;
    --color-text-muted: #9cab98;
    --color-border: #344036;
    --color-accent: #7cc08a;
    --color-accent-hover: #93cf9f;
    --color-on-accent: #142016;
    --color-focus: #7cc08a;
    --shadow-raised: 0 2px 8px rgb(0 0 0 / 0.5);
  }
}