/* Stellschrauben. Alles Aussehen hängt an diesen Variablen; die Skins (/darstellung) setzen
   die --d-* Werte zur Laufzeit je Konto und Gerät. Bausteine kennen keine festen Farben, nur
   Töne, die aus den Systemfarben Canvas/CanvasText abgeleitet sind, und folgen so hell und dunkel.
   Schichten wie bei Fizzy: spätere Schicht gewinnt, egal in welcher Datei die Regel steht. */
@layer reset, grundlage, bausteine, seiten, handy;

:root {
  color-scheme: light dark;

  /* Skin-Stellschrauben (darstellung_controller.js setzt sie am <html>) */
  --d-oben: 0px;
  --d-schrift: 16px;
  --d-blase: 75%;
  --d-dichte: 3px;
  --d-rundung: 16px;
  --d-akzent: #2f6fed;

  /* Töne: aus der Textfarbe abgeleitet, damit sie in jedem Skin passen */
  --ton-1: color-mix(in srgb, CanvasText 5%, transparent);
  --ton-2: color-mix(in srgb, CanvasText 8%, transparent);
  --ton-3: color-mix(in srgb, CanvasText 12%, transparent);
  --ton-4: color-mix(in srgb, CanvasText 18%, transparent);
  --ton-5: color-mix(in srgb, CanvasText 30%, transparent);
  --grund: color-mix(in srgb, CanvasText 7%, Canvas);   /* Seitengrund, eine Stufe vom reinen Canvas weg */
  --flaeche: Canvas;                                    /* Karten, Felder, Kopfzeile */
  --feld: color-mix(in srgb, CanvasText 8%, Canvas);
  --rand: color-mix(in srgb, CanvasText 15%, transparent);
  --rand-stark: color-mix(in srgb, CanvasText 30%, transparent);
  --glas: color-mix(in srgb, CanvasText 16%, color-mix(in srgb, Canvas 72%, transparent));
  --leise: .65;

  /* Akzent-Ableitungen */
  --akzent-text: white;
  --akzent-hell: color-mix(in srgb, var(--d-akzent) 12%, transparent);
  --akzent-mittel: color-mix(in srgb, var(--d-akzent) 25%, transparent);

  /* Bedeutungsfarben und Status (fest, damit Blümchen überall gleich lesen) */
  --gut: #22c55e;
  --warnung: #eab308;
  --gefahr: #ef4444;
  --achtung: #f59e0b;
  --fluestern: #a855f7;
  --erwaehnung: #60a5fa;
  --grau: #6b7280;
  --status-online: var(--gut);
  --status-away: var(--warnung);
  --status-idle: #fde68a;
  --status-na: var(--gefahr);
  --status-weg: var(--grau);

  /* Schrift und Abstände */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --winzig: .75rem;
  --klein: .85rem;
  --normal: 1rem;
  --mittel: 1.1rem;
  --gross: 1.35rem;
  --riesig: 2rem;
  --abstand: 1rem;
  --abstand-halb: .5rem;
  --abstand-doppelt: 2rem;
  --rundung-klein: .4rem;
  --rundung: .8rem;
  --rundung-gross: 1.2rem;
  --rundung-pille: 2rem;

  /* Schatten (Stärke hängt am Schema, siehe unten) */
  --schatten-alpha: .18;
  --schatten: 0 12px 32px rgba(0, 0, 0, var(--schatten-alpha));
  --schatten-klein: 0 4px 14px rgba(0, 0, 0, calc(var(--schatten-alpha) * .7));

  /* Bewegung */
  --dauer: 150ms;
  --dauer-lang: 300ms;
  --kurve: cubic-bezier(.16, 1, .3, 1);
  --kurve-schwung: cubic-bezier(.25, 1.25, .5, 1);

  /* Höhen und Ränder */
  --leiste-hoehe: 3.6rem;
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-links: env(safe-area-inset-left, 0px);
  --sicher-rechts: env(safe-area-inset-right, 0px);
  --fokus: 2px solid var(--d-akzent);

  /* Z-Achsen */
  --z-befehle: 5;
  --z-menue-nachricht: 6;
  --z-klopf: 10;
  --z-leiste: 20;
  --z-kopf: 25;
  --z-hinweis: 30;
  --z-menue: 40;
  --z-popover: 50;

  font-family: var(--schrift);
  font-size: var(--d-schrift);
}

/* Dunkel: Karten heben sich vom Grund ab, Schatten werden kräftiger. Gilt für „wie das Gerät" (Medienabfrage)
   und für die feste Wahl (color-scheme am <html>, gesetzt vom darstellung_controller). */
@media (prefers-color-scheme: dark) {
  :root:not([style*="color-scheme: light"]) { --flaeche: color-mix(in srgb, CanvasText 6%, Canvas); --schatten-alpha: .45; }
}
:root[style*="color-scheme: dark"] { --flaeche: color-mix(in srgb, CanvasText 6%, Canvas); --schatten-alpha: .45; }