/* ============================================================
   Loma Design System v2 Tokens — „App-Grade"
   Kanonische Quelle für v04-pitch und alle späteren Stände.
   v1 (tokens.css) bleibt unverändert für eingefrorene Versionen
   (v03-cml und älter, die ../design-system/tokens.css live linken).
   Promotion v2 → tokens.css erst nach Johan-Brand-Sign-off (AP6-Ära).

   Referenz-Board (AP1.5, final 2026-06-10, Chris):
   How We Feel · Revolut · Tiimo · Opal · Copilot Money · TK-App.
   Stil-Familie: Off-White-Grund, weiße Karten mit Elevation statt
   Borders, 16px-Radien, Inter als Produktstimme mit selbstbewussten
   Zahlen, Fraunces nur Brand-Akzent, Bereichsfarbe als Icon-Tile/Tint.
   ============================================================ */

:root {
  /* Brand core — Hexes stabil (Logo/Brand-Assets), Cream ist ab v2
     KEINE Flächenfarbe mehr, nur noch Brand-Asset-Farbe. */
  --loma-brand-cream: #f2e3ce;
  --loma-brand-sage: #81907d;
  --loma-brand-sage-dark: #4f5c4e;
  --loma-brand-terracotta: #df6547;
  --loma-brand-terracotta-soft: #fbe7df; /* warme Terracotta-Wäsche (Brand-Akzent auf Off-White, F1); Icon/Text darauf = --loma-action-warm (AA) */
  --loma-brand-ink: #1b1a18;

  /* Product areas — Haupt-Hexes semantisch fix (nie tauschen).
     Soft-Tints neu kalibriert: saubere helle Tints, die auf Weiß
     und Off-White sitzen (Icon-Tiles, Karten-Wäschen, Chips). */
  --loma-area-pflegegrad: #c26a2c;
  --loma-area-pflegegrad-text: #8a4b1f;
  --loma-area-pflegegrad-soft: #f7e8d9;
  --loma-area-vollmacht: #516a4c;
  --loma-area-vollmacht-text: #445a40;
  --loma-area-vollmacht-soft: #e6eee0;
  --loma-area-patientenverfuegung: #6e5b86;
  --loma-area-patientenverfuegung-text: #5d4c73;
  --loma-area-patientenverfuegung-soft: #eee8f4;
  --loma-area-steuer: #3b5970;
  --loma-area-steuer-text: var(--loma-area-steuer);
  --loma-area-steuer-soft: #e3ebf2;
  /* Kontrast-Kontrakt (Codex-Challenge 2026-06-11): TEXT auf -soft-Fläche
     nimmt IMMER das -text-Token (AA 4.5:1+). Icons/Grafik auf -soft dürfen
     die Hauptfarbe nehmen (WCAG 1.4.11 non-text 3:1 — alle Paarungen ≥3.1). */

  /* Surfaces — Off-White-Ära. Tiefe über Elevation, nicht über Borders. */
  --loma-surface-page: #f6f4f1;
  --loma-surface-warm: #f0ede8;
  --loma-surface-card: #ffffff;
  --loma-surface-sunken: #ece9e3;
  --loma-surface-ink: #1b1a18;

  /* Text */
  --loma-text-primary: #1b1a18;
  --loma-text-secondary: #57534b;
  --loma-text-muted: #736e62;
  --loma-text-on-ink: #f7f5f2;
  --loma-text-on-ink-muted: #c9c4ba; /* Sekundärtext auf Ink-Flächen (≈10:1) */

  /* Hairlines + Border-Governance (Codex-P2, 2026-06-11) — Borders sind
     FUNKTIONAL, nie Dekor. Erlaubt sind genau drei Fälle:
       1. Listentrenner / Sunken-Kanten → border-subtle/-soft in Hairline-Breite
       2. Input-Begrenzung (Affordance) → border-subtle, Fehler: --loma-error
       3. Selektions-Ring (State-System) → box-shadow-Ring, NIE border
     Alles andere (Karten-Rahmen, Ticket-Kanten, Schmuck-Linien) = Verstoß. */
  --loma-border-subtle: #e7e3dc;
  --loma-border-soft: #f0ede7;
  --loma-hairline: 1px;

  /* Elevation — drei Ebenen (neu in v2) */
  --loma-elevation-1: 0 1px 2px rgba(27, 26, 24, 0.05), 0 1px 3px rgba(27, 26, 24, 0.05);
  --loma-elevation-2: 0 2px 6px rgba(27, 26, 24, 0.06), 0 6px 16px rgba(27, 26, 24, 0.06);
  --loma-elevation-3: 0 8px 20px rgba(27, 26, 24, 0.09), 0 20px 48px rgba(27, 26, 24, 0.12);
  --loma-scrim: rgba(27, 26, 24, 0.4);

  /* Actions */
  /* Focus-Ring-System (Codex-P2): EIN Ring für alles Fokussierbare —
     outline in -focus, Breite/Offset über die beiden Ring-Tokens.
     Komponenten definieren keine eigenen Focus-Farben. */
  --loma-focus: #7a3f32;
  --loma-focus-ring: 2px;
  --loma-focus-offset: 2px;
  --loma-action-primary: var(--loma-brand-ink);
  --loma-action-primary-text: var(--loma-text-on-ink);
  --loma-action-primary-hover: #34302b;
  --loma-action-secondary: var(--loma-surface-card);
  --loma-action-secondary-text: var(--loma-brand-ink);
  --loma-action-secondary-border: var(--loma-border-subtle);
  --loma-action-highlight: var(--loma-brand-terracotta);
  /* Warme primäre Action mit weißem Text (Brand-Moment-CTA). Das helle
     --loma-action-highlight (#df6547) ist der Selektions-/Tint-Akzent, trägt
     aber weißen Text nur mit 3.17:1 (< AA). Dieser dunklere Geschwister-Ton
     der Brand-Terracotta (Hue ~14°, gleiche Familie, NICHT die ochrige
     Pflegegrad-Area #c26a2c und NICHT das kühlere 112-Crimson) trägt weißen
     Text mit 5.1:1 — AA-fest. Für CTAs, die warm statt Ink auftreten sollen. */
  --loma-action-warm: #b6411d;
  --loma-action-warm-hover: #9e3818;
  --loma-action-warm-text: var(--loma-text-on-ink);
  --loma-action-emergency: #b42318;
  --loma-action-emergency-hover: #8f1c14;
  --loma-action-emergency-text: #fffdf6;
  --loma-action-disabled-bg: #e5e1da;
  --loma-action-disabled-text: #8a857c;

  /* Formular-Fehler — bewusst NICHT die 112-Welt (Codex-P2 + Anti-Pattern 8):
     Validierungsfehler nutzen ein erdiges, dunkles Ziegelrot; das helle
     Emergency-Crimson (--loma-action-emergency / --loma-status-alert) bleibt
     exklusiv für Notruf/112-Momente. Error-Text auf Weiß 8.2:1, auf Page 7.5:1. */
  --loma-error: #8c2f24;
  --loma-error-soft: #f7e9e5;

  /* State-System (v2, Codex-P1 „States zu dünn", eingebaut beim Re-Skin):
     pressed = Flächen-Shift unter dem Finger (zusätzlich zum 90ms-Tap-Baustein),
     selected = Ink-Ring via box-shadow (Tiimo-Muster, nie border),
     loading = Skeleton-Flächen + Spinner in currentColor. */
  --loma-state-pressed: rgba(27, 26, 24, 0.07);
  --loma-state-pressed-on-ink: rgba(255, 255, 255, 0.14);
  --loma-state-selected: var(--loma-brand-ink);
  --loma-state-selected-ring: inset 0 0 0 2px var(--loma-brand-ink);
  --loma-skeleton-base: var(--loma-surface-sunken);
  --loma-skeleton-pulse: 0.55;

  /* 112-Strip — eigene Tokens (Codex-P2), damit die 112-Welt unabhängig
     von den Status-Tints getunt werden kann (Johan-Wording + AP6-Hygiene). */
  --loma-112-bg: var(--loma-status-alert-soft);
  --loma-112-accent: var(--loma-action-emergency);
  --loma-112-text: var(--loma-text-primary);

  /* Status / Ampel — Akutbäume + Tagescheck. Rot = bewusst das
     Emergency-Rot (Rot heißt 112-Welt). Tints sitzen auf Weiß. */
  --loma-status-ok: #2f7d4f;
  --loma-status-ok-text: #256b41;
  --loma-status-ok-soft: #e1f0e5;
  --loma-status-warn: #b47b16;
  --loma-status-warn-text: #7a500a;
  --loma-status-warn-soft: #f7edd6;
  --loma-status-alert: var(--loma-action-emergency);
  --loma-status-alert-text: var(--loma-status-alert);
  --loma-status-alert-soft: #f8e5e2;

  /* Typography — Inter ist die Produktstimme. Brand/Display ab m09 auf
     Hanken Grotesk umgestellt (clean, stabil, senior-lesbar — KEIN Serif).
     Fraunces ist damit nicht mehr die Display-Stimme; @font-face bleibt für
     eingefrorene v03-Stände erhalten, wird aber im Hero nicht mehr genutzt. */
  --loma-font-brand: "Hanken Grotesk", "Inter", sans-serif;
  --loma-font-product: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --loma-numeric-features: "tnum" 1; /* tabellarische Ziffern für Beträge/Trends */

  --loma-text-xs: 0.75rem;
  --loma-text-sm: 0.9375rem;
  --loma-text-md: 1.0625rem;
  --loma-text-lg: 1.25rem;
  --loma-text-xl: 1.5rem;
  --loma-text-h2: clamp(1.875rem, 4vw, 2.5rem);
  --loma-text-h1: clamp(2.5rem, 7vw, 4.75rem);
  /* Display-Stufe (Kompositions-Standard, 2026-06-11): die EINE große
     Aussage pro App-Screen — Benchmarks fahren 36–48px, h1/h2 sind
     Website-Maße. Pro Screen genau einmal (oder stattdessen value-lg). */
  --loma-text-display: clamp(2.25rem, 9vw, 2.75rem);
  /* Zahlen-Momente (Revolut/Copilot-Muster): Beträge + Ergebnisse als Helden */
  --loma-text-value: 2rem;
  --loma-text-value-lg: 2.75rem;

  --loma-line-body: 1.55;
  --loma-line-heading: 1.12;
  --loma-touch-target: 44px;
  --loma-touch-target-senior: 52px;

  /* Dichte — vertikale Innenabstände der Shell-Komponenten. Eigene Tokens
     statt space-N, damit der Senior-Modus die Dichte shiften kann, ohne
     die globale Spacing-Skala zu verziehen (Senior-Matrix, Codex-P1). */
  --loma-density-row: 0.5rem;
  --loma-density-card: 1rem;

  /* Spacing */
  --loma-space-1: 0.25rem;
  --loma-space-2: 0.5rem;
  --loma-space-3: 1rem;
  --loma-space-4: 1.5rem;
  --loma-space-5: 2.5rem;
  --loma-space-6: 4rem;
  --loma-space-7: 6rem;

  /* Radius — App-Grade: gerundet, keine Editorial-Kanten mehr */
  --loma-radius-button: 14px;
  --loma-radius-input: 12px;
  --loma-radius-card: 16px;
  --loma-radius-card-lg: 20px;
  --loma-radius-icon: 10px;
  --loma-radius-badge: 999px;
  --loma-radius-sheet: 24px;
  --loma-radius-round: 999px;

  /* Icons — Phosphor (regular), gevendort als SVG */
  --loma-icon-sm: 1rem;
  --loma-icon-md: 1.5rem;
  --loma-icon-lg: 2rem;
  --loma-icon-tile: 2.75rem; /* farbiger Icon-Container — nur Hero-/Kachel-Positionen, nie Listen */
  --loma-indicator: 1.75rem; /* Status-Indikator in Listen (28px; Senior 34px) */

  /* App-Shell (neu in v2): Bottom-Tabs + Header + Sheet */
  --loma-shell-width: 30rem;
  --loma-shell-tabbar-height: 4rem;
  --loma-shell-header-height: 3.5rem;
  --loma-z-header: 30;
  --loma-z-tabbar: 40;
  --loma-z-scrim: 50;
  --loma-z-sheet: 60;

  /* Motion — unverändert aus v1; die AP1-Bausteine überleben den Re-Skin */
  --loma-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --loma-ease-paper: cubic-bezier(0.22, 0.61, 0.36, 1);
  --loma-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --loma-duration-fast: 180ms;
  --loma-duration-base: 280ms;
  --loma-duration-slow: 520ms;
  --loma-duration-tap: 90ms;      /* Tap-Feedback — Antwort vor dem Abheben des Fingers */
  --loma-duration-screen: 220ms;  /* Screen-Übergang — Korridor 150–250ms (Scope §5.4) */

  /* Compatibility aliases (v02-Klassen + Bridge in klickdummy.css).
     Werte shiften automatisch auf v2 — das ist der Re-Skin-Hebel. */
  --c-pflegegrad: var(--loma-area-pflegegrad);
  --c-pflegegrad-text: var(--loma-area-pflegegrad-text);
  --c-pflegegrad-soft: var(--loma-area-pflegegrad-soft);
  --c-vollmacht: var(--loma-area-vollmacht);
  --c-vollmacht-soft: var(--loma-area-vollmacht-soft);
  --c-patientenverfuegung: var(--loma-area-patientenverfuegung);
  --c-patientenverfuegung-soft: var(--loma-area-patientenverfuegung-soft);
  --c-steuer: var(--loma-area-steuer);
  --c-steuer-soft: var(--loma-area-steuer-soft);

  --c-bg: var(--loma-surface-page);
  --c-bg-warm: var(--loma-surface-warm);
  --c-bg-deep: var(--loma-surface-ink);
  --c-paper-light: var(--loma-surface-card);
  --c-fg: var(--loma-text-primary);
  --c-fg-soft: var(--loma-text-secondary);
  --c-fg-faint: var(--loma-text-muted);
  --c-fg-on-dark: var(--loma-text-on-ink);
  --c-sage-dark: var(--loma-brand-sage-dark);
  --c-border: var(--loma-border-subtle);
  --c-rule: var(--loma-border-subtle);
  --c-rule-soft: var(--loma-border-soft);

  --font-serif: var(--loma-font-brand);
  --font-sans: var(--loma-font-product);
  --t-small: var(--loma-text-sm);
  --t-base: var(--loma-text-md);
  --t-large: var(--loma-text-lg);
  --t-h3: var(--loma-text-xl);
  --t-h2: var(--loma-text-h2);
  --t-h1: var(--loma-text-h1);

  --s-1: var(--loma-space-1);
  --s-2: var(--loma-space-2);
  --s-3: var(--loma-space-3);
  --s-4: var(--loma-space-4);
  --s-5: var(--loma-space-5);
  --s-6: var(--loma-space-6);
  --s-7: var(--loma-space-7);

  --r-button: var(--loma-radius-button);
  --r-pill: var(--loma-radius-badge);
  --r-card: var(--loma-radius-card);
  --r-stein: 50%;

  --e-out: var(--loma-ease-out);
  --e-paper: var(--loma-ease-paper);
  --e-spring: var(--loma-ease-spring);
  --d-fast: var(--loma-duration-fast);
  --d-base: var(--loma-duration-base);
  --d-slow: var(--loma-duration-slow);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --loma-duration-fast: 0ms;
    --loma-duration-base: 0ms;
    --loma-duration-slow: 0ms;
    --loma-duration-tap: 0ms;
    --loma-duration-screen: 0ms;
  }
}

