/* =================================================================== * 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". * * Apps DUERFEN Tokens ueberschreiben (z.B. --accent fuer Akzentfarbe), * SOLLTEN aber keine neuen CSS-Variablen ausserhalb dieses Sets nutzen, * sondern hier eine Erweiterung beantragen. * ================================================================== */ :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 ===== */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.12); --shadow-lg: 0 12px 32px rgba(0,0,0,0.20); /* ===== 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 * surface - Karten, Panels, Drawer (eine Ebene ueber bg) * surface-2 - hervorgehobenes Element auf surface * text - primaerer Text auf bg/surface * text-soft - sekundaer/Label * text-mute - tertiaer/Hinweise * border - Trennlinie Standard * border-strong - sichtbare Hairline * accent - Marken/Aktion (Default Mantik-Tiefblau) * accent-soft - Akzent in dezenter Anwendung (Hover-Bg) * ok / warn / danger - Status (auch fuer Pills/Toast) */ --bg: #fafaf8; --surface: #ffffff; --surface-2: #f3f3ef; --text: #0c0c0c; --text-soft: #5a5a5a; --text-mute: #8a8a8a; --border: #e0e0dc; --border-strong: #1a1a1a; --accent: #003049; --accent-soft: #e8eef3; --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: #16191f; --surface: #1f242d; --surface-2: #2a313c; --text: #e4e6ea; --text-soft: #b3b9c4; --text-mute: #8a93a4; --border: #2f3540; --border-strong: #404754; --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 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.60); } } /* Explizite Overrides per data-theme schlagen prefers-color-scheme */ [data-theme="light"] { --bg: #fafaf8; --surface: #ffffff; --surface-2: #f3f3ef; --text: #0c0c0c; --text-soft: #5a5a5a; --text-mute: #8a8a8a; --border: #e0e0dc; --border-strong: #1a1a1a; --accent: #003049; --accent-soft: #e8eef3; --on-accent: #ffffff; --ok: #2b8a3e; --ok-soft: #d3f9d8; --warn: #d9480f; --warn-soft: #ffe8cc; --danger: #c1121f; --danger-soft: #ffe3e3; } [data-theme="dark"] { --bg: #16191f; --surface: #1f242d; --surface-2: #2a313c; --text: #e4e6ea; --text-soft: #b3b9c4; --text-mute: #8a93a4; --border: #2f3540; --border-strong: #404754; --accent: #4dabf7; --accent-soft: #1c3a5a; --on-accent: #0c1116; --ok: #51cf66; --ok-soft: #1f3a25; --warn: #ffa94d; --warn-soft: #3a2a14; --danger: #fa5252; --danger-soft: #3a1c1c; }