/* ========================================================= Simon Morscher – Gemeinsame Design-Tokens ========================================================= Eine Quelle für das Erscheinungsbild aller internen Seiten. Die Werte stammen 1:1 aus dem Fitness-Dashboard (_fitness_template.html), weil das der Maßstab ist, an den sich der Rest angleicht. Eingebunden von: app/_header.php (Portal), app/login.php, app/register.php und den Finanz-Dashboards unter /finanzen/. NICHT von index.php — die öffentliche Startseite hat bewusst ein eigenes, geschlossenes Design in start.css. Hell/Dunkel läuft über dieselbe Dreifach-Regel wie im Fitness-Template: Systemeinstellung als Vorgabe, [data-theme] auf gewinnt in beide Richtungen. Ein Umschalter im Portal kann also einfach data-theme setzen. WICHTIG: DM Mono hat KEINEN Fettschnitt — nur 300/400/500. Nie font-weight:600/700/800 verwenden; Hierarchie läuft über Größe, Farbe, Versalien und Laufweite. ========================================================= */ :root { color-scheme: light; /* Flächen — warmes Papier statt kühlem Blaugrau */ --bg: #f9f9f7; --surface: #fcfcfb; --surface-2: #f1f1ed; /* Schrift */ --ink: #0b0b0b; --ink2: #52514e; --muted: #898781; --text: var(--ink); /* Altname, im Portal-CSS in Gebrauch */ /* Linien und Schatten */ --border: rgba(11, 11, 11, .10); --line: var(--border); /* Altname */ --grid: #e1e0d9; --baseline: #c3c2b7; --shadow: 0 1px 2px rgba(11, 11, 11, .03), 0 8px 24px rgba(11, 11, 11, .05); /* Akzent — das Blau der Laufkurve, damit das Portal keine eigene Farbe erfindet */ --accent: #2a78d6; --accent-2: #1baf7a; --accent-ink: #ffffff; --accent-weich: rgba(42, 120, 214, .12); /* Zustände (Ampel). Namen aus dem Fitness-Template, dazu die im Portal gebräuchlichen Zweitnamen für Flugpreis- und Finanzbewertung. */ --st-good: #006300; --st-warn: #8a5a00; --st-serious: #a33a1f; --gut: var(--st-good); --mittel: var(--st-warn); --schlecht: var(--st-serious); /* Gewinn/Verlust — kräftiger als die Ampel, weil sie in Tabellen nebeneinander stehen und auf einen Blick unterscheidbar sein müssen. */ --plus: #0f7a4a; --minus: #c0392b; /* Zweitakzent für Kategorien (Aktien-Etiketten, Trigger im Finanz-Tool). Entspricht --c-score aus dem Fitness-Dashboard. */ --lila: #4a3aa7; /* Akzent als Schriftfarbe: das helle Kurvenblau reicht bei 9-10px nicht fuer lesbaren Kontrast. Wert aus dem Fitness-Template (--sleep-tief). */ --accent-dunkel: #1c5cab; /* Sportarten (Fitness-Dashboard, hier nur zur Vollständigkeit) */ --c-laufen: #2a78d6; --c-rad: #008300; --c-schwimmen: #e87ba4; --c-gehen: #eda100; --c-sonstiges: #1baf7a; --sport: var(--c-gehen); --radius: 16px; --font: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Dunkel als Systemvorgabe — außer die Seite ist ausdrücklich auf hell gestellt */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #262624; --ink: #ffffff; --ink2: #c3c2b7; --muted: #898781; --border: rgba(255, 255, 255, .10); --grid: #2c2c2a; --baseline: #383835; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --accent: #3987e5; --accent-2: #199e70; --accent-weich: rgba(57, 135, 229, .16); --st-good: #0ca30c; --st-warn: #fab219; --st-serious: #ec835a; --plus: #35c281; --minus: #f07167; --lila: #9085e9; --accent-dunkel: #86b6ef; --c-laufen: #3987e5; --c-rad: #008300; --c-schwimmen: #d55181; --c-gehen: #c98500; --c-sonstiges: #199e70; } } /* Ausdrücklich dunkel gewählt — gewinnt auch bei heller Systemeinstellung */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #262624; --ink: #ffffff; --ink2: #c3c2b7; --muted: #898781; --border: rgba(255, 255, 255, .10); --grid: #2c2c2a; --baseline: #383835; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --accent: #3987e5; --accent-2: #199e70; --accent-weich: rgba(57, 135, 229, .16); --st-good: #0ca30c; --st-warn: #fab219; --st-serious: #ec835a; --plus: #35c281; --minus: #f07167; --lila: #9085e9; --accent-dunkel: #86b6ef; --c-laufen: #3987e5; --c-rad: #008300; --c-schwimmen: #d55181; --c-gehen: #c98500; --c-sonstiges: #199e70; }