/* SixtyThree — gemeinsame Gestaltungsgrundlage (Familienvertrag, Release 0.2, KC-1174) ========================================================================================== Diese Datei ist die eine Quelle fuer Farben, Typografie, Abstaende, Radien, Linien, Icons und Bewegung beider Produkte. SixtyThree (Plattform) und SixtyThree Coach vendoren sie ueber ihre `contracts.lock` und lesen ausschliesslich die hier deklarierten Custom Properties. Sie enthaelt keine Komponentenregeln: Was ein Button, ein Wuerfel oder eine Spielblock-Zelle ist, entscheidet jede App in ihrem eigenen Stylesheet — mit diesen Namen und nur mit diesen Werten. Herkunft der Werte: die akzeptierte Coach-Umsetzung (`apps/coach/styles.css`, Story 429 und Coach-PR #739/#741 fuer B3) und die von Felix am 12.09.2026 bestaetigten Produktentscheidungen (Theme-Zuordnung, B3-Zustaende). Neue Namen sind als solche markiert; vorhandene Coach-Namen bleiben erhalten. Aufbau, in genau dieser Reihenfolge: 1. `:root` — Flanell (Standard bei „System folgen" und heller Systemeinstellung) plus alle Rollen-Aliasse, Typografie, Abstaende, Radien, Linien, Icons, Bewegung. 2. `@media (prefers-color-scheme: dark)` — Elfenbein fuer „System folgen" bei dunkler `:root:not([data-theme])` Systemeinstellung (Felix-Entscheid: keine erfundene dunkle Elfenbein-Variante). 3. `:root[data-theme="elfenbein"]` — Elfenbein, bewusst gewaehlt. Wertgleich mit 2. 4. `:root[data-theme="graphit"]` — Graphit, bewusst gewaehlt (einzige dunkle Palette). 5. `:root[data-theme="kobalt"]` — Kobalt, bewusst gewaehlt. 6. Bewegungsvarianten — reduziert per System oder per Wahl. Flanell braucht keinen eigenen `data-theme`-Block: `:root` ist Flanell, und die bewusste Wahl muss nur den Media-Block in 2. abschalten, was jedes gesetzte `data-theme` tut. Elfenbein steht deshalb zweimal (2. und 3.): CSS kann eine Media-Bedingung und einen Selektor nicht zu einer Regel verbinden. Die Konsumenten pruefen beide Bloecke Token fuer Token auf Gleichheit. Nur die *Primitiven* (Papier, Tinte, Linie, Akzent, Wuerfel, Urteilstoene) werden je Palette wiederholt. Alle Rollen sind Aliasse `var(--primitiv)` und stehen genau einmal in `:root`; weil beide Seiten auf `` leben, loest ein Alias gegen die Palette auf, die dort gewonnen hat. Namenskollision, absichtlich aufgeloest: `--text-body`, `--text-secondary`, `--text-hint`, `--text-supporting` sind FARBEN (Coach-Namen). Schriftgroessen heissen `--text-xs` … `--text-xl`. Die Plattform benennt ihre bisherigen Groessen-Token (`--text-body`, `--text-title-*`, …) bei der Uebernahme um; die Zuordnung steht in `README.md` § Uebernahme. `data-theme` und `data-motion` schreibt die jeweilige App vor dem ersten Paint; ihr Fehlen heisst „System folgen". Die gueltigen Werte und die Aufloesung definiert `theme-contract.mjs`. */ :root { color-scheme: light; --scheme-name: flanell; /* --- Flanell: Papier & Tinte ------------------------------------------------ Drei Basen aus dem Marken-Manual.SH (Story 429): SH Blau 0/48/100, SH Weiss 255/255/255, SH Rot 212/0/75. Jeder weitere Wert ist eine gerundete sRGB- Kanalmischung dieser Basen (Papier 3/0/6 % Blau in Weiss; Tinte 100/90/78/72 % Blau in Weiss; Linien 16/30 % Blau in Weiss; Akzent-Druck 80 % Rot + 20 % Blau; Wash 8 % Rot in Weiss; Wuerfellinie 20 % Blau in Weiss; Urteilsleiter Blau, 75 % Blau, 55 % Blau + 45 % Rot, Rot). */ --paper: #f7f9fa; --paper-raised: #ffffff; --paper-sunken: #f0f3f6; --ink: #003064; --ink-soft: #1a4574; --ink-muted: #385e86; --ink-faint: #476a8f; --line: #d6dee6; --line-strong: #b3c1d1; --line-field: #748eab; /* neu, Abweichung: Feldrand mit 3:1 (WCAG 1.4.11); 35 % Tinte in --line-strong */ /* --- Flanell: Signal. Farbe ist funktional: Auswahl, Status, die eine Primaeraktion. Nichts dekoriert damit. */ --accent: #d4004b; --accent-ink: #ffffff; --accent-press: #aa0a50; --accent-wash: #fcebf1; /* --- Flanell: Wuerfel. `--die-face`/`--die-ink` sind zugleich das Negativ: ein gehaltener Wuerfel, eine eigene eingetragene Kategorie und der Kategorie-Wuerfel nach dem eigenen Eintrag tauschen die beiden. */ --die-face: #ffffff; --die-ink: #003064; --die-line: #ccd6e0; /* --- Flanell: Urteilstoene und Gefahr */ --tone-optimal: #003064; --tone-near-optimal: #40648b; --tone-mistake: #5f1a59; --tone-blunder: #d4004b; --danger: #d4004b; --danger-wash: #fcebf1; /* === Rollen: Flaechen ======================================================= */ --surface-page: var(--paper); --surface-card: var(--paper-raised); --surface-sunken: var(--paper-sunken); --surface-control: var(--paper-sunken); --console: var(--paper-sunken); /* Scrim hinter Dialogen und Sheets: Tinte-Alpha, kein Blur (Studie S3). Der Coach legt heute ein Papier-Veil hinter die Termhilfe; P4 zieht auf diesen Wert nach. */ --scrim: color-mix(in srgb, var(--ink) 55%, transparent); /* === Rollen: Text (Farben, nicht Groessen) ================================== */ --text-body: var(--ink); --text-supporting: var(--ink-soft); --text-secondary: var(--ink-muted); --text-hint: var(--ink-faint); --text-on-accent: var(--accent-ink); /* neu: Beschriftung auf der Primaeraktion */ /* === Rollen: Grenzen ======================================================== */ --border-hairline: var(--line); --border-control: var(--line-strong); /* Abweichung zum Review: der Coach setzt --field-border auf --line-strong (2,0:1 auf der Karte). Eingabefelder muessen ihren Rand mit 3:1 zeigen (WCAG 1.4.11); --line-field ist je Palette die kleinste Abdunklung von --line-strong, die das auf Karte und abgesenkter Flaeche erreicht. Alle anderen Linien bleiben Haarlinien. */ --field-border: var(--line-field); /* === Rollen: Fokus (Tastatur) ============================================== */ --focus-ring: var(--accent); --focus-ring-width: 2px; /* neu */ --focus-ring-offset: 2px; /* neu */ /* === Rollen: Auswahl (aria-pressed / aria-selected) ========================= */ --surface-selected: var(--accent-wash); /* neu: Grund unter einer gewaehlten Option */ --border-selected: var(--accent); /* neu */ --text-selected: var(--text-body); /* neu: Auswahl aendert die Schriftfarbe nicht */ /* === Rollen: Navigation ===================================================== */ /* Aktiv traegt Tinte, nie Akzent (Studie E4/S2): die aktive Pille oder der Marker stehen in --ink mit Papier-Schrift; Rot bleibt Aktion, Auswahl und Gefahr. */ --surface-nav-active: var(--ink); /* neu */ --text-nav-active: var(--paper-raised); /* neu */ /* === Rollen: Fehler ========================================================= */ --text-error: var(--danger); /* neu */ --border-error: var(--danger); /* neu */ --surface-error: var(--danger-wash); /* neu: Grund einer Fehlermeldung, Hover der Gefahr-Aktion */ /* === Rollen: deaktiviert ==================================================== */ /* Deaktiviert ist eine Deckkraft, keine eigene Farbe: die Rolle bleibt lesbar als „dieselbe Farbe, abgeschwaecht", und Kontrastregeln fuer inaktive Bedienelemente greifen nicht (WCAG 1.4.3, Ausnahme inaktive Komponenten). Wuerfel behalten ihre eigene, hoehere Deckkraft (.7, Coach), weil ihre Augen Information sind. */ --opacity-disabled: .45; /* neu */ /* === Rollen: Spielblock (B3, Felix 12.09.2026) ============================== */ /* offen: Karte, hell; Vorschau: Hinweisfarbe im offenen Feld, klar von Actuals getrennt; eigener fester Eintrag einschliesslich Null: vollstaendig invertiert (Wuerfel-Negativ); Gegnerwert: ausschliesslich Actual auf der zarten Linienfarbe mit Koerpertinte — in den hellen Paletten dunkle Schrift auf zartem Graublau, in Graphit helle Tinte auf der leicht aufgehellten Linienflaeche (README § Abweichungen 5); Ruecknahme: Akzentrahmen; Summen: abgesenkte Flaeche. */ --surface-score-open: var(--surface-card); /* neu */ --text-score-preview: var(--text-hint); /* neu */ --surface-score-own: var(--die-ink); /* neu */ --text-score-own: var(--die-face); /* neu */ --surface-score-opponent: var(--line); /* Coach-Name aus PR #739 */ --text-score-opponent: var(--text-body); /* neu */ --surface-score-summary: var(--surface-sunken); /* neu */ --border-score-takeback: var(--accent); /* neu */ /* === Typografie ============================================================= */ /* Keine Webfont-Datei in beiden Repos, kein externer Abruf (Coach-CSP `default-src 'self'`, Offline-PWA). Die Familien stehen zuerst, damit eine installierte Kopie genutzt wird; dahinter halten die Stacks dieselbe Rolle: neutrale Grotesk fuer Lesbares, Mono fuer Gezaehltes. */ --font-sans: "Schibsted Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Alles Gezaehlte oder Verglichene setzt tabellarische Ziffern; Ziffern springen nie (Studie: „Zahlen sind mono"). */ --numerals: tabular-nums; /* neu */ /* Groessen: genau die fuenf Coach-Stufen. `--text-xs` ist der Familien-Boden von 12 px bei 16-px-Wurzel (Design-Critique 2026-09-07 § 7, Plattform KC-1169); der Coach und die Studie stehen bei .72rem. Anzeigezahlen (Endstand, Elo) skalieren per rem-Faktor aus `--text-xl`, nicht per weiterem Token (Studie). */ --text-xs: .75rem; --text-s: .82rem; --text-m: .95rem; --text-l: 1.15rem; --text-xl: 1.5rem; --weight-regular: 400; --weight-medium: 500; --weight-strong: 650; --weight-display: 750; --tracking-caps: .1em; --leading-body: 1.5; --leading-tight: 1.15; /* === Abstaende und Groessen ================================================ */ --space-0: 0; --space-h: .125rem; /* neu: halber Schritt (2 px) */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* neu */ --size-touch: 2.75rem; /* neu: 44 px Zielgroesse, skaliert mit der Schrift */ /* === Radien: nie ueber 8 px, keine Pillen (Studie F4) ======================= */ --radius-s: 4px; --radius-die: 6px; --radius-m: 8px; --radius-round: 50%; /* neu: Kreise fuer Marken und Augen, keine Pille */ /* === Linien statt Schatten ================================================= */ --border-width: 1px; /* neu */ --hairline: var(--border-width) solid var(--border-hairline); --rule: var(--border-width) solid var(--border-control); /* === Icons ================================================================== */ /* Icons erben `currentColor`, sind Strichzeichnungen ohne Fuellflaeche und nehmen eine der drei Groessen. Ein Icon-Set existiert in keinem Repo; beide Apps setzen heute Textglyphen und die Wuerfelaugen. */ --icon-size-s: 1rem; /* neu */ --icon-size-m: 1.25rem; /* neu */ --icon-size-l: 1.5rem; /* neu: die 24er Box der Studie */ --icon-stroke: 1.75px; /* neu */ --icon-linecap: round; /* neu: runde Kappen und Ecken (Studie E7) */ --icon-linejoin: round; /* neu */ /* === Wuerfeloptik: Glanz und Schatten teilen in jeder Palette eine Lichtquelle */ --die-gloss: rgb(255 255 255 / .72); --die-gloss-edge: rgb(255 255 255 / .92); --die-gloss-held: rgb(255 255 255 / .32); --die-gloss-pip: rgb(255 255 255 / .6); --die-shadow: rgb(0 0 0 / .24); --die-shadow-edge: rgb(0 0 0 / .42); --die-shadow-pip: rgb(0 0 0 / .45); /* === Bewegung =============================================================== */ /* Mechanisch, kurz, nie dekorativ. Die Keyframes (`die-roll`, `die-settle`, `reveal-rise`, `reveal-fade`) definiert jede App selbst; hier stehen Dauer, Kurve und die drei Coach-Animationstoken samt ihrer leisen Variante. Genau eine Federkurve, nur fuer Celebrations (Sieg, Bestwert, Bonus bei 63), sonst nichts — kein Konfetti, keine Partikel (Studie E8). */ --ease-mech: cubic-bezier(.3, 0, .2, 1); --ease-celebrate: cubic-bezier(.2, .9, .3, 1.3); /* neu */ --dur-fast: 120ms; /* Zustandswechsel */ --dur-med: 240ms; /* neu: Panel, Sheet */ --dur-roll: 320ms; /* neu: Wurf */ --die-transition: transform 140ms var(--ease-mech), border-color 140ms var(--ease-mech); --die-roll-animation: die-roll 320ms var(--ease-mech); --reveal-animation: reveal-rise 220ms var(--ease-mech) both; } /* Elfenbein, weil die Systemeinstellung dunkel ist und niemand gewaehlt hat. Felix-Entscheid 12.09.2026: „System folgen" bildet dunkel auf Elfenbein ab, nicht auf Graphit; Elfenbein bleibt eine helle Palette, `color-scheme` bleibt `light`. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: light; --scheme-name: elfenbein; --paper: #f2efe6; --paper-raised: #faf8f2; --paper-sunken: #e9e5d9; --ink: #21201c; --ink-soft: #3c3a35; --ink-muted: #525049; --ink-faint: #67655f; --line: #d9d4c5; --line-strong: #b4afa0; --line-field: #868377; --accent: #b43c28; --accent-ink: #ffffff; --accent-press: #963120; --accent-wash: #f9e0d9; --die-face: #fdfcf8; --die-ink: #21201c; --die-line: #c9c4b4; --tone-optimal: #3a722c; --tone-near-optimal: #7f6100; --tone-mistake: #9f4f12; --tone-blunder: #b3271e; --danger: #b3271e; --danger-wash: #f2dbd8; } } /* Elfenbein, weil gewaehlt. Dieselben Werte wie im Media-Block oben. */ :root[data-theme="elfenbein"] { color-scheme: light; --scheme-name: elfenbein; --paper: #f2efe6; --paper-raised: #faf8f2; --paper-sunken: #e9e5d9; --ink: #21201c; --ink-soft: #3c3a35; --ink-muted: #525049; --ink-faint: #67655f; --line: #d9d4c5; --line-strong: #b4afa0; --line-field: #868377; --accent: #b43c28; --accent-ink: #ffffff; --accent-press: #963120; --accent-wash: #f9e0d9; --die-face: #fdfcf8; --die-ink: #21201c; --die-line: #c9c4b4; --tone-optimal: #3a722c; --tone-near-optimal: #7f6100; --tone-mistake: #9f4f12; --tone-blunder: #b3271e; --danger: #b3271e; --danger-wash: #f2dbd8; } /* Graphit, weil gewaehlt. Die einzige dunkle Palette; nie automatisches Ziel. */ :root[data-theme="graphit"] { color-scheme: dark; --scheme-name: graphit; --paper: #232420; --paper-raised: #2b2c27; --paper-sunken: #1c1d19; --ink: #f1eee5; --ink-soft: #d2cfc2; --ink-muted: #b3b0a2; --ink-faint: #979486; --line: #3d3e37; --line-strong: #57584f; --line-field: #74756c; --accent: #e2a23d; --accent-ink: #201a0e; --accent-press: #cd8f2e; --accent-wash: #3b3222; --die-face: #f1eee5; --die-ink: #232420; --die-line: #57584f; --tone-optimal: #94c465; --tone-near-optimal: #ddba50; --tone-mistake: #de8a4f; --tone-blunder: #f2695d; --danger: #f2695d; --danger-wash: #3c2724; } /* Kobalt, weil gewaehlt. Hell wie Flanell und Elfenbein. */ :root[data-theme="kobalt"] { color-scheme: light; --scheme-name: kobalt; --paper: #eceef0; --paper-raised: #f8f9fa; --paper-sunken: #e1e4e8; --ink: #1d2126; --ink-soft: #353a3f; --ink-muted: #4a5055; --ink-faint: #61656a; --line: #d2d6da; --line-strong: #adb3ba; --line-field: #7d8389; --accent: #2247ad; --accent-ink: #ffffff; --accent-press: #1b3b93; --accent-wash: #d9e0f2; --die-face: #ffffff; --die-ink: #1d2126; --die-line: #c2c7cd; --tone-optimal: #2e6b46; --tone-near-optimal: #7b6100; --tone-mistake: #9d4f12; --tone-blunder: #b02a24; --danger: #b02a24; --danger-wash: #f0dcda; } /* Reduzierte Bewegung: Wuerfel behalten die Farbaenderung und verlieren den Weg, ein Aufdecken blendet ein statt aufzusteigen. Nichts wird abgeschaltet — eine Flaeche, die ohne jede Aenderung erscheint, ist schwerer zu bemerken, nicht ruhiger. Zwei Bloecke aus demselben Grund wie bei Elfenbein; die Konsumenten pruefen sie auf Gleichheit. */ @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --die-transition: border-color 120ms linear; --die-roll-animation: die-settle 120ms linear; --reveal-animation: reveal-fade 120ms linear both; --ease-celebrate: linear; } } :root[data-motion="reduced"] { --die-transition: border-color 120ms linear; --die-roll-animation: die-settle 120ms linear; --reveal-animation: reveal-fade 120ms linear both; --ease-celebrate: linear; }