/* Design-Token aller Heim-Apps (iOS-Stil): Farben hell und dunkel, Schrift, Radien, Listenfarben.
   Eine App lädt diese Datei vor ihrem eigenen Stylesheet und setzt nur ihren Akzent:
     :root { --app-accent: #ff3b30; --app-accent-soft: rgba(255, 59, 48, 0.12); --app-accent-dark: #ff453a; --app-accent-soft-dark: rgba(255, 69, 58, 0.2); }
   Dunkelmodus: automatisch nach System, erzwungen über data-theme="dark" bzw. "light" am Wurzelelement. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  --accent: var(--app-accent, #007aff);
  --accent-soft: var(--app-accent-soft, rgba(0, 122, 255, 0.12));
  --bg: #ffffff;
  --bg-grouped: #f2f2f7;
  --card: #ffffff;
  --fill: rgba(120, 120, 128, 0.14);
  --fill-2: rgba(120, 120, 128, 0.22);
  --text: #000000;
  --text-2: rgba(60, 60, 67, 0.6);
  --text-3: rgba(60, 60, 67, 0.3);
  --sep: rgba(60, 60, 67, 0.2);
  --bar: rgba(249, 249, 249, 0.86);
  --bar-border: rgba(0, 0, 0, 0.12);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  --btn-border: #c7c7cc;
  --tab-h: 50px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --gutter: 16px;
  --radius: 10px;
  --c-red: #ff3b30; --c-orange: #ff9500; --c-yellow: #ffcc00; --c-green: #34c759; --c-teal: #30b0c7; --c-lightblue: #5ac8fa;
  --c-blue: #007aff; --c-indigo: #5856d6; --c-purple: #af52de; --c-pink: #ff2d55; --c-brown: #a2845e; --c-gray: #8e8e93; --c-dark: #1c1c1e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: var(--app-accent-dark, #0a84ff);
    --accent-soft: var(--app-accent-soft-dark, rgba(10, 132, 255, 0.2));
    --bg: #000000;
    --bg-grouped: #000000;
    --card: #1c1c1e;
    --fill: rgba(120, 120, 128, 0.24);
    --fill-2: rgba(120, 120, 128, 0.36);
    --text: #ffffff;
    --text-2: rgba(235, 235, 245, 0.6);
    --text-3: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.6);
    --bar: rgba(22, 22, 24, 0.86);
    --bar-border: rgba(255, 255, 255, 0.14);
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    --btn-border: #4f4f4f;
    --c-red: #ff453a; --c-orange: #ff9f0a; --c-yellow: #ffd60a; --c-green: #30d158; --c-teal: #40c8e0; --c-lightblue: #64d2ff;
    --c-blue: #0a84ff; --c-indigo: #5e5ce6; --c-purple: #bf5af2; --c-pink: #ff375f; --c-brown: #ac8e68; --c-gray: #98989d; --c-dark: #8e8e93;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: var(--app-accent-dark, #0a84ff);
  --accent-soft: var(--app-accent-soft-dark, rgba(10, 132, 255, 0.2));
  --bg: #000000;
  --bg-grouped: #000000;
  --card: #1c1c1e;
  --fill: rgba(120, 120, 128, 0.24);
  --fill-2: rgba(120, 120, 128, 0.36);
  --text: #ffffff;
  --text-2: rgba(235, 235, 245, 0.6);
  --text-3: rgba(235, 235, 245, 0.3);
  --sep: rgba(84, 84, 88, 0.6);
  --bar: rgba(22, 22, 24, 0.86);
  --bar-border: rgba(255, 255, 255, 0.14);
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  --btn-border: #4f4f4f;
  --c-red: #ff453a; --c-orange: #ff9f0a; --c-yellow: #ffd60a; --c-green: #30d158; --c-teal: #40c8e0; --c-lightblue: #64d2ff;
  --c-blue: #0a84ff; --c-indigo: #5e5ce6; --c-purple: #bf5af2; --c-pink: #ff375f; --c-brown: #ac8e68; --c-gray: #98989d; --c-dark: #8e8e93;
}