/* tokens.css — die Farb- und Maßsprache von Minsaga Pipe (#344).
 *
 * WÖRTLICH aus dem Design-Handoff übernommen
 * (.import/design_handoff_minsaga_ds/ui_kits/app/index.html). Dieselbe
 * Quelle speist die iOS-App über MinsagaColors/MinsagaMetrics — deshalb
 * sehen Pipe und App gleich aus, und zwar ohne dass jemand Werte
 * abschreibt.
 *
 * Ebenen wie dort: L1 Paletten, L2 Verlauf, L3 semantische Rollen,
 * L4 Komponenten. IN KOMPONENTEN NUR L3 UND L4 — das nennt das Handoff
 * „den wichtigsten Punkt beim Portieren", und es ist schon zweimal
 * verletzt worden.
 */

:root {
  /* L1 — Stone */
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
  --stone-800:#292524; --stone-900:#1c1917;
  /* L1 — Slate */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  /* L1 — Nordlicht */
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7;
  --cyan-400:#22d3ee; --cyan-500:#06b6d4;
  --indigo-500:#6366f1; --indigo-600:#4f46e5;
  /* L1 — Funktion */
  --emerald-500:#10b981; --emerald-600:#059669;
  --amber-500:#f59e0b; --amber-600:#d97706;
  --rose-500:#f43f5e; --rose-600:#e11d48;
  --fuchsia-500:#d946ef; --fuchsia-600:#c026d3;
  /* L2 — Nordlicht-Gradient */
  --gradient-nordlicht: linear-gradient(135deg, var(--sky-500) 0%, var(--cyan-400) 50%, var(--indigo-500) 100%);
  /* L3 — Surfaces */
  --surface-page:        var(--stone-50);
  --surface-card-raised: #ffffff;
  --surface-card-flat:   var(--stone-50);
  --surface-sunken:      var(--stone-100);
  /* L3 — Text */
  --text-primary:  var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --text-on-brand: #ffffff;
  /* L3 — Borders */
  --border-structural:        var(--slate-200);
  --border-structural-strong: var(--slate-300);
  /* L3 — Brand/Aktion */
  --brand-gradient: var(--gradient-nordlicht);
  /* L3 — Funktion */
  --fn-success: var(--emerald-600); --fn-success-bg:#ecfdf5;
  --fn-warning: var(--amber-600);   --fn-warning-bg:#fffbeb;
  --fn-error:   var(--rose-600);    --fn-error-bg:#fff1f2;
  /* „gefahr" hieß in den Komponenten --fn-danger und war nirgends
     definiert: Der Löschknopf bekam gar keinen Hintergrund. */
  --fn-danger:  var(--fn-error);    --fn-danger-bg: var(--fn-error-bg);
  /* L3 — Coach (AI) */
  --coach-fg:     var(--fuchsia-600);
  --coach-bg:     #fdf4ff;
  --coach-ring:   #f5d0fe;
  --coach-accent: #a21caf;
  /* L4 — AppShell */
  --nav-active-fg:   #0369a1;
  --nav-inactive-fg: var(--slate-500);
  --nav-surface:     #ffffff;
  --nav-border:      var(--slate-200);
  --avatar-bg:       var(--stone-100);
  --avatar-border:   var(--stone-200);
  --avatar-fg:       var(--stone-700);
  --device-bezel-outer: var(--slate-900);
  --device-bezel-inner: var(--slate-700);
  --device-backdrop:    var(--slate-200);
  /* L4 — Run Screen */
  --run-bg:            var(--slate-900);
  --run-aurora-cyan:   rgba(34,211,238,0.35);
  --run-aurora-indigo: rgba(99,102,241,0.35);
  --run-aurora-sky:    rgba(14,165,233,0.30);
  --run-glass:         rgba(255,255,255,0.08);
  --run-glass-border:  rgba(255,255,255,0.10);
  --run-fg:            #ffffff;
  --run-fg-muted:      rgba(255,255,255,0.55);
  --run-fg-faint:      rgba(255,255,255,0.35);
  --run-coach-eyebrow: rgba(217,70,239,0.90);
  /* L3 — Shadows */
  --shadow-card-raised: 0 10px 40px -4px rgba(15,23,42,0.04);
  --shadow-card-hover:  0 18px 50px -6px rgba(15,23,42,0.08);
  /* L3 — Radii */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px;
  --radius-card:32px; --radius-xl:40px; --radius-pill:9999px;
  /* L3 — Spacing (4px grid) */
  --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-12:48px;
  /* L3 — Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
  /* L3 — Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-quick:120ms; --duration-base:220ms; --duration-slow:420ms;
  /* Pipe-eigene Rollen — es gibt Dinge, die eine Verwaltungsoberfläche
     braucht und eine Trainings-App nicht. */
  --pipe-header-h: 56px;
  --pipe-nav-h: 60px;
  --pipe-max: 72rem;
  --pipe-lauf: var(--sky-500);
  /* Der Zustand einer Zeile ist eine 3 px schmale Kante links, keine
     eingefärbte Fläche. Vorher lag ein Amber-Schleier auf jeder noch
     nicht beurteilten Zeile — bei 179 offenen Ansagen wurde daraus eine
     pfirsichfarbene Wand, in der kein Grün mehr auffiel. Farbe wirkt
     nur, solange sie selten ist.

     „Offen" ist ausdrücklich neutral: noch nicht angehört ist kein
     Fehler, und Warnfarbe für den Normalzustand ist ein Fehlalarm, den
     man nach zehn Minuten nicht mehr sieht. */
  --pipe-offen: var(--slate-300);
  --pipe-gut: var(--emerald-500);
  --pipe-beanstandet: var(--rose-500);
  --pipe-warn: var(--fn-warning);
  --pipe-kante: 3px;
}

/* Dunkel: dieselbe Ableitung wie in der App (Stone/Slate invertiert). */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: var(--stone-900);
    --surface-card-raised: var(--stone-800);
    --surface-card-flat: var(--stone-900);
    --surface-sunken: var(--stone-800);
    --text-primary: var(--slate-100);
    --text-body: var(--slate-300);
    --text-muted: var(--slate-400);
    --text-faint: var(--slate-500);
    --border-structural: var(--slate-700);
    --border-structural-strong: var(--slate-600);
    --nav-surface: var(--stone-900);
    --nav-active-fg: var(--sky-400);
    --pipe-offen: var(--slate-600);
    --fn-success-bg: color-mix(in srgb, var(--emerald-500) 16%, transparent);
    --fn-warning-bg: color-mix(in srgb, var(--amber-500) 16%, transparent);
    --shadow-card-raised: 0 10px 40px -4px rgba(0,0,0,.35);
  }
}