/* ========================================================================= Meldekopf — Basis-Token-Layer ------------------------------------------------------------------------- Ebene 2 und 3 der Token-Architektur. Ebene 1 (Markentoken) kommt aus einer Theme-Datei, z. B. theme-asb.css. Diese Datei mappt die Markentoken auf semantische App-Token (Ebene 2) und definiert die NICHT themebaren Token (Ebene 3). Reihenfolge im Build zwingend: 1. theme-.css (setzt --brand-*) 2. _base.css (diese Datei) Regel: Kein Komponenten-CSS greift jemals direkt auf --brand-* zu. Komponenten nutzen ausschliesslich die semantischen Token unten. ========================================================================= */ :root { /* ======================================================================= EBENE 2 — Semantische Token (themebar, abgeleitet aus --brand-*) ======================================================================= */ /* Text */ --fg-default: var(--brand-fg); --fg-muted: var(--brand-fg-muted); --fg-subtle: var(--brand-fg-subtle); --fg-accent: var(--brand-accent); --fg-on-accent: var(--brand-fg-on-accent); --fg-on-stage: var(--brand-fg-on-stage); --fg-on-dark: #FFFFFF; /* Flaechen */ --bg-page: #FFFFFF; --bg-soft: var(--brand-bg-soft); --bg-stage: var(--brand-stage); /* Markenbuehne / Markenzone */ --bg-dark: var(--brand-dark); --bg-accent: var(--brand-accent); /* Linien */ --border-subtle: var(--brand-rule); --border-strong: var(--brand-rule-strong); --border-accent: var(--brand-accent); /* Primaeraktion (Buttons) */ --action-bg: var(--brand-accent); --action-fg: var(--brand-fg-on-accent); --action-bg-hover: var(--brand-accent-dark); --action-bg-active: var(--brand-accent-darker); /* Fokus — 2 px Ring in der Markenfarbe, doppelt gegen jeden Hintergrund */ --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--brand-accent); /* Marke als Inhalt. Auch Logo und Claim gehen ueber Ebene 2, sonst muesste ein Template auf --brand-* zugreifen und die Lint-Regel waere geloest. Gefunden beim Ticketschnitt: Aushang (TICK-010) und Kopfleiste (TICK-003) brauchen beides. */ --logo-src: var(--brand-logo); --claim-text: var(--brand-claim); /* Hiess bis TICK-002 --brand-label. Der Tokenname selbst enthielt die Zeichenfolge --brand-, die die Lint-Regel in Templates verbietet: das Token war damit unbenutzbar. Umbenannt, bevor die erste Nutzung entstand. */ --label-brand: var(--brand-name); /* Typografie */ --font-sans: var(--brand-font-sans); --font-serif: var(--brand-font-serif); --ls-headline: var(--brand-ls-headline); /* Radien — bewusst flach, gilt themeuebergreifend */ --radius-frame: 0; /* Markenzone, Poster, Berichtskopf */ --radius-control: 4px; /* Buttons, Inputs, Tags */ --radius-card: 8px; /* Karten */ /* ======================================================================= EBENE 3 — FIXE Token. Von keinem Theme ueberschreibbar. ----------------------------------------------------------------------- Begruendung: Statusfarben und Sichtungsfarben tragen Bedeutung, keine Marke. Wuerde ein Mandantentheme sein Markenrot auf --status-critical legen, waere jede Kachel im Lagebild rot und die Statuslogik tot. Diese Werte sind bewusst gegen ASB-Rot #E30613 und ASB-Gelb #FFEE00 abgegrenzt, damit Marke und Status nie verwechselt werden. ======================================================================= */ /* Betriebsstatus im Lagebild */ --status-ok: #0F7B3E; /* Soll erreicht 5.4:1 auf Weiss */ --status-ok-bg: #E6F4EC; --status-warn: #B45309; /* unterbesetzt 5.0:1 auf Weiss */ --status-warn-bg: #FDF3E3; --status-critical: #9F1239; /* kritisch unterbesetzt 8.0:1 auf Weiss */ --status-critical-bg: #FCE8EE; --status-neutral: #4B5563; --status-neutral-bg: #F3F4F6; --status-auto: #6D28D9; /* automatisch geschlossen, pruefen */ --status-auto-bg: #F1EBFC; /* Sichtungskategorien — normiert, NIEMALS anfassen. Immer zusaetzlich mit roemischer Ziffer und Klartext beschriften, nie Farbe allein. */ --sk-i: #C81E1E; /* SK I — akute Lebensgefahr */ --sk-ii: #D97706; /* SK II — schwer verletzt */ --sk-iii: #15803D; /* SK III — leicht verletzt */ --sk-iv: #1F2937; /* SK IV — ohne Ueberlebenschance */ --sk-none: #6B7280; /* keine Sichtung / Bagatelle */ /* Schriftfarbe AUF der jeweiligen Sichtungsflaeche. Gemessen, nicht geschaetzt (TICK-034). Weiss traegt vier der fuenf Flaechen: --sk-i 5.7:1 --sk-iii 5.0:1 --sk-iv 14.7:1 --sk-none 4.8:1 Auf --sk-ii erreicht Weiss nur 3.2:1 und faellt damit unter die WCAG-AA-Schwelle 4.5:1 fuer 16-px-Text. Dort steht die Schrift in --sk-iv (4.6:1). Das Ticket verlangt --fg-on-dark fuer alle fuenf; die Abweichung ist der Messwert, nicht Geschmack, und in TICK-034 vermerkt. Die Paare sind Ebene 3, weil ein Theme sonst die Lesbarkeit einer normierten Sichtungsfarbe kippen koennte. */ --sk-i-fg: var(--fg-on-dark); --sk-ii-fg: var(--sk-iv); --sk-iii-fg: var(--fg-on-dark); --sk-iv-fg: var(--fg-on-dark); --sk-none-fg: var(--fg-on-dark); /* ======================================================================= Raster und Groessen — einsatztauglich, themeunabhaengig ======================================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Touch-Ziele. WCAG 2.2 fordert 24 px, brauchbar sind 44 px. Mit Einsatzhandschuhen sind 56 px die Untergrenze, 64 px der Default fuer alles, was unter Zeitdruck getroffen werden muss. */ --tap-min: 56px; --tap-primary: 64px; /* Schriftgroessen. Untergrenze 16 px, weil die App bei Tageslicht, in Bewegung und teilweise mit nasser Scheibe bedient wird. */ --fs-body: 16px; --fs-label: 14px; /* nur Labels, nie Fliesstext */ --fs-lead: 20px; --fs-staerke: clamp(48px, 14vw, 96px); /* die grosse Staerkezahl */ /* Bewegung — ruhig, funktional */ --dur-fast: 150ms; --dur-normal: 220ms; --ease: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; } }