/* =================================================================== * Mantik-Schema Web-Style: Tokens * * Pflicht-Layer fuer JEDE Mantik-Web-App. Definiert das Token-Vokabular: * Farben, Spacing, Typo, Radien, Shadows. * * Light- und Dark-Theme. Default ist Auto (folgt prefers-color-scheme). * Explizit setzen via oder data-theme="dark". * * Kontrast-Doktrin (Bug #1171/#1134): Tiefe kommt aus FIGUR-GRUND (Seite grau, * Karten heben sich ab) + dezentem Rand + echtem Schatten - NICHT aus fetten * Raendern um alles. Harte Raender NUR im OS-Hochkontrast (prefers-contrast, s.u.). * * Apps DUERFEN Tokens ueberschreiben (z.B. --accent), SOLLTEN aber keine neuen * CSS-Variablen ausserhalb dieses Sets nutzen. * ================================================================== */ :root { /* ===== Typo ===== */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; --font-size-xs: 0.75rem; /* 12 px */ --font-size-sm: 0.875rem; /* 14 px */ --font-size-base: 1rem; /* 16 px - Body-Default */ --font-size-lg: 1.125rem; /* 18 px */ --font-size-xl: 1.375rem; /* 22 px - Section-Titel */ --font-size-2xl: 1.75rem; /* 28 px - Seiten-Titel */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ===== Spacing (8-px-Raster) ===== */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ /* ===== Radien ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ===== Shadows (spuerbare, aber ruhige Tiefe) ===== */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.13); --shadow-md: 0 4px 12px rgba(0,0,0,0.15); --shadow-lg: 0 12px 32px rgba(0,0,0,0.22); /* ===== Layout-Konstanten ===== */ --container-narrow: 720px; --container-default: 1100px; --container-wide: 1400px; /* ===== Z-Indizes (geordnet) ===== */ --z-base: 1; --z-sticky: 50; --z-drawer: 100; --z-modal: 200; --z-toast: 300; /* ===== Default-Theme: Light ===== */ /* Farbsemantik: * bg - Seiten-Hintergrund (bewusst grau: Karten heben sich ab) * surface - Karten, Panels, Drawer (eine Ebene ueber bg, hell) * surface-2 - hervorgehobenes Element auf surface (Knopf, Zeile, Hover) * text - primaerer Text auf bg/surface * text-soft - sekundaer/Label * text-mute - tertiaer/Hinweise (WCAG-AA lesbar) * border - Trennlinie Standard (dezente, sichtbare Hairline) * border-strong - kraeftige Kontur fuer Betonung * accent - Marken/Aktion (Default Mantik-Tiefblau) * accent-soft - Akzent dezent (Hover-/Aktiv-Bg) * ok / warn / danger - Status */ --bg: #e9e9e5; --surface: #ffffff; --surface-2: #e4e4de; --text: #0c0c0c; --text-soft: #5a5a5a; --text-mute: #6b6b6b; --border: #cfcfc9; --border-strong: #1a1a1a; --accent: #003049; --accent-soft: #dce7ef; --on-accent: #ffffff; --ok: #2b8a3e; --ok-soft: #d3f9d8; --warn: #d9480f; --warn-soft: #ffe8cc; --danger: #c1121f; --danger-soft: #ffe3e3; --focus-ring: #4dabf7; } /* ===== Dark-Theme ===== */ @media (prefers-color-scheme: dark) { :root { --bg: #14171d; --surface: #1f242d; --surface-2: #2b323d; --text: #e4e6ea; --text-soft: #b3b9c4; --text-mute: #8a93a4; --border: #3d4450; --border-strong: #545c6a; --accent: #4dabf7; --accent-soft: #1c3a5a; --on-accent: #0c1116; --ok: #51cf66; --ok-soft: #1f3a25; --warn: #ffa94d; --warn-soft: #3a2a14; --danger: #fa5252; --danger-soft: #3a1c1c; --focus-ring: #74c0fc; --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.50); --shadow-lg: 0 12px 32px rgba(0,0,0,0.65); } } /* Explizite Overrides per data-theme schlagen prefers-color-scheme */ [data-theme="light"] { --bg: #e9e9e5; --surface: #ffffff; --surface-2: #e4e4de; --text: #0c0c0c; --text-soft: #5a5a5a; --text-mute: #6b6b6b; --border: #cfcfc9; --border-strong: #1a1a1a; --accent: #003049; --accent-soft: #dce7ef; --on-accent: #ffffff; --ok: #2b8a3e; --ok-soft: #d3f9d8; --warn: #d9480f; --warn-soft: #ffe8cc; --danger: #c1121f; --danger-soft: #ffe3e3; } [data-theme="dark"] { --bg: #14171d; --surface: #1f242d; --surface-2: #2b323d; --text: #e4e6ea; --text-soft: #b3b9c4; --text-mute: #8a93a4; --border: #3d4450; --border-strong: #545c6a; --accent: #4dabf7; --accent-soft: #1c3a5a; --on-accent: #0c1116; --ok: #51cf66; --ok-soft: #1f3a25; --warn: #ffa94d; --warn-soft: #3a2a14; --danger: #fa5252; --danger-soft: #3a1c1c; } /* ===== OS-Hochkontrast: folgt dem System (Barrierefreiheit Schicht 0) ===== * Steht am Dateiende, damit es die data-theme-Overrides per Quell-Reihenfolge * schlaegt. Greift NUR, wenn im System Hochkontrast aktiv ist - dann harte * Raender + maximaler Text-Kontrast. Im Normalfall unberuehrt. */ @media (prefers-contrast: more) { :root { --border: #000000; --border-strong: #000000; --text-mute: var(--text); --text-soft: var(--text); --focus-ring: #000000; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root { --border: #ffffff; --border-strong: #ffffff; --text-mute: var(--text); --text-soft: var(--text); --focus-ring: #ffffff; } } /* ===== Erzwungene Farben (OS High Contrast, forced-colors) ===== * Ueberlaesst Flaechen/Text/Rand den System-Farb-Keywords. */ @media (forced-colors: active) { :root { --bg: Canvas; --surface: Canvas; --surface-2: Canvas; --text: CanvasText; --text-soft: CanvasText; --text-mute: CanvasText; --border: CanvasText; --border-strong: CanvasText; --accent: Highlight; --on-accent: HighlightText; --accent-soft: Canvas; --focus-ring: Highlight; } }