/* Allonz Design-Tokens – Kopie von src/styles/tokens.css, Stand 14.10.2026 (bei Änderungen dort erneut kopieren).
   Marke: Ink #1B2230 · Akzent #D9481F · Teal #0E7C73. Hell/Dunkel über prefers-color-scheme,
   Nutzerwahl über [data-theme] am <html>. Komponenten nutzen ausschließlich diese Variablen. */
:root {
  color-scheme: light dark;

  /* Marke (unveränderlich) */
  --az-ink: #1b2230;
  --az-accent: #d9481f;
  --az-teal: #0e7c73;

  /* Flächen und Text – hell */
  --az-bg: #faf8f5;
  --az-surface: #ffffff;
  --az-surface-2: #f1eee9;
  --az-surface-3: #e7e2da;
  --az-text: #1b2230;
  --az-text-muted: #5b6472;
  --az-text-faint: #8a92a0;
  --az-border: #e2ded7;
  --az-border-strong: #c9c3b9;

  /* Eine Farbe, eine Bedeutung (U3-1, Grundsatz 2):
     Handlung = Ink (Haupttaste, aktiver Tab) · Zeit, die drängt = Akzent (Fixpunkt, fällig,
     „Jetzt“-Tab) · Assistent und Zweithandlung = Teal. Vorher trug der Akzent fünf Bedeutungen
     (Befund K3). Dunkel kehrt sich die Handlungsfarbe um: helle Taste, dunkle Schrift – Ink auf
     Ink wäre unsichtbar. Geprüft von tools/contrast-check.mjs (AA je Paar, hell und dunkel). */
  --az-action: var(--az-ink);
  --az-on-action: #ffffff;
  --az-action-hover: #2b3446;
  --az-action-text: var(--az-ink);
  --az-action-soft: #e6e9ef;
  --az-assist: var(--az-teal);
  --az-assist-text: var(--az-teal-text);
  --az-assist-soft: var(--az-teal-soft);

  /* Akzente mit Kontrast (AA auf --az-surface) */
  --az-accent-text: #b93a14;
  --az-accent-soft: #fbe7e1;
  --az-on-accent: #ffffff;
  --az-teal-text: #0b6259;
  --az-teal-soft: #e3f2f0;
  --az-on-teal: #ffffff;

  /* Semantik */
  --az-ok: #276b2a;
  --az-ok-soft: #ddf1de;
  --az-warn: #9a4a06;
  --az-warn-soft: #fdebd3;
  --az-danger: #b3261e;
  --az-danger-soft: #f9dedc;
  --az-info: #1f5f8b;
  --az-info-soft: #dfeef8;

  /* Härte der Items (Fixpunkt / weich / optional) */
  --az-fix: var(--az-accent);
  --az-fix-soft: var(--az-accent-soft);
  /* Fixpunkt als Text (Abzeichen, Zeilen): dunkler als die Fläche – 12 px auf --az-fix-soft brauchen 4,5:1 (Lighthouse 09.10.2026). */
  --az-fix-text: var(--az-accent-text);
  --az-soft: var(--az-teal);
  --az-soft-soft: var(--az-teal-soft);
  --az-optional: #6b7280;
  --az-optional-soft: #eceef1;

  /* Fokus */
  --az-focus: #0e7c73;
  --az-focus-ring: 0 0 0 3px color-mix(in srgb, var(--az-focus) 35%, transparent);

  /* Typografie */
  /* Die „… Fallback“-Fassungen sind Arial mit angepassten Maßen (styles/fonts.css): kein Springen,
     wenn die Webschrift ankommt. */
  --az-font-title:
    'Syne', 'Syne Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --az-font-text:
    'Instrument Sans', 'Instrument Sans Fallback', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', sans-serif;
  --az-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Kennzahlen (Uhrzeiten, Beträge, Zähler): die Textschrift mit tabellarischen Ziffern. Syne
     bleibt den Titeln vorbehalten – ihre Ziffern wirken in „14:30“ oder „€ 172“ verspielt (M7),
     und Monospace sieht nach Technik aus. Wer Zahlen setzt, nimmt diese Schrift und dazu
     `font-variant-numeric: tabular-nums`, damit Spalten von Uhrzeiten untereinander stehen. */
  --az-font-num: var(--az-font-text);
  --az-fs-xs: 0.75rem;
  --az-fs-sm: 0.875rem;
  --az-fs-md: 1rem;
  --az-fs-lg: 1.125rem;
  --az-fs-xl: 1.375rem;
  --az-fs-2xl: 1.75rem;
  --az-fs-3xl: 2.25rem;
  --az-lh-tight: 1.2;
  --az-lh-normal: 1.5;

  /* Abstände (4er-Raster) */
  --az-sp-1: 4px;
  --az-sp-2: 8px;
  --az-sp-3: 12px;
  --az-sp-4: 16px;
  --az-sp-5: 20px;
  --az-sp-6: 24px;
  --az-sp-8: 32px;
  --az-sp-10: 40px;
  --az-sp-12: 48px;

  /* Radien, Schatten, Touch */
  --az-radius-sm: 6px;
  --az-radius-md: 10px;
  --az-radius-lg: 16px;
  --az-radius-full: 999px;
  --az-shadow-1: 0 1px 2px rgb(27 34 48 / 0.08), 0 1px 3px rgb(27 34 48 / 0.06);
  --az-shadow-2: 0 4px 12px rgb(27 34 48 / 0.12);
  --az-shadow-3: 0 12px 32px rgb(27 34 48 / 0.18);
  --az-touch: 44px;
  --az-content-max: 720px;

  /* Glas (A4/S1-9): halbdurchsichtige Fläche – im ganzen Projekt nur unter der Tab-Leiste.
     Seitenkopf und Sheets bleiben deckend; begründet in 10-UI-PLAN.md, Abschnitt 6.
     Notbremse: --az-glass-bg auf var(--az-surface) setzen, dann ist jede Glasfläche wieder
     deckend – ein Wert, kein Rückbau. Die Farbe folgt dem Thema, weil sie aus --az-surface kommt. */
  --az-glass-blur: 14px;
  --az-glass-bg: color-mix(in srgb, var(--az-surface) 80%, transparent);
  --az-glass-bg-solid: var(--az-surface);
  --az-glass-border: var(--az-border-strong);

  /* Bewegung */
  --az-ease: cubic-bezier(0.2, 0, 0, 1);
  --az-dur-fast: 120ms;
  --az-dur: 200ms;

  /* Sichere Ränder (iPhone) */
  --az-safe-top: env(safe-area-inset-top, 0px);
  --az-safe-bottom: env(safe-area-inset-bottom, 0px);
  /**
   * Höhe der klebenden Meldungen am oberen Rand („Neue Fassung“, „Offline“) – 0, solange keine
   * Meldung da ist. `app-root` misst den Meldungs-Block und setzt den Wert am <html>. Die Meldungen
   * enthalten den sicheren Bereich bereits in ihrer Polsterung.
   */
  --az-banner-h: 0px;
  /**
   * Platz, den etwas am oberen Bildschirmrand freihalten muss: der sichere Bereich des Geräts –
   * oder, sobald eine Meldung klebt, deren Höhe. Alles, was oben klebt (Abschnitts-Leiste),
   * rechnet damit statt mit --az-safe-top; sonst liegt es unter der Meldung.
   */
  --az-top-inset: max(var(--az-safe-top), var(--az-banner-h));
  /**
   * Höhe der Abschnitts-Leiste; 0, solange keine sichtbar ist. `az-sectionbar` setzt den Wert am
   * <html>, solange die Leiste mindestens zwei Abschnitte zeigt, und räumt ihn beim Verlassen weg.
   */
  --az-sectionbar-h: 0px;
  /**
   * Höhe der klebenden Kopfzeile mit dem Seitentitel; 0, solange keine da ist. `az-pagehead`
   * setzt den Wert am <html>, solange die Kopfzeile lebt, und räumt ihn beim Verlassen weg.
   */
  --az-pagehead-h: 0px;
  /**
   * Platz, den etwas unterhalb der Kopfzeile freihalten muss: Meldungen plus Kopfzeile. Die
   * Abschnitts-Leiste klebt hier, damit sie unter dem Titel sitzt statt darüber.
   */
  --az-head-inset: calc(var(--az-top-inset) + var(--az-pagehead-h));
  /**
   * Abstand, den ein Sprungziel nach oben freihält (`.az-anchor`), damit die angesprungene
   * Überschrift nicht unter Meldung und Abschnitts-Leiste verschwindet.
   */
  --az-anchor-top: calc(var(--az-head-inset) + var(--az-sectionbar-h) + var(--az-sp-3));
  /**
   * Höhe der unteren Tab-Leiste ohne den sicheren Bereich. 0, solange keine Leiste sichtbar ist;
   * `az-tabbar` setzt den Wert am <html>, solange es lebt, und räumt ihn beim Verlassen wieder weg.
   */
  --az-tabbar-h: 0px;
  /**
   * Platz, den etwas am unteren Bildschirmrand freihalten muss: der sichere Bereich des Geräts plus
   * die Höhe der Tab-Leiste, sobald eine sichtbar ist. Die Leiste setzt den Wert selbst hoch; ohne
   * sie bleibt es beim sicheren Bereich. Alles, was unten klebt, rechnet damit statt mit
   * --az-safe-bottom – sonst verschwindet es hinter der Leiste.
   */
  --az-bottom-inset: calc(var(--az-tabbar-h) + var(--az-safe-bottom));
}

