/* INGOS Design Framework — Tokens (Single-Source).
   Einbinden: <link rel="stylesheet" href="/ingos/current/ingos-tokens.css">
   Ebenen: L1 primitive → L2 semantic → L3 component. Apps nutzen NUR L2/L3 + --ingos-accent*.
   Die LEGACY-ALIASE bilden die heutigen App-Tokennamen 1:1 auf identische Werte ab,
   damit bestehende Apps risikofrei migrieren (kein visueller Bruch). Nach Migration entfernen.
   Werte verifiziert gegen app-backup.html :root (Dark) + Light-Brand #7808d1. */

/* Globaler Reset — border-box, damit padding/border NICHT zur Höhe/Breite addieren
   (sonst werden z.B. .navitem mit min-height:44px + padding zu 62px). Backup hat das
   schon inline (*{box-sizing:border-box}); hier zentral fürs Framework. */
*, *::before, *::after { box-sizing: border-box; }

/* Hausschrift Blender (Framework-eigen — jede App erbt sie, keine lokale @font-face mehr nötig). */
@font-face { font-family: "Blender"; font-weight: 400; font-style: normal; font-display: swap; src: url("/vendor/fonts/Blender-Book.woff2") format("woff2"); }
@font-face { font-family: "Blender"; font-weight: 500; font-style: normal; font-display: swap; src: url("/vendor/fonts/Blender-Medium.woff2") format("woff2"); }
/* Dunkle Grundfläche zentral: verhindert weißen UA-Default-Canvas/Flash, bevor JS das Chrome rendert
   (Apps, die Tokens nur über innere Elemente konsumieren — z.B. app-phone — hatten sonst weißen
   Blitz/Rahmen beim Laden). theme-light setzt --ingos-bg bereits hell. Apps mit eigenem body-bg
   (app-backup, os.html) gewinnen durch Reihenfolge — unverändert. */
html { color-scheme: dark; background: var(--ingos-bg); }
html.theme-light { color-scheme: light; }
/* Body-Basis = Backup 1:1: Blender-Stack OHNE system-ui (sonst andere Swap-Fallback-Schrift) + Antialiasing. */
body { font-family: "Blender", -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; background: var(--ingos-bg); }

:root {
  /* ── L1 PRIMITIVE (nie direkt in Apps referenzieren) ── */
  --ingos-indigo-600: #4f46e5;
  --ingos-violet-600: #9333ea;
  --ingos-purple-500: #a855f7;
  --ingos-violet-light: #7808d1;        /* Brand im Light-Mode */
  --ingos-ink-900: #ece9f5;
  --ingos-ink-600: #a39fb5;
  --ingos-ink-500: #9aa0b4;
  --ingos-green-400: #34d399;
  --ingos-amber-400: #fbbf24;
  --ingos-night-950: #090a10;
  --ingos-radius-pill: 9999px;
  --ingos-radius-card: 15px;
  --ingos-space-1: 4px;
  --ingos-space-2: 8px;
  --ingos-space-3: 12px;
  --ingos-space-4: 16px;

  /* ── L2 SEMANTIC (Apps nutzen NUR diese) ── */
  --ingos-bg: var(--ingos-night-950);
  --ingos-surface: rgba(20, 18, 32, .55);
  --ingos-surface-2: rgba(255, 255, 255, .06);   /* harmonisiert (os=.06, app-backup=.05→.06 bei Migration; 1% Alpha, imperceptibel) */
  --ingos-line: rgba(255, 255, 255, .10);
  --ingos-line-2: rgba(255, 255, 255, .16);
  --ingos-text: var(--ingos-ink-900);
  --ingos-text-muted: var(--ingos-ink-600);
  --ingos-accent: var(--ingos-purple-500);
  --ingos-accent-rgb: 168 85 247;        /* für rgb(var(--ingos-accent-rgb) / .16) */
  --ingos-ok: var(--ingos-green-400);
  --ingos-warn: var(--ingos-amber-400);
  --ingos-running: var(--ingos-purple-500);
  --ingos-muted: var(--ingos-ink-500);
  --ingos-grad-from: var(--ingos-indigo-600);
  --ingos-grad-to: var(--ingos-violet-600);
  --ingos-brand-gradient: linear-gradient(90deg, var(--ingos-indigo-600), var(--ingos-violet-600));

  /* ── L3 COMPONENT ── */
  --ingos-card-bg: var(--ingos-surface);
  --ingos-card-radius: var(--ingos-radius-card);
  --ingos-btn-radius: var(--ingos-radius-pill);
  --ingos-nav-active-bg: rgb(var(--ingos-accent-rgb) / .16);

  /* ── LEGACY-ALIASE (heutige App-Tokennamen, identische Werte — Migrations-Brücke) ── */
  --bg: var(--ingos-bg);
  --glass: var(--ingos-surface);
  --glass-2: var(--ingos-surface-2);
  --line: var(--ingos-line);
  --line-2: var(--ingos-line-2);
  --ink: var(--ingos-text);
  --ink-dim: var(--ingos-text-muted);
  --ok: var(--ingos-ok);
  --warn: var(--ingos-warn);
  --run: var(--ingos-running);
  --none: var(--ingos-muted);
  --grad-from: var(--ingos-grad-from);
  --grad-to: var(--ingos-grad-to);
  --brand: var(--ingos-accent);
  --ingos-primary: var(--ingos-accent);
  --ingos-primary-gradient: var(--ingos-brand-gradient);   /* Admin-Monolith-Alias (Forward-Compat für die spätere index.html-Migration) */
}

/* Light-Mode (INGOS-Figma-Palette): Overrides der SEMANTIC-Tokens; die Legacy-Aliase
   (glass, ink, grad-from/to, brand …) folgen automatisch. Werte 1:1 aus os.html L330-335
   (erster Consumer, Phase 1), gegen die heutige os-Light-Optik verifiziert. */
html.theme-light {
  --ingos-bg: #f8f8f8;                          /* Figma-Light-Hintergrund (kanonisch) */
  --ingos-accent: var(--ingos-violet-light);   /* #7808d1 */
  --ingos-accent-rgb: 120 8 209;               /* #7808d1 — sonst bleiben rgb(var(--ingos-accent-rgb)/.x)-Flächen im Dark-Lila */
  --ingos-grad-from: #7808d1;
  --ingos-grad-to: #b06bff;
  /* Light-Surface: weiche Marken-Lavendel-Fläche statt stark Weiß (alter Bug rgba(255,255,255,.72)),
     aber nur SANFT getönt — weicher Übergang BG→Box (wie Dark schwebend), keine harte Kante.
     Gilt zentral für Phone + Backup. */
  --ingos-surface: #f4f4f7;
  --ingos-surface-2: rgba(31, 22, 40, .045);
  --ingos-line: rgba(31, 22, 40, .10);
  --ingos-line-2: rgba(31, 22, 40, .18);
  --ingos-text: #2a213d;
  --ingos-text-muted: #5f5f5f;
  /* Status-Farben Light (Figma-Palette, 1:1 aus app-backup.html L1259) */
  --ingos-ok: #0a9d6e;
  --ingos-warn: #c2740a;
  --ingos-running: #7808d1;
  --ingos-muted: #9b94a8;
}