/* DREIBAU Design Tokens v1.2 · Light Mode ist Standard.
   Quelle der Wahrheit für Web (Next.js/Tailwind) und App (Expo/NativeWind).
   Stufe 1: Rohwerte (--db-*). Stufe 2: semantische Rollen (--bg, --text, --accent …). Komponenten nutzen nur Stufe 2.
   Dark Mode ist optional und nur per Schalter aktiv ([data-theme="dark"]), nie automatisch über die Systemeinstellung.
   Farbwelt: Orange + warmes Grau/Anthrazit. Grün, Rot, Amber nur mit Bedeutung. Kein Blau. Schwarz nicht als Fläche. */

:root {
  color-scheme: light;

  /* ── Marke ─────────────────────────────────────────── */
  --db-orange-50:  #fff6ee;
  --db-orange-100: #ffe9d6;
  --db-orange-200: #fbd2ae;
  --db-orange-500: #f07300;   /* Markenorange: Hauptknopf, Aktivzustände, Logo */
  --db-orange-600: #d96500;   /* Hover */
  --db-orange-700: #b34d00;   /* Orange als Text auf Hell (5,3 : 1) */
  --db-amber-100:  #fff4d1;
  --db-amber-500:  #f5a800;
  --db-amber-800:  #8a6200;   /* Amber als Text (5,5 : 1) */

  /* ── Warmes Grau / Anthrazit ───────────────────────── */
  --db-neutral-0:   #ffffff;
  --db-neutral-25:  #fbfaf8;
  --db-neutral-50:  #f7f6f3;  /* Seitenhintergrund */
  --db-neutral-100: #eeede9;  /* abgesenkte Flächen */
  --db-neutral-200: #e4e2dd;  /* Rahmen */
  --db-neutral-300: #d2cfc9;  /* starke Rahmen */
  --db-neutral-500: #5c6166;  /* Nebentext (6,3 : 1 auf Weiß) */
  --db-neutral-700: #3d4247;
  --db-neutral-800: #2b2f33;  /* Anthrazit: Text (13,5 : 1) */
  --db-neutral-900: #1d2023;  /* Text auf Orange */

  /* ── Bedeutung ─────────────────────────────────────── */
  --db-green-100: #e7f5ec;  --db-green-600: #1f7a45;
  --db-red-100:   #fdebe1;  --db-red-600:   #b03a0a;

  /* ── Typografie ────────────────────────────────────── */
  --font-brand:   "Saira", system-ui, sans-serif;                          /* nur Wortmarke */
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;   /* Überschriften, Kennzahlen */
  --font-ui:      "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;     /* OZ, Beträge in Tabellen, Zeiten */
  --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.5rem;
  --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.5; --tracking-label: 0.07em;

  /* ── Raum, Form, Tiefe, Bewegung ───────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-18: 72px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(43, 47, 51, 0.06);
  --shadow-2: 0 8px 24px rgba(43, 47, 51, 0.10);
  --shadow-3: 0 18px 44px rgba(43, 47, 51, 0.16);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --touch-min: 48px; --touch-capture: 168px;

  /* ── Semantische Rollen (Light, Standard) ──────────── */
  --bg:             var(--db-neutral-50);
  --surface:        var(--db-neutral-0);
  --surface-sunken: var(--db-neutral-100);
  --nav-bg:         var(--db-neutral-0);      /* Seitenleiste hell, nicht schwarz */
  --nav-active-bg:  var(--db-orange-50);
  --nav-active-fg:  var(--db-orange-700);
  --border:         var(--db-neutral-200);
  --border-strong:  var(--db-neutral-300);
  --text:           var(--db-neutral-800);
  --text-muted:     var(--db-neutral-500);
  --accent:         var(--db-orange-500);
  --accent-hover:   var(--db-orange-600);
  --accent-soft:    var(--db-orange-100);
  --accent-text:    var(--db-orange-700);
  --on-accent:      var(--db-neutral-900);
  --focus:          var(--db-orange-500);
  --success: var(--db-green-600);  --success-soft: var(--db-green-100);
  --warning: var(--db-amber-800);  --warning-soft: var(--db-amber-100);
  --danger:  var(--db-red-600);    --danger-soft:  var(--db-red-100);
  --neutral: var(--db-neutral-700); --neutral-soft: var(--db-neutral-100);   /* Hinweise: grau statt blau */
  /* Die drei Versprechen */
  --win:  var(--db-orange-500); --win-soft:  var(--db-orange-100); --win-text:  var(--db-orange-700);  /* Mehr gewinnen */
  --keep: var(--db-amber-500);  --keep-soft: var(--db-amber-100);  --keep-text: var(--db-amber-800);   /* Mehr behalten */
  --less: var(--db-green-600);  --less-soft: var(--db-green-100);  --less-text: var(--db-green-600);   /* Weniger Aufwand */
}

/* Optionaler Dark Mode: nur per Schalter, gedämpftes Anthrazit statt Schwarz */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f2225; --surface: #272a2e; --surface-sunken: #1a1c1f; --nav-bg: #272a2e;
  --nav-active-bg: #3a2b1d; --nav-active-fg: #ffa04d;
  --border: #373b40; --border-strong: #464b51;
  --text: #ecebe7; --text-muted: #a9aeb3;
  --accent: #ff8a24; --accent-hover: #ff9c45; --accent-soft: #3a2b1d; --accent-text: #ffa04d; --on-accent: #1d2023; --focus: #ff8a24;
  --success: #6fcf97; --success-soft: #1d3326; --warning: #f5c542; --warning-soft: #3a3216;
  --danger: #ff8f70; --danger-soft: #3d2219; --neutral: #c9cdd1; --neutral-soft: #2f3337;
  --win: #ff8a24; --win-soft: #3a2b1d; --win-text: #ffa04d;
  --keep: #f5b82e; --keep-soft: #3a3216; --keep-text: #f5c542;
  --less: #6fcf97; --less-soft: #1d3326; --less-text: #6fcf97;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 8px 24px rgba(0,0,0,.4); --shadow-3: 0 18px 44px rgba(0,0,0,.45);
}