/* Dunkel: Systemwahl (ohne explizite Nutzerwahl) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --az-action: #f3f1ec;
    --az-on-action: #1b2230;
    --az-action-hover: #ffffff;
    --az-action-text: #f3f1ec;
    --az-action-soft: #2c3547;
    --az-bg: #12161e;
    --az-surface: #1b2230;
    --az-surface-2: #232b3a;
    --az-surface-3: #2c3547;
    --az-text: #f3f1ec;
    --az-text-muted: #a6aebb;
    --az-text-faint: #7d8593;
    --az-border: #2f3847;
    --az-border-strong: #45506a;
    --az-accent-text: #ff8a63;
    --az-accent-soft: #4a2418;
    --az-teal-text: #5fd0c4;
    --az-teal-soft: #153b38;
    --az-ok: #7ed67f;
    --az-ok-soft: #1d3b1f;
    --az-warn: #f2b56a;
    --az-warn-soft: #4a2f0f;
    --az-danger: #ff8a80;
    --az-danger-soft: #4b1f1c;
    --az-info: #8cc4ee;
    --az-info-soft: #1a3348;
    --az-optional: #9aa3b2;
    --az-optional-soft: #2a3242;
    --az-focus: #5fd0c4;
    --az-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
    --az-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
    --az-shadow-3: 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

/* Dunkel: explizite Nutzerwahl */
:root[data-theme='dark'] {
  --az-action: #f3f1ec;
  --az-on-action: #1b2230;
  --az-action-hover: #ffffff;
  --az-action-text: #f3f1ec;
  --az-action-soft: #2c3547;
  --az-bg: #12161e;
  --az-surface: #1b2230;
  --az-surface-2: #232b3a;
  --az-surface-3: #2c3547;
  --az-text: #f3f1ec;
  --az-text-muted: #a6aebb;
  --az-text-faint: #7d8593;
  --az-border: #2f3847;
  --az-border-strong: #45506a;
  --az-accent-text: #ff8a63;
  --az-accent-soft: #4a2418;
  --az-teal-text: #5fd0c4;
  --az-teal-soft: #153b38;
  --az-ok: #7ed67f;
  --az-ok-soft: #1d3b1f;
  --az-warn: #f2b56a;
  --az-warn-soft: #4a2f0f;
  --az-danger: #ff8a80;
  --az-danger-soft: #4b1f1c;
  --az-info: #8cc4ee;
  --az-info-soft: #1a3348;
  --az-optional: #9aa3b2;
  --az-optional-soft: #2a3242;
  --az-focus: #5fd0c4;
  --az-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
  --az-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
  --az-shadow-3: 0 12px 32px rgb(0 0 0 / 0.55);
}