/* Qardo 2.0 -- Tokens der App (docs/konzept/designsystem.md, Abschnitt 2).

   Einzige Quelle für Farben, Abstände, Radien, Breiten und Schriften der
   neuen App-Seiten unter static/app/. components.css und layout.css
   verwenden ausschließlich diese Namen; keine Seite schreibt eigene Werte.
   Die alten Seiten laden weiter static/css/app.css und sehen diese Datei nie.

   Drei Varianten wie bisher in app.css:
   1. hell als Grundstellung,
   2. dunkel über prefers-color-scheme, außer jemand hat ausdrücklich hell
      gewählt (data-theme="light"),
   3. dunkel über data-theme="dark", unabhängig vom System.
   Die Selektoren gelten nicht nur für :root, sondern für jedes Element mit
   data-theme. Dadurch kann ein Ausschnitt (etwa die Komponentenübersicht)
   ein anderes Theme zeigen als die Seite drumherum, ohne eigene Farben. */

/* Schriften liegen lokal neben ihren Lizenzen (OFL-*.txt). Eine externe
   Schrift wäre eine Anfrage an Dritte bei jedem Seitenaufruf und bräuchte
   eine Lücke in der CSP. */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/martian-mono.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/plex-sans.woff2') format('woff2');
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Farben */
  --bg: #F7F5F1;            /* ungebleichte Baumwolle */
  --surface: #FFFFFF;
  --surface-sunken: #EFECE5;
  --text: #12141C;
  --text-muted: #565D78;
  --border: #E4E1DA;
  --border-strong: #CFCAC0;
  /* Rand von Eingabefeldern (UX-12): Das Feld ist nur an seinem Rand zu
     erkennen, also braucht er 3:1 gegen Karte UND Seitenhintergrund
     (WCAG 1.4.11). --border-strong erreichte 1,5:1. */
  --border-control: #7C8192;
  --accent: #C4362B;        /* Marke UND Aufmerksamkeit/Gefahr, sonst nirgends */
  --success: #2F7355;
  /* --warning, --neutral und --accent-bg weichen vom ersten Entwurf in
     designsystem.md ab (#9A6512, #6B7185, #F7E3E0): Chip-Text erreichte auf
     seinem Chip-Hintergrund nur 4,19 / 4,04 / 4,35 : 1 und damit nicht die
     geforderten 4,5 : 1. Die Schrift wurde minimal dunkler gezogen; beim
     Akzent bleibt die Markenfarbe unangetastet, dafür wird der Hintergrund
     heller. tests/test_design_system.py rechnet das nach. */
  --warning: #8F5E10;
  --neutral: #62677A;
  --success-bg: #E3EFE8;
  --warning-bg: #F6EBD6;
  --accent-bg: #FAECEA;
  --neutral-bg: #E9EAEE;

  /* Ebenen, die über dem Inhalt schweben (Menü, Dialog, Hinweis). Karten
     bleiben schattenlos; ein Schatten heißt hier "liegt obenauf". */
  --shadow-overlay: 0 12px 32px -12px rgb(18 20 28 / 0.28), 0 2px 6px rgb(18 20 28 / 0.08);
  --backdrop: rgb(18 20 28 / 0.5);

  /* Abstände: 8-px-Raster; --space-05 = 4px feiner Zwischenwert (UX-1) */
  --space-05: 4px;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 64px;

  /* Radien */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-input: 10px;

  /* Breiten */
  --width-app: 1440px;      /* Übersicht, Meine Qardos, Statistik, Meldungsliste */
  --width-editor: 1160px;   /* Editor, Einstellungen */
  --width-text: 760px;      /* lange Texte, Formularspalten */
  --gutter: 16px;           /* Mindest-Seitenrand */
  --control-max: 22rem;     /* Kurzfeld-Obergrenze (Datum/Zeit/PLZ/kurze Werte): .q-field--sm (UX-1) */

  /* Shell */
  --sidebar-width: 15rem;
  --bottom-nav-height: 56px;
  --topbar-height: 56px;

  /* Fokus. In den dunklen Blöcken wiederholt: Eigenschaften mit var()
     werden dort berechnet, wo sie stehen. Ohne Wiederholung erbte ein
     dunkler Ausschnitt den Ring mit dem hellen Akzent. */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* Schrift */
  --font-display: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12141C;
    --surface: #191C27;
    --surface-sunken: #0C0D13;
    --text: #F3F1EC;
    --text-muted: #9BA2B8;
    --border: #2B2F3D;
    --border-strong: #3A3F50;
    --border-control: #6B7185;
    --accent: #E2604F;
    --success: #6FC39B;
    --warning: #E0AE5C;
    --neutral: #8C92A6;
    --success-bg: #16291F;
    --warning-bg: #2E2414;
    --accent-bg: #331A18;
    --neutral-bg: #22252F;
    --shadow-overlay: 0 12px 32px -12px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.4);
    --backdrop: rgb(0 0 0 / 0.6);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12141C;
  --surface: #191C27;
  --surface-sunken: #0C0D13;
  --text: #F3F1EC;
  --text-muted: #9BA2B8;
  --border: #2B2F3D;
  --border-strong: #3A3F50;
  --border-control: #6B7185;
  --accent: #E2604F;
  --success: #6FC39B;
  --warning: #E0AE5C;
  --neutral: #8C92A6;
  --success-bg: #16291F;
  --warning-bg: #2E2414;
  --accent-bg: #331A18;
  --neutral-bg: #22252F;
  --shadow-overlay: 0 12px 32px -12px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.4);
  --backdrop: rgb(0 0 0 / 0.6);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}