/* ============================================================ PINGBOOK · Design Tokens ------------------------------------------------------------ The single source of truth for colour, type, spacing, radii, shadows and motion. Every component references these vars — never hard-coded values. Themes are attribute-driven on : (default) Values are the *effective* set distilled from the original layered `ds.css` (the calm, compact "Cursor-like" scale). Brand green is the ONE accent — used for the logo, the verified mark and active wisps only. ============================================================ */ /* Osmo fluid scaling engine — the fluid rem base on (scaling.css; the `--size-font` named in comments is not a real property). Spacing / radii stay in rem; type (--fs-*) is em so it nests under that root. */ @import url("scaling.css"); :root { /* ---- Brand — the single accent ---- */ --brand: #2fbf45; --brand-strong: #27a93b; --brand-tint: rgba(74, 208, 83, 0.14); /* ---- AI accent — indigo, for AI / locked moments only ---- 03.10.2026 (WCAG-Audit, Punkt 18): #5b61d6 → #585ed0 — als Text hielt er auf --bg nur 4.43:1, auf --ai-tint (Karte) 4.32:1; jetzt ≥ 4.5. */ --ai: #585ed0; --ai-tint: rgba(91, 97, 214, 0.10); --ai-border: rgba(91, 97, 214, 0.28); /* ---- Radii — calm, consistent progression (rem: scale with --size-font; px values shown are the 1440-reference px) ---- */ --r-xs: 0.3125rem; /* 5px */ --r-sm: 0.4375rem; /* 7px */ --r-md: 0.5625rem; /* 9px */ --r-lg: 0.75rem; /* 12px */ --r-xl: 1rem; /* 16px */ --r-pill: 999px; /* ---- Spacing — 4px base (rem: scales with --size-font) ---- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ /* ---- Type ---- */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Diatype Rounded", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* em type scale — nests under fluid rem root (scaling.css → html). 2.625 · 1.5 · 1 · .9375 · .875 · .8125 · .75 */ --fs-label: .75em; /* tiny meta / uppercase eyebrows */ --fs-xs: .8125em; /* smaller meta / captions */ --fs-sm: .875em; /* one step under body */ --fs-md: .9375em; /* mid UI (submenu, chrome) */ --fs-body: 1em; /* main / body */ --fs-h3: 1.5em; /* secondary large · card / section heads */ --fs-lg: 1.5em; /* secondary large headlines */ --fs-xl: 1.875em; /* stat numbers / large UI figures */ --fs-display: 2.625em; /* hero / page H1 largest */ --lh-tight: 1.1; --lh-body: 1.5; /* ---- Laufweiten — EINE Treppe statt 24 Streuwerte (29.08.). Osmo-Prinzip: je grösser die Schrift, desto enger; Uppercase- Labels laufen weit. Krumme Zwischenwerte (-.012/-.015/-.018, .06-.09) sind auf diese vier Stufen normalisiert. ---- */ --track-display: -0.03em; /* H1 / Hero / Display-Grössen */ --track-heading: -0.02em; /* H2/H3, Titel unterhalb Display */ --track-body: -0.01em; /* Fliess- und UI-Text */ --track-label: 0.08em; /* Mono-Eyebrows / Uppercase-Labels */ /* ---- Motion — die Osmo-Signatur (13.08., live aus dem Vault gemessen): dort existiert in 800 KB CSS genau EINE Kurve (`--cubic-default`) und ein Dauern-Trio 0.2/0.3/0.6 s. --dur bleibt der Standard (Hover, Fills, Mikro); --dur-md für Popover/Aufklapper, --dur-lg für Akkordions/Layout-Falten — die Akkordions nutzen Kurve+0.6 s bereits wortgleich. */ --ease: cubic-bezier(0.625, 0.05, 0, 1); --dur: 0.2s; --dur-md: 0.3s; --dur-lg: 0.6s; /* ---- Layers — ONE ladder for everything that stacks. Never write a raw z-index for chrome/overlays; pick a step (or calc(step ± n) for internal sub-layers). ---- */ --z-sidebar: 60; /* fixed rail */ --z-strip: 65; /* Hinweis-Streifen ganz oben — über der Leiste, unter dem Schleier */ --z-dim: 85; /* shared 5% veil — below every overlay (≥90) */ --z-sheet: 100; /* talent-detail floating window (non-modal) */ --z-popover: 200; /* anchored popovers & menus */ --z-chat: 240; /* floating chat dock — above popovers, below modals */ --z-preview: 380; /* Lightbox (Großansicht von Avatar/Arbeitsprobe, pb-lightbox) */ --z-modal: 400; /* centered modals, auth gate, send flow */ --z-toast: 600; /* toasts — above everything interactive */ --z-cursor: 700; /* app-weiter Tooltip (.pb-tip) — topmost */ /* ---- Touch-Ziel ---- BEWUSST absolut in px, nicht in rem. Ein Fingerziel ist ein physikalisches Maß — die Fingerkuppe wird nicht kleiner, wenn das Display schmaler ist. Auf Handybreite folgt der rem-Wert dem Viewport (siehe scaling.css); 2.75rem wären dort auf einem 320px-Gerät nur 36px statt der empfohlenen 44. Gleiche Begründung wie bei der 16px-Untergrenze für Formularfelder. */ --touch: 44px; /* ---- Zustands-Füllungen — Osmo-Alpha-Treppe (13.08., Vault) ---- Hover/Aktiv sind rgba(tint, α) statt eigener Rampen-Stufen: der Tint wechselt pro Theme (Dunkel-Auflage auf Hell, Weiss-Auflage auf Dunkel — --tint steht unten je Theme), die Alphas bleiben konstant. Dieselbe Füllung liest sich so auf jeder Fläche als derselbe Zustand. Treppe: Hover .055 · Aktiv .06 · kräftig .09 (Hover AUF Aktiv) · Haarlinien .10/.12. Liegt der Ruhezustand schon auf einer Füllung (Akkordion-Köpfe), stapelt der Hover per color-mix: tint 5.5% ÜBER die Ruhe-Füllung — identisch zur Alpha-Auflage, nur auf opaker Basis. */ --fill-hover: rgb(var(--tint) / 0.055); --fill-active: rgb(var(--tint) / 0.06); --fill-strong: rgb(var(--tint) / 0.09); --hairline: rgb(var(--tint) / 0.10); --hairline-strong: rgb(var(--tint) / 0.12); /* ---- Focus ring (keyboard) ---- Mindestens 2px: 0.125rem ergab bei 14px-Root 1.75px und wurde bei DPR 1 als 1px gezeichnet (WCAG-Audit 03.10.2026, Punkt 5). */ --ring-w: max(2px, 0.125rem); --ring-offset: 0.125rem; /* Controls that sit ON a `--field` (in-field buttons, toggles): the field fill nudged a touch toward the text colour — slightly darker on light, slightly lighter on dark. Resolves per theme via the referenced tokens. */ --field-control: color-mix(in srgb, var(--field) 97%, var(--text)); } /* ============================================================ LIGHT THEME (default) ============================================================ */ /* Tonal principle (after the Osmo palette the user loves): at REST the lightest value is only ALMOST white — true white is head-room, revealed on hover/focus/active (--surface-bright), like highlights in photography. The steps form one evenly-spaced staircase: bright > surface > surface-1 > bg > surface-2 > surface-warm > surface-3 > border --surface-2 stays a soft inlay (cards/inputs). --surface-warm is the darker beige for chips/pills/secondary buttons that sit ON page --bg (otherwise surface-2 ≈ bg and they disappear). */ :root, [data-theme="light"] { --bg: #f1efe9; --bg-2: #eae8e0; --surface: #fcfbf8; /* cards/panels — reads as white, holds back a step */ --surface-bright: #ffffff; /* the REVEAL — hover/focus/active only */ --surface-1:#f6f5ef; /* faint beige wash — inlays on cards */ --surface-2:#eeece4; --surface-warm:#e5e2d9; /* chips / crumbs / beige buttons on page bg */ --surface-3:#e5e3d9; /* Einleger: der VERTIEFTE Kasten IM Kasten (Code-Panels im Talent-Fenster) — eine Stufe unter surface-1, Richtung Seite. */ --inlay: #f3f1ea; --field: #fcfbf8; /* search field fill — brightens to --surface-bright on focus */ /* Formularfeld-Füllung (Inputs/Textareas/Selects) — 31.08. heller als das frühere surface-2 (Mathias: „etwas zu dunkel"), aber einen Hauch unter surface-1 (zweite Runde: „ganz leicht dunkler"). Liegt zwischen surface-1 (#f6f5ef) und surface-2 (#eeece4). */ --input-fill: #f3f1ea; /* Zustands-Tint: warmes Fast-Schwarz — dieselbe Familie wie Schatten/Focus-Ring (rgba(20, 20, 15, …)). */ --tint: 20 20 15; --border: #e0ded2; --border-strong: #d2d0c2; --text: #1a1a16; /* Graue Textstufen — seit 03.10.2026 (WCAG 1.4.3, Entscheid Mathias) ≥ 4.5:1 auf JEDER Fläche, auf der sie stehen, bis hinunter zu --surface-warm/--surface-3 (Brotkrumen, Segmente, Zähler) und der Knopf-Tönung von .pb-btn-go. faint bleibt eine eigene, hellere Stufe (ΔL* ≈ 4). Vorher: soft #6d6c62 (4.1:1 auf surface-warm), faint #7c7b70 (3.3–4.1:1). Werte prüft scripts/token-contrast.test.mjs. */ --text-soft: #5c5b52; --text-faint: #66655c; --primary: #1b1b1a; /* near-black buttons */ --primary-text: #ffffff; --primary-hover: #000000; --shadow-sm: 0 0.0625rem 0.0625rem rgba(20, 20, 15, 0.04); --shadow-md: 0 0.125rem 0.5rem rgba(20, 20, 15, 0.06); --shadow-lg: 0 0.75rem 2.125rem rgba(20, 20, 15, 0.11); /* one scrim recipe for every modal/drawer backdrop (29.08.: 0.46 → 0.58 — der Vorhang darf kräftiger abdunkeln) */ --scrim: rgba(14, 14, 10, 0.58); /* Fokus-Halo der Formularfelder (3px box-shadow) und Fokusring der Knöpfe/Links (outline). Beide ≥ 3:1 auf jeder Fläche (WCAG 1.4.11, Audit 03.10.2026, Punkt 5; geprüft von scripts/token-contrast.test.mjs): vorher 16 % (1.4:1) bzw. 42 % (2.6:1). */ --focus-ring: color-mix(in srgb, var(--text) 50%, transparent); --ring: color-mix(in srgb, var(--text) 70%, transparent); --avatar: linear-gradient(135deg, #e7e7e2, #d7d7d0); /* selected / active — soft neutral wash, no harsh black */ --selected-bg: color-mix(in srgb, var(--text) 8%, var(--surface)); --selected-border: color-mix(in srgb, var(--text) 26%, var(--border)); /* financial deltas + functional status (the only sanctioned colour beside brand) */ --pos: #1d9b37; --neg: #cf463c; /* Schloss-Sprache (.pb-lockcta, gesperrte Knöpfe, Warn-Streifen) — 03.10.2026: #9c5410 → #914e0f, auf --warn-tint über --bg vorher 4.4:1. */ --warn: #914e0f; --warn-tint: rgba(180, 100, 20, 0.10); /* fg-Töne je eine Stufe dunkler — die alten verfehlten auf ihren Tönungen die 4.5:1 (warn-fg 3.1, ok-fg 3.6, bad-fg 3.9). 03.10.2026 noch einmal nachgezogen (WCAG-Audit, Punkt 18): die Pillen liegen auch direkt auf --bg, dort hielten sie nur 4.2–4.4:1. Jetzt ≥ 4.5 über --bg UND --surface: ok #2e7440 → #2c6f3d, warn #8f6114 → #885c13, bad #b93a30 → #b0372e. */ --ok-fg: #2c6f3d; --ok-bg: color-mix(in srgb, var(--brand) 15%, transparent); --warn-fg:#885c13; --warn-bg:rgba(214, 160, 70, 0.18); --bad-fg: #b0372e; --bad-bg: rgba(207, 70, 60, 0.12); /* Volle Fehlerfläche mit weißer Schrift (Fehler-Toast, Gefahren-Knopf im Fenster) — in beiden Themes dasselbe Rot: Weiß darauf hält 4.8:1, auf --bad-fg (dunkel #f0766d) wären es nur 3.1:1. Design „Neu“, 01.10.2026. */ --err-solid: #c8433a; } /* ============================================================ DARK THEME ============================================================ */ [data-theme="dark"] { /* ---- Neutralrampe (NEUTRAL, 12.08. — Vorlage Osmo-Dark) ---- Vorher lag die Rampe auf Farbton 60° (gelblich-warm); Mathias' Referenz ist ein reines Neutralgrau auf tieferem Schwarz. Die GEOMETRISCHE Treppe bleibt (jede Stufe rund 1.3–1.4× heller als die vorige), nur Farbton raus und Basis eine Idee dunkler: n-900 #181818 n-700 #313131 n-850 #1e1e1e n-650 #393939 n-800 #242424 n-600 #424242 n-750 #2a2a2a (12.08. nachjustiert: #131313 war Mathias zu dunkel — die Werte entsprechen jetzt dem Osmo-Screen: Seite ~#181818, aktive Zeile ~#262626, Suchpille ~#232323.) */ /* 13.08., aus dem Vault gemessen: Osmos Dunkelgraue sind WARM (R minimal über G/B — n-700 #2a2727, n-600 #312e2e, n-550 #393636), nicht rein neutral. Helligkeit bleibt die vom 12.08. abgenommene — nur der Warmstich kommt dazu; die oberen Stufen sind damit wortwörtlich die Osmo-Werte. */ --bg: #181616; /* n-900 */ --bg-2: #1e1c1c; /* n-850 */ --surface: #242121; /* n-800 — Karten/Popover/Modale */ --surface-1:#2a2727; /* n-750 — Einleger auf Karten (= Osmo n-700) */ --surface-2:#312e2e; /* n-700 — gefüllte Knöpfe / Felder / Chips (= Osmo n-600) */ --surface-warm:#312e2e; /* = surface-2, auf Dunkel schon deutlich genug */ --surface-3:#393636; /* n-650 — Hover / Aktiv (= Osmo n-550) */ /* Einleger: vertiefter Kasten IM Kasten (Code-Panels) — eine Stufe UNTER surface-1, Richtung Seite (2c-Handoff, 13.08.). */ --inlay: #1d1b1b; /* Die ENTHÜLLUNG (Hover/Fokus) bleibt die hellste Fläche. */ --surface-bright: #423f3f; /* n-600 */ --field: #232020; /* zwischen n-800 und n-750 — wie die Osmo-Suchpille */ --input-fill: var(--surface-2); /* Formularfelder: auf Dunkel unverändert */ /* Rahmen als Weiss-Auflage statt fester Grauwerte: so hebt sich ein Rahmen von JEDER Fläche ab, auf der er liegt. Vorher steckte --border (L .0328) mitten in der Flächenrampe — zwischen surface-1 (.0282) und surface-2 (.0341), Abstand .0013, praktisch unsichtbar. */ /* Zustands-Tint: Weiss-Auflage — wie die Rahmen unten. */ --tint: 255 255 255; /* Aktiver Abschnitt in Segment-Umschaltern (Sprache, Gesendet/Empfangen, Ansicht, Abrechnung, Sammlungen) — Mathias 05.10.2026: surface-3 auf surface-2 war ein Hauch-Kontrast; jetzt Tinte-Tint, klar über der Spur. */ --seg-on: rgb(var(--tint) / 0.18); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.17); /* Text zieht mit der warmen Rampe mit (Osmo: #f4f4f4 auf #201d1d, Gedämpftes #817f7f — R minimal über G/B). */ --text: #f4f4f4; /* 03.10.2026 (WCAG 1.4.3, Entscheid Mathias): ≥ 4.5:1 bis hinauf zu --surface-3 (Zähler auf gewählten Chips); faint bleibt die eigene, dunklere Stufe (ΔL* ≈ 4). Vorher faint #918e8e (3.7:1 auf surface-3, 4.1:1 auf surface-2), soft #a3a0a0. */ --text-soft: #adaaaa; --text-faint: #a19e9e; /* AI-Akzent — #5b61d6 kam auf --surface nur auf 2.8:1 (auf --bg 3.5:1). Aufgehellt auf 5.7:1; Tint/Border ziehen mit. */ --ai: #979cf2; --ai-tint: rgba(122, 127, 238, 0.14); --ai-border: rgba(151, 156, 242, 0.38); --primary: #f0f0f0; /* light buttons on dark */ --primary-text: #161616; --primary-hover: #ffffff; /* Kante statt Schatten — Schatten trennen auf Dunkel kaum (schwarz auf fast-schwarz). Erhöhte Flächen bekommen zusätzlich eine feine Weiss-Kante; das ist auf Dunkel das, was in Light der Schattenwurf leistet. */ --edge: rgba(255, 255, 255, 0.07); --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.40), 0 0 0 0.0625rem var(--edge); --shadow-md: 0 0.1875rem 0.75rem rgba(0, 0, 0, 0.45), 0 0 0 0.0625rem var(--edge); --shadow-lg: 0 1rem 2.625rem rgba(0, 0, 0, 0.60), 0 0 0 0.0625rem rgba(255, 255, 255, 0.09); /* Etwas dichter — die Flächentrennung ist auf Dunkel geringer, der Vorhang darf mehr leisten. (29.08.: 0.66 → 0.76) */ --scrim: rgba(0, 0, 0, 0.76); --focus-ring: color-mix(in srgb, var(--text) 45%, transparent); /* vorher 14 % Weiß (1.5:1) */ --ring: color-mix(in srgb, var(--text) 60%, transparent); --avatar: linear-gradient(135deg, #383838, #2a2a2a); --pos: #43c95a; --neg: #ef6a60; --warn: #e9a766; --warn-tint: rgba(233, 167, 102, 0.12); --ok-fg: #6fd47f; --ok-bg: rgba(74, 208, 83, 0.16); --warn-fg:#e0aa5a; --warn-bg:rgba(214, 160, 70, 0.16); /* bad-fg #ef6a60 → #f0766d (03.10.2026): auf --bad-bg über --surface (.pb-state.is-bad) vorher 4.2:1. */ --bad-fg: #f0766d; --bad-bg: rgba(239, 106, 96, 0.16); --err-solid: #c8433a; } /* Suppress transitions during a theme flip (add/remove on in JS). */ .theme-switching * { transition: none !important; }