/* =================================================================== tokens.css — Farben, Typografie, Abstände =================================================================== Die einzige Datei mit konkreten Farbwerten. app.css benutzt ausschliesslich var(--…). Ein neues Theme ist damit ein Block hier, und keine Zeile Layout muss angefasst werden. Themes werden ueber data-theme am gesetzt. PHP liest das Cookie und rendert es serverseitig — so blitzt beim Laden nicht kurz das falsche Theme auf. Namensregel: Tokens heissen nach ihrer ROLLE, nicht nach ihrer Farbe. --accent, nicht --orange. Sonst heisst im Hellmodus irgendwann --dark-grey hellgrau. =================================================================== */ :root, [data-theme="slate"] { color-scheme: dark; --bg: #10141b; --surface: #161c26; --surface-2: #1c2431; --line: #242e3d; --text: #c8d2e2; --text-strong: #e8eef7; --muted: #75839a; --accent: #5b8dd6; /* Navigation, Verweise, Hinweise */ --pos: #3fbfa0; /* Long, Gewinn, erledigt */ --neg: #e0567f; /* Short, Verlust, Fehler */ --warn: #d9a441; /* zu pruefen */ --spine-0-bg: #10141b; --spine-0-fg: #3d4859; --spine-1-bg: #1d3a3a; --spine-1-fg: #7fd3bd; --spine-2-bg: #22514a; --spine-2-fg: #a4e6d2; --spine-3-bg: #3fbfa0; --spine-3-fg: #08211c; --btn-bg: var(--text); --btn-fg: var(--bg); --shadow: none; } /* --- Hell: gleiche Rollen, andere Werte --------------------------- */ [data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f6; --line: #dbe1ea; --text: #2c3440; --text-strong: #131922; --muted: #6b7787; --accent: #2f6bbd; --pos: #0f8f74; --neg: #c33862; --warn: #a9740c; --spine-0-bg: #eef1f6; --spine-0-fg: #b3bdcb; --spine-1-bg: #cdece3; --spine-1-fg: #17705d; --spine-2-bg: #9ed9c8; --spine-2-fg: #0d5344; --spine-3-bg: #0f8f74; --spine-3-fg: #ffffff; --btn-bg: #131922; --btn-fg: #ffffff; --shadow: 0 1px 2px rgba(19, 25, 34, .07); } /* --- Werkbank: nach dem bestehenden Leverage-Rechner -------------- */ [data-theme="workbench"] { color-scheme: dark; --bg: #232323; --surface: #2b2b2b; --surface-2: #333333; --line: #3f3f3f; --text: #dcdcdc; --text-strong: #ffffff; --muted: #8e8e8e; --accent: #4a7fb5; /* wie der Hinweisblock */ --pos: #8fc94a; /* wie die Werte */ --neg: #d9614e; --warn: #e0a030; /* wie die Beschriftungen */ --spine-0-bg: #232323; --spine-0-fg: #565656; --spine-1-bg: #3a4426; --spine-1-fg: #b6d97a; --spine-2-bg: #4d5c2c; --spine-2-fg: #cfe89f; --spine-3-bg: #8fc94a; --spine-3-fg: #1d2410; --btn-bg: var(--warn); --btn-fg: #1d1d1d; --shadow: none; } /* --- Schrift und Raster: themeunabhaengig ------------------------- */ :root { --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --fs-xs: 11px; --fs-sm: 12.5px; --fs: 14px; --fs-lg: 17px; --fs-xl: 21px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 18px; --sp-5: 26px; --radius: 2px; --bar-h: 52px; } /* Systemvorgabe respektieren, solange nichts gewaehlt wurde. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f6; --line: #dbe1ea; --text: #2c3440; --text-strong: #131922; --muted: #6b7787; --accent: #2f6bbd; --pos: #0f8f74; --neg: #c33862; --warn: #a9740c; --spine-0-bg: #eef1f6; --spine-0-fg: #b3bdcb; --spine-1-bg: #cdece3; --spine-1-fg: #17705d; --spine-2-bg: #9ed9c8; --spine-2-fg: #0d5344; --spine-3-bg: #0f8f74; --spine-3-fg: #ffffff; --btn-bg: #131922; --btn-fg: #ffffff; --shadow: 0 1px 2px rgba(19, 25, 34, .07); } }