/* Design tokens: colours, spacing, typography scale. * * Three themes, switched via [data-theme] on : * hell — default, friendly, colourful * dunkel — dusk and indoor halls * kontrast — direct sunlight: pure black on white, no shadows, no gradients * * Font size is driven by --ui-scale, never by transform: scale() or browser * zoom — both break position: fixed and elementFromPoint, and with them the * drag ghost on the admin board. */ :root { --ui-scale: 1; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --sidebar-w: 10rem; --content-max: 62rem; --tap-min: 2.75rem; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", monospace; --weight-normal: 400; --weight-medium: 600; --weight-bold: 800; /* Skill-level colours. They appear only as an edge, a labelled chip, or — * since GSN-0033 — a translucent tint on the always-dark sidebar; never as * a solid panel background on a light surface. See modules/frontend-ui/CLAUDE.md. * * Gelb and Orange are deliberately far apart in hue (48° vs 24°, an amber * fix for GSF-0032): the old pair sat 15° apart and, worse, at nearly the * same darkness, so as small sidebar dots in outdoor light they were close * to indistinguishable. Gelb stays bright — a genuinely light "yellow" is * inherently too pale for white text, so anywhere it needs to double as * text or a fill, pair it with dark ink, never white. * * The -rgb companions exist only for the sidebar tint (`rgba(var(...), a)`); * every js/css/api usage of --gruppe-* itself is unaffected. */ --gruppe-gruen: #1f7a3d; --gruppe-gruen-rgb: 31, 122, 61; --gruppe-gelb: #facc15; --gruppe-gelb-rgb: 250, 204, 21; --gruppe-rot: #b3261e; --gruppe-rot-rgb: 179, 38, 30; --gruppe-orange: #c45308; --gruppe-orange-rgb: 196, 83, 8; /* UI status sits outside the group palette so a red group chip is never * confused with a red error. */ --ui-accent: #1f4fd8; --ui-accent-soft: #e5ecff; --ui-warn: #7a3ea8; } /* ---------- hell (default) ---------- */ :root, :root[data-theme="hell"] { --bg: #eef1f5; --bg-image-opacity: 0.5; --surface: #ffffff; --surface-2: #f4f6fa; --surface-sunken: #e6eaf1; --border: #c3cbd8; --border-strong: #8f9bb0; --text: #10151f; --text-soft: #414b5c; --text-mute: #5f6b7f; --text-invert: #ffffff; --shadow: 0 1px 2px rgba(16, 21, 31, 0.08), 0 8px 24px -16px rgba(16, 21, 31, 0.35); --sidebar-bg: #10151f; --sidebar-text: #eef1f5; --sidebar-mute: #97a2b5; } /* ---------- dunkel ---------- */ :root[data-theme="dunkel"] { --bg: #0d1117; --bg-image-opacity: 0.22; --surface: #171d26; --surface-2: #1e2632; --surface-sunken: #11161d; --border: #333d4d; --border-strong: #5b6779; --text: #f2f5f9; --text-soft: #c3cbd8; --text-mute: #94a0b2; --text-invert: #0d1117; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.8); --sidebar-bg: #060910; --sidebar-text: #f2f5f9; --sidebar-mute: #8d99ac; --gruppe-gruen: #4ade80; --gruppe-gruen-rgb: 74, 222, 128; --gruppe-gelb: #facc15; --gruppe-gelb-rgb: 250, 204, 21; --gruppe-rot: #f87171; --gruppe-rot-rgb: 248, 113, 113; --gruppe-orange: #fb923c; --gruppe-orange-rgb: 251, 146, 60; --ui-accent: #7aa2ff; --ui-accent-soft: #1c2740; --ui-warn: #c084fc; } /* ---------- kontrast ---------- * Maximum luminance contrast for direct sun. No shadows, no gradients, no * background image, heavier type. */ :root[data-theme="kontrast"] { --bg: #ffffff; --bg-image-opacity: 0; --surface: #ffffff; --surface-2: #ffffff; --surface-sunken: #ffffff; --border: #000000; --border-strong: #000000; --text: #000000; --text-soft: #000000; --text-mute: #000000; --text-invert: #ffffff; --shadow: none; --sidebar-bg: #000000; --sidebar-text: #ffffff; --sidebar-mute: #ffffff; --gruppe-gruen: #005c1f; --gruppe-gruen-rgb: 0, 92, 31; /* Gelb bleibt hell wie in den anderen Themes — Schwarz auf Gelb ist der * höchste erreichbare Kontrast, passend zum Kontrast-Theme selbst. */ --gruppe-gelb: #facc15; --gruppe-gelb-rgb: 250, 204, 21; --gruppe-rot: #a30000; --gruppe-rot-rgb: 163, 0, 0; /* Dunkler als im hellen Theme (6,3:1 statt 4,6:1 gegen Weiß) — Kontrast * existiert für pralle Sonne, verdient also mehr Reserve, nicht weniger. */ --gruppe-orange: #a34100; --gruppe-orange-rgb: 163, 65, 0; --ui-accent: #0032b3; --ui-accent-soft: #ffffff; --ui-warn: #4b0082; --weight-normal: 600; --weight-medium: 700; --weight-bold: 900; } :root[data-theme="kontrast"] * { text-shadow: none !important; }