/* playground0 — shared themes for all sibling apps (served at /shared/theme.css). Apps include it and map their component styles onto these variables. There are really just TWO colour palettes — light and dark. The four theme classes differ ONLY by font (--font: serif vs. sans). The single colour exception is the red accent in theme-serif-light. theme-serif-light = light palette, serif, RED accent (the one exception) theme-modern-light = light palette, sans theme-serif-dark = dark palette, serif theme-modern-dark = dark palette, sans Selected via a class; the shared menu stores it in localStorage `pg0.theme.`. App-specific extra themes (vocabai) stay local. */ @font-face { font-family: 'New Computer Modern'; src: local('NewComputerModern10'), url('fonts/NewCM10-Regular.woff2') format('woff2'), url('fonts/NewCM10-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'New Computer Modern'; src: local('NewComputerModern10-Bold'), url('fonts/NewCM10-Bold.woff2') format('woff2'), url('fonts/NewCM10-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'New Computer Modern'; src: local('NewComputerModern10-Italic'), url('fonts/NewCM10-Italic.woff2') format('woff2'), url('fonts/NewCM10-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } /* Native, leichtere Schrift-Darstellung wie in macOS/iOS-Apps: Browser rendern auf macOS sonst kräftiger (subpixel) als native Apps. Grayscale- Smoothing trifft die System-Optik (iOS rendert ohnehin grayscale). */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Light palette (shared by serif-light + modern-light) ---- */ :root, body.theme-serif-light, body.theme-modern-light { --bg: #ffffff; --panel: #f5f5f5; --panel-alt: #ebebeb; --fg: #242424; --fg-dim: #424242; --muted: #616161; --rule: #d1d1d1; --hairline: #e0e0e0; --hover: #f0f0f0; --selected: #e0e0e0; --input-bg: #ffffff; --input-brd: #d1d1d1; --accent: #5b5fc7; --focus: #5b5fc7; --link: #0f6cbd; } /* ---- Dark palette (shared by serif-dark + modern-dark) ---- */ body.theme-serif-dark, body.theme-modern-dark { --bg: #1f1f1f; --panel: #292929; --panel-alt: #333333; --fg: #ffffff; --fg-dim: #d6d6d6; --muted: #adadad; --rule: #404040; --hairline: #333333; --hover: #383838; --selected: #424242; --input-bg: #292929; --input-brd: #525252; --accent: #7f85f5; --focus: #7f85f5; --link: #479ef5; } /* ---- Font is the only difference between serif and modern ---- */ :root, body.theme-serif-light, body.theme-serif-dark { --font: 'New Computer Modern', Georgia, serif; } body.theme-modern-light, body.theme-modern-dark { /* Native System-Font je Plattform, Apple zuerst → San Francisco auf macOS/iOS (auch falls Segoe via Office installiert ist), Segoe UI auf Windows, Roboto auf Android. Kein Webfont. */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Anthrazit-Hintergrund nur im Modern-Dark (Serif-Dark bleibt #1f1f1f). */ body.theme-modern-dark { --bg: #191a1c; } /* ---- The single colour exception: red accent in serif-light ---- */ body.theme-serif-light { --accent: #b03a2e; --focus: #b03a2e; }