/* JuJu CampHub — Design-Token-Schicht (Richtung C). * Einzige Quelle für Marken-, Status- und Flächenfarben. Wird VOR app.css * eingebunden; app.css (Tailwind) konsumiert diese --ch-* Custom-Properties. * Themes laufen über [data-theme] auf (System/Hell/Dunkel/Outdoor), * gesetzt vom Anti-Flash-Bootstrap in base.html. * * Marken-Blau (#33b3e6) und die Status-Ampel sind bewusst GETRENNT: * Status-„Information" ist #2563eb, nicht das Marken-Blau (Spec §11.7.3). * * Status-Chips nutzen je Ton DREI Tokens (Spec §3.2): --ch-status- (Vollfarbe), * --ch-status--soft (Chip-Fläche) und --ch-status--ink (Chip-Text, AA auf * der Soft-Fläche). Gelb/Orange/Grün tragen so dunklen Text statt Weiß. */ :root { /* Marke (DJJV-Jugend) — themeunabhängig */ --ch-brand: #33b3e6; --ch-brand-dark: #1f8fbf; --ch-brand-soft: #e6f6fd; --ch-brand-yellow: #ffcc00; --ch-brand-red: #ff0000; /* Der runde Knopf (Schnellaktionen). Eigenes Paar statt der Statusampel: er * meldet keinen Zustand, er ist der eine Griff, den man im Dunkeln findet. * Schwarz auf diesem Rot sind 6.7:1 — AA auch bei kleiner Schrift. */ --ch-fab-bg: #ef4444; --ch-fab-ink: #000000; /* Status-Ampel (Spec §11.4) — Vollfarben, themeunabhängig */ --ch-status-ok: #16a34a; --ch-status-hint: #eab308; --ch-status-attn: #f97316; --ch-status-crit: #dc2626; --ch-status-info: #2563eb; /* eigenes Blau, NICHT die Marke */ --ch-status-unknown: #9ca3af; /* Status-Chips: Soft-Fläche + Ink-Text (AA), HELL */ --ch-status-ok-soft: #dcfce7; --ch-status-ok-ink: #166534; --ch-status-hint-soft: #fef9c3; --ch-status-hint-ink: #854d0e; --ch-status-attn-soft: #ffedd5; --ch-status-attn-ink: #9a3412; --ch-status-crit-soft: #fee2e2; --ch-status-crit-ink: #991b1b; --ch-status-info-soft: #dbeafe; --ch-status-info-ink: #1e40af; --ch-status-unknown-soft: #f1f5f9; --ch-status-unknown-ink: #475569; /* Neutrale Flächen / Text / Rahmen — HELL */ --ch-bg: #f1f5f9; --ch-surface: #ffffff; --ch-surface-2: #f8fafc; --ch-text: #0f172a; --ch-text-muted: #475569; --ch-text-subtle: #64748b; --ch-border: #e2e8f0; --ch-border-strong: #cbd5e1; --ch-focus: #1f8fbf; /* Elevation */ --ch-elevation-1: 0 1px 3px rgb(15 23 42 / .08); --ch-elevation-2: 0 4px 12px rgb(15 23 42 / .10); /* Schrift: selbst-gehostete Inter-Variable primär, Tahoma (DJJV-Hausschrift) * als Fallback. Die Primärschrift ist eine bewusste DJJV-Marken-Entscheidung * (Spec §3.5/§13.2) — Umkehr = nur diese Zeile + die woff2 tauschen. */ --ch-font-sans: "Inter Variable", Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; /* Radii (themeunabhängig) */ --ch-radius-sm: 6px; --ch-radius-md: 10px; --ch-radius-lg: 16px; --ch-radius-full: 9999px; /* Touch-Mindestziel + Skalierungs-Reserve. * Alle Metriken hängen an rem, damit die Schriftgrößen-Einstellung aus dem * Profil (Klein/Normal/Groß setzt html{font-size}) nicht nur den Text, sondern * auch Polster, Leistenhöhen und Tap-Ziele mitzieht. Das Touch-Ziel wächst * dabei nur nach oben: max() hält die 44px-Untergrenze auch bei „Klein“. */ --ch-tap-min: max(44px, 2.75rem); --ch-font-scale: 1; --ch-space-scale: 1; /* Layout-Metrik. --ch-appbar-h ersetzt das früher an drei Stellen * hartkodierte top-[57px] der Sticky-Sidebars; --ch-gutter ist das seitliche * Innenmaß des Inhalts und darf je Theme dichter oder luftiger werden. */ --ch-appbar-h: 3.5rem; --ch-gutter: 1rem; /* Die installierte App (display: standalone) läuft mit viewport-fit=cover * unter der Statusleiste bzw. der Dynamic Island hindurch. Ohne diesen * Abstand liegt der Menüknopf physisch DARUNTER und nimmt keine Taps an — * genau der Fehler aus #25 auf dem iPhone. Im Browser und auf dem Desktop * ist der Wert 0, die Leiste bleibt dort also unverändert. * * Zwei Maße, weil --ch-appbar-h zwei Bedeutungen hatte: --ch-appbar-h ist * die Höhe der INHALTSZEILE (Mindesthöhe, Tap-Ziele), --ch-appbar-top die * Unterkante der ganzen Leiste — daran hängt alles, was darunter klebt. */ --ch-safe-top: env(safe-area-inset-top, 0px); --ch-appbar-top: calc(var(--ch-appbar-h) + var(--ch-safe-top)); } [data-theme="dark"] { color-scheme: dark; --ch-brand-soft: #14384a; --ch-status-ok-soft: #14321f; --ch-status-ok-ink: #86efac; --ch-status-hint-soft: #3b2f0a; --ch-status-hint-ink: #fde047; --ch-status-attn-soft: #3a1e09; --ch-status-attn-ink: #fdba74; --ch-status-crit-soft: #3f1d1d; --ch-status-crit-ink: #fca5a5; --ch-status-info-soft: #172554; --ch-status-info-ink: #93c5fd; --ch-status-unknown-soft: #293548; --ch-status-unknown-ink: #cbd5e1; --ch-bg: #0f172a; --ch-surface: #1e293b; --ch-surface-2: #293548; --ch-text: #e2e8f0; --ch-text-muted: #94a3b8; --ch-text-subtle: #8795a9; /* >= AA (4.76:1) auf --ch-surface */ --ch-border: #334155; --ch-border-strong: #475569; --ch-focus: #5cc6f0; --ch-elevation-1: 0 1px 3px rgb(0 0 0 / .5); --ch-elevation-2: 0 4px 12px rgb(0 0 0 / .6); } /* Outdoor / High-Contrast — eigenständige vierte Stufe (pralle Sonne, ältere * Augen): near-black auf reinweiß, kräftige Rahmen, Schatten zu Rahmen reduziert, * dunklere Chip-Inks für maximalen Kontrast, größeres Touch-Ziel. */ [data-theme="outdoor"] { color-scheme: light; --ch-brand-soft: #e6f6fd; --ch-status-ok-soft: #dcfce7; --ch-status-ok-ink: #14532d; --ch-status-hint-soft: #fef9c3; --ch-status-hint-ink: #713f12; --ch-status-attn-soft: #ffedd5; --ch-status-attn-ink: #7c2d12; --ch-status-crit-soft: #fee2e2; --ch-status-crit-ink: #7f1d1d; --ch-status-info-soft: #dbeafe; --ch-status-info-ink: #1e3a8a; --ch-status-unknown-soft: #f1f5f9; --ch-status-unknown-ink: #1f2937; --ch-bg: #ffffff; --ch-surface: #ffffff; --ch-surface-2: #ffffff; --ch-text: #000000; --ch-text-muted: #1f2937; --ch-text-subtle: #1f2937; --ch-border: #000000; --ch-border-strong: #000000; --ch-focus: #0b5fa5; --ch-elevation-1: 0 0 0 1px var(--ch-border); --ch-elevation-2: 0 0 0 2px var(--ch-border); --ch-tap-min: max(48px, 3rem); /* Hochkontrast: auf weißem Grund darf der Knopf voll aufdrehen (5.25:1). */ --ch-fab-bg: #ff0000; } /* Einsatz — Ops-Konsole. Eine eigenständige fünfte Stufe, nicht „Dunkel, aber * blauer“: Flächen tragen die Tiefe (keine Schatten, keine Kartenrahmen), die * Statusampel ist für dunklen Grund neu gemischt, und der Innenrand ist enger, * weil auf einem Betriebsschirm die Zeile zählt und nicht das Polster. * --ch-brand-dark muss hier HELL sein: bestehende Markup nutzt text-brand-dark * als Betonungsfarbe, das #1f8fbf aus :root wäre auf #0f1720 unlesbar. */ [data-theme="einsatz"] { color-scheme: dark; --ch-brand: #3fbdf0; --ch-brand-dark: #8ad8f7; --ch-brand-soft: #0e2b3a; --ch-status-ok: #34d399; --ch-status-hint: #fbbf24; --ch-status-attn: #fb923c; --ch-status-crit: #f87171; --ch-status-info: #60a5fa; --ch-status-unknown: #7f93a3; --ch-status-ok-soft: #0d2e24; --ch-status-ok-ink: #6ee7b7; --ch-status-hint-soft: #33270a; --ch-status-hint-ink: #fcd34d; --ch-status-attn-soft: #331d0c; --ch-status-attn-ink: #fdba74; --ch-status-crit-soft: #351618; --ch-status-crit-ink: #fca5a5; --ch-status-info-soft: #131f3c; --ch-status-info-ink: #93c5fd; --ch-status-unknown-soft: #1b2632; --ch-status-unknown-ink: #a4b6c4; --ch-bg: #080d12; --ch-surface: #0f1720; --ch-surface-2: #17222d; --ch-text: #e9f1f7; --ch-text-muted: #95a9b9; --ch-text-subtle: #7d93a5; /* >= AA (4.8:1) auf --ch-surface */ --ch-border: #1c2935; --ch-border-strong: #2b3d4c; --ch-focus: #6ed3fa; /* Tiefe kommt aus Flächenstufen, nicht aus Schatten. */ --ch-elevation-1: none; --ch-elevation-2: 0 8px 24px rgb(0 0 0 / .55); --ch-radius-sm: 4px; --ch-radius-md: 5px; --ch-radius-lg: 8px; --ch-gutter: 0.8125rem; /* Tabellarische Ziffern und eine Mono-Familie für Zimmernummern und Zeiten: * Spalten stehen untereinander statt zu tanzen. Systemschriften, damit kein * zusätzlicher Webfont geladen wird. */ --ch-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } [data-theme="einsatz"][data-event-type="djjv_event"] { --ch-brand: #8d8d96; --ch-brand-dark: #d9d9de; --ch-brand-soft: #2a2a2e; --ch-focus: #b4b4bc; } /* DJJV-Event (z. B. Bundesseminar) — DJJV-Verband-Palette statt Jugend-Look: * Primärfarbe Dunkelgrau (#4d4d4d, Styleguide S.18) statt Marken-Blau; Gelb/Rot * bleiben (bereits Verbands-konform). Attribut wird in base.html auf * gesetzt. Re-skint bg-brand / text-brand-dark / ring-brand / Aktiv-Nav ohne * Markup-Änderung. Gleiche Spezifität wie :root -> muss NACH :root stehen. */ [data-event-type="djjv_event"] { --ch-brand: #4d4d4d; --ch-brand-dark: #333333; --ch-brand-soft: #e6e6e6; --ch-focus: #4d4d4d; } [data-theme="dark"][data-event-type="djjv_event"] { /* Lighter greys so the active pill AND emphasis text read on dark surfaces * (the #333 brand-dark from the base rule is invisible on dark). */ --ch-brand: #71717a; --ch-brand-dark: #e4e4e7; --ch-brand-soft: #3a3a3a; --ch-focus: #a1a1aa; } [data-theme="outdoor"][data-event-type="djjv_event"] { --ch-brand-soft: #e6e6e6; }