/* ============================================================================= tokens.css — Design-Token der Kraftsport-Webseite Single Source of Truth. Enthaelt ausschliesslich Custom Properties, keine Selektoren mit sichtbaren Stilen. Theme-Strategie (Dark Mode ist Standard): 1. :root -> dunkle Werte (Vorgabe) 2. @media (prefers-color-scheme: light) auf :root:not([data-theme="dark"]) -> helle Werte, solange keine explizite dunkle Wahl vorliegt 3. :root[data-theme="light"] -> explizite helle Wahl Die Umschaltung setzt data-theme auf . Weil Regel 2 den Fall [data-theme="dark"] ausschliesst und Regel 3 unabhaengig vom Systemmodus greift, gewinnt eine gesetzte Nutzerwahl in beide Richtungen. Wichtig: --muscle-* sind SEMANTISCHE Datenfarben der Muskelkarte (rot = primaer beansprucht, gelb = sekundaer). Sie duerfen niemals als UI-Akzent, Rahmen, Link- oder Buttonfarbe verwendet werden. ========================================================================== */ :root { color-scheme: dark; /* --- Farbkanaele ------------------------------------------------------- Rohkanaele fuer hsl(... / alpha). Nur dort verwenden, wo Transparenz gebraucht wird, sonst die fertigen Farbtoken nutzen. */ --kanal-neutral: 220 14%; --kanal-akzent: 88 72%; --kanal-erfolg: 158 64%; --kanal-warnung: 32 92%; --kanal-fehler: 342 74%; --kanal-info: 208 84%; /* --- Flaechen ---------------------------------------------------------- */ --farbe-bg: hsl(222 18% 8%); --farbe-bg-tief: hsl(222 20% 5%); --farbe-flaeche: hsl(222 16% 12%); --farbe-flaeche-hoch: hsl(222 15% 16%); --farbe-flaeche-hover: hsl(222 15% 20%); --farbe-flaeche-gedaempft: hsl(222 14% 14%); --farbe-overlay: hsl(222 24% 4% / 0.72); /* --- Raender ----------------------------------------------------------- */ --farbe-rand: hsl(222 12% 24%); --farbe-rand-stark: hsl(222 12% 36%); --farbe-rand-leise: hsl(222 12% 18%); /* --- Text -------------------------------------------------------------- */ --farbe-text: hsl(210 20% 96%); --farbe-text-leise: hsl(214 14% 74%); --farbe-text-schwach: hsl(214 12% 58%); --farbe-text-invers: hsl(222 20% 7%); /* --- Akzent: sattes Limettengruen -------------------------------------- Bewusst weit weg von Rot und Gelb, damit der UI-Akzent nie mit den Muskelfarben verwechselt wird. */ --farbe-akzent: hsl(88 72% 52%); --farbe-akzent-hell: hsl(88 76% 64%); --farbe-akzent-dunkel: hsl(88 70% 40%); --farbe-akzent-weich: hsl(88 60% 16%); --farbe-akzent-weicher: hsl(88 55% 12%); --farbe-auf-akzent: hsl(90 60% 8%); --farbe-link: hsl(88 74% 62%); --farbe-link-hover: hsl(88 80% 72%); --farbe-fokus: hsl(88 90% 66%); /* --- Statusfarben ------------------------------------------------------- Deutlich verschieden von --muscle-primary (Rot) und --muscle-secondary (Gelb): Fehler ist himbeerrot/magenta, Warnung ist Bernstein/Orange. */ --farbe-erfolg: hsl(158 64% 44%); --farbe-erfolg-weich: hsl(158 50% 13%); --farbe-erfolg-rand: hsl(158 52% 30%); --farbe-auf-erfolg: hsl(158 60% 96%); --farbe-warnung: hsl(32 92% 54%); --farbe-warnung-weich: hsl(32 60% 14%); --farbe-warnung-rand: hsl(32 70% 34%); --farbe-auf-warnung: hsl(32 80% 96%); --farbe-fehler: hsl(342 74% 58%); --farbe-fehler-weich: hsl(342 50% 15%); --farbe-fehler-rand: hsl(342 55% 38%); --farbe-auf-fehler: hsl(342 80% 97%); --farbe-info: hsl(208 84% 60%); --farbe-info-weich: hsl(208 55% 15%); --farbe-info-rand: hsl(208 55% 38%); --farbe-auf-info: hsl(208 90% 97%); /* --- Muskelkarte: semantische Datenfarben ------------------------------ NUR fuer die Muskelkarte und ihre Legende. */ --muscle-idle: hsl(220 8% 46%); --muscle-idle-rand: hsl(220 10% 62%); --muscle-idle-hover: hsl(220 9% 56%); --muscle-primary: hsl(2 78% 54%); --muscle-primary-rand: hsl(2 84% 70%); --muscle-secondary: hsl(46 96% 56%); --muscle-secondary-rand: hsl(46 98% 72%); --muscle-kontur: hsl(222 20% 8%); /* --- Wochenvolumen-Heatmap (fuenf Stufen) ------------------------------ */ --heat-0: hsl(222 14% 15%); --heat-1: hsl(88 30% 24%); --heat-2: hsl(88 42% 32%); --heat-3: hsl(88 56% 42%); --heat-4: hsl(88 72% 54%); --heat-0-text: hsl(214 12% 66%); --heat-1-text: hsl(88 30% 92%); --heat-2-text: hsl(88 34% 95%); --heat-3-text: hsl(90 60% 8%); --heat-4-text: hsl(90 60% 8%); --heat-rand: hsl(222 12% 30%); --heat-muster: hsl(0 0% 100% / 0.22); /* --- Abstaende: strenges 4px-Raster ------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-13: 3.25rem; /* 52px */ --space-14: 3.5rem; /* 56px */ --space-15: 3.75rem; /* 60px */ --space-16: 4rem; /* 64px */ /* --- Schrift ----------------------------------------------------------- */ /* Arial als feste Entscheidung des Betreibers. Keine Schriftdatei wird mitgeliefert oder nachgeladen; der @font-face-Block in app.css bleibt deaktiviert. Die Ersatzangaben decken Systeme ohne Arial ab: "Liberation Sans" (die meisten Linux-Distributionen) und Roboto (Android) sind metrisch nahezu deckungsgleich, sodass Zeilenumbrueche und Spaltenbreiten gleich bleiben. Dies ist der EINZIGE Ort, an dem die Textschrift festgelegt wird - jede Regel im CSS greift ueber var(--font-sans) darauf zu. */ --font-sans: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* Fluide Typo-Skala (Basis 16px bei 320px, Zielbreite 1280px) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 1.875rem); --fs-3xl: clamp(1.875rem, 1.56rem + 1.55vw, 2.5rem); --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem); --fw-normal: 400; --fw-mittel: 500; --fw-halbfett: 600; --fw-fett: 700; --fw-schwarz: 800; --lh-eng: 1.1; --lh-knapp: 1.25; --lh-normal: 1.55; --lh-weit: 1.75; --ls-eng: -0.02em; --ls-normal: 0; --ls-weit: 0.08em; /* --- Radien ------------------------------------------------------------ */ --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-voll: 9999px; /* --- Schatten ---------------------------------------------------------- */ --schatten-xs: 0 1px 2px hsl(222 30% 2% / 0.5); --schatten-sm: 0 2px 4px hsl(222 30% 2% / 0.5), 0 1px 2px hsl(222 30% 2% / 0.4); --schatten-md: 0 6px 14px hsl(222 30% 2% / 0.55), 0 2px 4px hsl(222 30% 2% / 0.4); --schatten-lg: 0 14px 32px hsl(222 30% 2% / 0.6), 0 4px 8px hsl(222 30% 2% / 0.45); --schatten-xl: 0 28px 60px hsl(222 30% 2% / 0.66); --schatten-innen: inset 0 1px 0 hsl(0 0% 100% / 0.05); --ring-akzent: 0 0 0 3px hsl(var(--kanal-akzent) 52% / 0.32); /* --- Breakpoint-Werte (Referenz; Media Queries brauchen Literale) ------ */ --bp-xs: 480px; --bp-sm: 768px; --bp-md: 1024px; --bp-lg: 1280px; /* --- Containerbreiten -------------------------------------------------- */ --breite-eng: 34rem; --breite-text: 42rem; --breite-inhalt: 58rem; --breite-container: 75rem; --breite-weit: 90rem; --container-pad: var(--space-4); /* --- z-index-Stufen ---------------------------------------------------- */ --z-basis: 0; --z-erhaben: 10; --z-klebrig: 100; --z-kopfzeile: 200; --z-menue: 400; --z-overlay: 800; --z-modal: 900; --z-tooltip: 1000; --z-flash: 1100; --z-skiplink: 1200; /* --- Bewegung ---------------------------------------------------------- */ --dauer-sofort: 80ms; --dauer-schnell: 140ms; --dauer-normal: 220ms; --dauer-langsam: 340ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-raus: cubic-bezier(0, 0, 0.2, 1); --ease-rein: cubic-bezier(0.4, 0, 1, 1); --ease-feder: cubic-bezier(0.34, 1.4, 0.64, 1); /* --- Sonstiges --------------------------------------------------------- */ --ziel-min: 2.75rem; /* 44px Mindest-Trefferflaeche */ --fokus-breite: 2px; --fokus-abstand: 2px; --rand-breite: 1px; --kopfzeile-hoehe: 4rem; } /* ============================================================================= Heller Modus ohne explizite Nutzerwahl (Systemeinstellung) ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --farbe-bg: hsl(210 30% 99%); --farbe-bg-tief: hsl(214 26% 95%); --farbe-flaeche: hsl(0 0% 100%); --farbe-flaeche-hoch: hsl(210 32% 97%); --farbe-flaeche-hover: hsl(212 30% 94%); --farbe-flaeche-gedaempft: hsl(212 28% 96%); --farbe-overlay: hsl(222 24% 18% / 0.5); --farbe-rand: hsl(214 20% 84%); --farbe-rand-stark: hsl(214 16% 64%); --farbe-rand-leise: hsl(214 24% 90%); --farbe-text: hsl(222 32% 12%); --farbe-text-leise: hsl(220 14% 34%); --farbe-text-schwach: hsl(220 12% 46%); --farbe-text-invers: hsl(210 30% 99%); --farbe-akzent: hsl(88 68% 29%); --farbe-akzent-hell: hsl(88 62% 40%); --farbe-akzent-dunkel: hsl(88 72% 24%); --farbe-akzent-weich: hsl(88 58% 93%); --farbe-akzent-weicher: hsl(88 56% 96%); --farbe-auf-akzent: hsl(90 60% 98%); --farbe-link: hsl(88 72% 26%); --farbe-link-hover: hsl(88 76% 20%); --farbe-fokus: hsl(88 72% 28%); --farbe-erfolg: hsl(158 68% 26%); --farbe-erfolg-weich: hsl(158 52% 94%); --farbe-erfolg-rand: hsl(158 40% 72%); --farbe-auf-erfolg: hsl(158 70% 12%); --farbe-warnung: hsl(32 88% 34%); --farbe-warnung-weich: hsl(32 88% 94%); --farbe-warnung-rand: hsl(32 70% 70%); --farbe-auf-warnung: hsl(32 80% 14%); --farbe-fehler: hsl(342 72% 40%); --farbe-fehler-weich: hsl(342 74% 96%); --farbe-fehler-rand: hsl(342 52% 78%); --farbe-auf-fehler: hsl(342 70% 16%); --farbe-info: hsl(208 82% 36%); --farbe-info-weich: hsl(208 84% 95%); --farbe-info-rand: hsl(208 60% 74%); --farbe-auf-info: hsl(208 80% 14%); --muscle-idle: hsl(220 12% 72%); --muscle-idle-rand: hsl(220 12% 48%); --muscle-idle-hover: hsl(220 12% 62%); --muscle-primary: hsl(2 74% 48%); --muscle-primary-rand: hsl(2 74% 30%); --muscle-secondary: hsl(46 92% 52%); --muscle-secondary-rand: hsl(40 80% 30%); --muscle-kontur: hsl(222 24% 22%); --heat-0: hsl(212 26% 95%); --heat-1: hsl(88 40% 86%); --heat-2: hsl(88 44% 72%); --heat-3: hsl(88 50% 54%); --heat-4: hsl(88 66% 36%); --heat-0-text: hsl(220 14% 38%); --heat-1-text: hsl(90 60% 14%); --heat-2-text: hsl(90 60% 12%); --heat-3-text: hsl(90 60% 10%); --heat-4-text: hsl(90 60% 98%); --heat-rand: hsl(214 18% 72%); --heat-muster: hsl(222 40% 12% / 0.28); --schatten-xs: 0 1px 2px hsl(220 30% 30% / 0.12); --schatten-sm: 0 2px 4px hsl(220 30% 30% / 0.1), 0 1px 2px hsl(220 30% 30% / 0.08); --schatten-md: 0 6px 14px hsl(220 30% 30% / 0.12), 0 2px 4px hsl(220 30% 30% / 0.08); --schatten-lg: 0 14px 32px hsl(220 30% 30% / 0.14), 0 4px 8px hsl(220 30% 30% / 0.08); --schatten-xl: 0 28px 60px hsl(220 30% 30% / 0.18); --schatten-innen: inset 0 1px 0 hsl(0 0% 100% / 0.8); --ring-akzent: 0 0 0 3px hsl(var(--kanal-akzent) 32% / 0.24); } } /* ============================================================================= Heller Modus per expliziter Nutzerwahl (data-theme="light" auf ) Gewinnt unabhaengig von der Systemeinstellung. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --farbe-bg: hsl(210 30% 99%); --farbe-bg-tief: hsl(214 26% 95%); --farbe-flaeche: hsl(0 0% 100%); --farbe-flaeche-hoch: hsl(210 32% 97%); --farbe-flaeche-hover: hsl(212 30% 94%); --farbe-flaeche-gedaempft: hsl(212 28% 96%); --farbe-overlay: hsl(222 24% 18% / 0.5); --farbe-rand: hsl(214 20% 84%); --farbe-rand-stark: hsl(214 16% 64%); --farbe-rand-leise: hsl(214 24% 90%); --farbe-text: hsl(222 32% 12%); --farbe-text-leise: hsl(220 14% 34%); --farbe-text-schwach: hsl(220 12% 46%); --farbe-text-invers: hsl(210 30% 99%); --farbe-akzent: hsl(88 68% 29%); --farbe-akzent-hell: hsl(88 62% 40%); --farbe-akzent-dunkel: hsl(88 72% 24%); --farbe-akzent-weich: hsl(88 58% 93%); --farbe-akzent-weicher: hsl(88 56% 96%); --farbe-auf-akzent: hsl(90 60% 98%); --farbe-link: hsl(88 72% 26%); --farbe-link-hover: hsl(88 76% 20%); --farbe-fokus: hsl(88 72% 28%); --farbe-erfolg: hsl(158 68% 26%); --farbe-erfolg-weich: hsl(158 52% 94%); --farbe-erfolg-rand: hsl(158 40% 72%); --farbe-auf-erfolg: hsl(158 70% 12%); --farbe-warnung: hsl(32 88% 34%); --farbe-warnung-weich: hsl(32 88% 94%); --farbe-warnung-rand: hsl(32 70% 70%); --farbe-auf-warnung: hsl(32 80% 14%); --farbe-fehler: hsl(342 72% 40%); --farbe-fehler-weich: hsl(342 74% 96%); --farbe-fehler-rand: hsl(342 52% 78%); --farbe-auf-fehler: hsl(342 70% 16%); --farbe-info: hsl(208 82% 36%); --farbe-info-weich: hsl(208 84% 95%); --farbe-info-rand: hsl(208 60% 74%); --farbe-auf-info: hsl(208 80% 14%); --muscle-idle: hsl(220 12% 72%); --muscle-idle-rand: hsl(220 12% 48%); --muscle-idle-hover: hsl(220 12% 62%); --muscle-primary: hsl(2 74% 48%); --muscle-primary-rand: hsl(2 74% 30%); --muscle-secondary: hsl(46 92% 52%); --muscle-secondary-rand: hsl(40 80% 30%); --muscle-kontur: hsl(222 24% 22%); --heat-0: hsl(212 26% 95%); --heat-1: hsl(88 40% 86%); --heat-2: hsl(88 44% 72%); --heat-3: hsl(88 50% 54%); --heat-4: hsl(88 66% 36%); --heat-0-text: hsl(220 14% 38%); --heat-1-text: hsl(90 60% 14%); --heat-2-text: hsl(90 60% 12%); --heat-3-text: hsl(90 60% 10%); --heat-4-text: hsl(90 60% 98%); --heat-rand: hsl(214 18% 72%); --heat-muster: hsl(222 40% 12% / 0.28); --schatten-xs: 0 1px 2px hsl(220 30% 30% / 0.12); --schatten-sm: 0 2px 4px hsl(220 30% 30% / 0.1), 0 1px 2px hsl(220 30% 30% / 0.08); --schatten-md: 0 6px 14px hsl(220 30% 30% / 0.12), 0 2px 4px hsl(220 30% 30% / 0.08); --schatten-lg: 0 14px 32px hsl(220 30% 30% / 0.14), 0 4px 8px hsl(220 30% 30% / 0.08); --schatten-xl: 0 28px 60px hsl(220 30% 30% / 0.18); --schatten-innen: inset 0 1px 0 hsl(0 0% 100% / 0.8); --ring-akzent: 0 0 0 3px hsl(var(--kanal-akzent) 32% / 0.24); } /* Explizite dunkle Wahl: setzt die Vorgabe erneut, damit sie auch in einer hellen Systemumgebung mit hoeherer Spezifitaet gewinnt. */ :root[data-theme="dark"] { color-scheme: dark; } /* Groessere Seitenpolster ab Tablet */ @media (min-width: 768px) { :root { --container-pad: var(--space-6); } } @media (min-width: 1280px) { :root { --container-pad: var(--space-8); } }