/* Senior-Mode-Matrix (Codex-P1, kalibriert am Re-Skin 2026-06-11):
   token-only — Schrift-Stufen inkl. Zahlen-Helden + xl, Zeilenhöhe,
   Dichte, Indikatoren, Icons und Shell-Maße shiften; Layout bleibt.
   Kalibrier-Prinzip: Text +~12–19 %, Flächen/Ziele +~15–20 %,
   xs bleibt nie unter 0.875rem (Pill-/Caption-Lesbarkeit). */
[data-senior-mode="true"] {
  --loma-text-xs: 0.875rem;
  --loma-text-sm: 1rem;
  --loma-text-md: 1.1875rem;
  --loma-text-lg: 1.375rem;
  --loma-text-xl: 1.75rem;
  --loma-text-display: clamp(2.5rem, 10vw, 3rem);
  --loma-text-value: 2.25rem;
  --loma-text-value-lg: 3.125rem;
  --loma-line-body: 1.65;
  --loma-touch-target: var(--loma-touch-target-senior);
  --loma-density-row: 0.75rem;
  --loma-density-card: 1.25rem;
  --loma-icon-md: 1.75rem;
  --loma-icon-tile: 3.25rem;
  --loma-indicator: 2.125rem;
  --loma-shell-tabbar-height: 4.5rem;
  --loma-shell-header-height: 4rem;
}

/* --- Self-hosted Fonts (F5): subset-woff2, Variable-Achse + tnum-Feature erhalten.
   Ersetzt externes Google-Fonts-Loading UND die schweren TTFs (Inter 856→90 KB,
   Hanken 130→34 KB). Fraunces entfernt (in v05 nirgends genutzt). DSGVO: keine
   externen Font-Requests mehr. Subset: Latin + Latin-1 (Umlaute/ß) + Punktuation + € + −. */
@font-face { font-family: "Inter"; src: url("fonts/inter-v.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-v.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }