/* ========================================================================== CODEWERK LABS — DESIGN TOKENS Einzige Quelle für Farben, Typografie, Raster, Radien und Elevation. Kein Wert aus dieser Datei wird anderswo hartkodiert. Aufbau: 1 Brand-Palette — unveränderlich, Markenidentität 2 Semantische Rollen — was wofür verwendet wird (WCAG-geprüft) 3 Typografie 4 Raster & Spacing 5 Radien 6 Elevation 7 Bewegung 8 Layout ========================================================================== */ :root { /* ── 1 · BRAND-PALETTE ─────────────────────────────────────────────────── Verbindlich. Diese neun Werte sind die Marke. Sie werden NICHT direkt in Komponenten verwendet — dafür gibt es die semantischen Rollen unter 2. Grund: siehe ADR-002. */ --brand-ink-black: #17191c; --brand-paper-white: #ffffff; --brand-mist-gray: #f2f2f3; --brand-fog-white: #fafafb; --brand-slate-gray: #777b86; --brand-ash-gray: #979799; --brand-smoke-gray: #a3a6af; --brand-blush-peach: #fbe1d1; --brand-sienna-brown: #5d2a1a; /* ── 2 · SEMANTISCHE ROLLEN ────────────────────────────────────────────── Jede Text-auf-Fläche-Kombination ist gerechnet, nicht geschätzt. Messwerte in Kommentaren. Geprüft in tests/accessibility/. WICHTIG — gemessene Kontraste der Brand-Grautöne auf Weiß: slate-gray #777b86 4,23:1 ✗ AA normal ✓ AA groß ash-gray #979799 2,92:1 ✗ auch für Großtext smoke-gray #a3a6af 2,43:1 ✗ auch für Großtext Deshalb existiert --color-text-secondary als abgeleiteter Wert. #6b6e78 hält die kühle Tönung der Palette, erreicht aber auf allen drei Flächen AA. Differenz zu slate-gray: 12 Helligkeitsstufen — im Layout nicht unterscheidbar, in der Prüfung entscheidend. */ /* Flächen */ --color-surface: var(--brand-paper-white); /* Standardgrund */ --color-surface-subtle: var(--brand-fog-white); /* Sektionswechsel */ --color-surface-raised: var(--brand-mist-gray); /* Cards */ --color-surface-accent: var(--brand-blush-peach); /* max. 1× pro Seite */ --color-surface-inverse: var(--brand-ink-black); /* Footer, Primärbtn */ /* Text auf hellen Flächen */ --color-text-primary: var(--brand-ink-black); /* 17,61 : 1 ✓✓ */ --color-text-secondary: #6b6e78; /* 5,09 : 1 ✓ paper 4,88 : 1 ✓ fog 4,55 : 1 ✓ mist */ --color-text-muted: var(--brand-slate-gray); /* 4,23 : 1 NUR ab 24px bzw. 19px+bold (AA groß) */ --color-text-inverse: var(--brand-paper-white); /* 17,61 : 1 auf ink */ /* Text auf Peach */ --color-text-on-accent: var(--brand-sienna-brown); /* 9,27 : 1 ✓✓ */ --color-text-on-accent-alt: var(--brand-ink-black); /* 14,08 : 1 ✓✓ */ /* Nicht-textliche Elemente — Kontrastanforderung 3:1 (WCAG 1.4.11) oder gar keine, wenn rein dekorativ. */ --color-border: #e3e3e5; /* dekorativ, keine Anforderung */ --color-border-strong: #c9cace; /* Eingabefeld-Rahmen */ --color-divider: var(--brand-mist-gray); --color-icon-decorative: var(--brand-ash-gray); /* NIE informationstragend */ --color-chart-line: var(--brand-sienna-brown); /* Zustände */ --color-focus-ring: var(--brand-ink-black); --color-focus-ring-offset: var(--brand-paper-white); --color-error: #8c2f1c; /* Sienna-verwandt, 6,85:1 auf Weiß */ --color-success: #2f5d3a; /* 7,12:1 auf Weiß */ /* Absichtlich NICHT definiert: Blau, Lila, Grün, Neon, Farbverläufe. Siehe Masterprompt §13. Error/Success sind entsättigt und aus der Sienna-Achse abgeleitet, damit sie nicht aus dem System fallen. */ /* ── 3 · TYPOGRAFIE ────────────────────────────────────────────────────── Rollentrennung ist verbindlich: Serif = Headlines / Editorial Sans = Body / Navigation / UI Signifier und Söhne sind kommerziell lizenzpflichtig. Bis zur Lizenzentscheidung (O-8) tragen Source Serif 4 und Inter — beide self-hosted, OFL, keine externen Requests. */ --font-display: 'Signifier', 'Source Serif 4', 'GT Sectra', 'Tiempos Headline', Georgia, ui-serif, serif; --font-ui: 'Sohne', 'Inter', system-ui, ui-sans-serif, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace; /* Schriftgrade — Masterprompt §17 */ --text-caption: 15px; --text-body: 17px; --text-body-lg: 20px; --text-subheading: 22px; --text-heading-sm: 26px; --text-heading: 44px; --text-heading-lg: 64px; --text-display: 90px; /* Zeilenhöhen — §17 */ --leading-body: 1.35; --leading-subheading: 1.5; --leading-heading: 1.3; --leading-display: 1.08; /* 90px bei 1.3 reißt die Komposition auseinander */ /* Gewichte — Headlines bleiben bei 400 (§18). Wirkung entsteht über Größe, Weißraum, Position, Italic. */ --weight-display: 400; --weight-regular: 400; --weight-medium: 500; --weight-strong: 600; /* nur UI-Labels, nie Display-Headlines */ /* Laufweite */ --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-body: 0; --tracking-label: 0.06em; /* Versal-Labels wie „01 · WEBSITE" */ /* ── 4 · RASTER & SPACING ──────────────────────────────────────────────── Basiseinheit 4px, Skala aus §21. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-31: 124px; --space-32: 128px; --space-40: 160px; /* ── 5 · RADIEN — §23 ────────────────────────────────────────────────── */ --radius-card: 24px; --radius-card-sm: 16px; --radius-card-lg: 20px; /* elevated / floating */ --radius-image: 12px; --radius-input: 16px; --radius-button: 9999px; /* ── 6 · ELEVATION — §29, §71 ──────────────────────────────────────────── Vier getrennte Ebenen. Content-Cards liegen flach auf der Fläche. Nur Floating Artifacts, Dropdowns und Modals heben ab. */ --shadow-flat: none; --shadow-floating: 0 0 0 1px rgba(4, 23, 43, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); --shadow-dropdown: 0 0 0 1px rgba(4, 23, 43, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08); --shadow-modal: 0 0 0 1px rgba(4, 23, 43, 0.06), 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ── 7 · BEWEGUNG — §66 ────────────────────────────────────────────────── Subtil, performant, sinnvoll. Nur transform und opacity animieren — alles andere löst Layout oder Paint aus. */ --duration-instant: 120ms; --duration-fast: 180ms; --duration-base: 240ms; --duration-slow: 420ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── 8 · LAYOUT — §22 ──────────────────────────────────────────────────── */ --page-max-width: 1200px; --page-gutter: var(--space-6); --section-gap: var(--space-20); --card-padding: var(--space-5); --element-gap: var(--space-2); --measure: 68ch; /* Lesezeilenlänge Fließtext */ --measure-narrow: 54ch; } /* ────────────────────────────────────────────────────────────────────────── FLÄCHENABHÄNGIGE TEXTROLLEN — ADR-002, Nachtrag ────────────────────────────────────────────────────────────────────────── Die Rollen unter 2 gelten für HELLE Flächen. Wird dieselbe Sekundärfarbe auf einer dunklen oder auf der Peach-Fläche verwendet, fällt sie durch: #6b6e78 auf #17191c (Fußzeile) 3,46 : 1 ✗ #6b6e78 auf #fbe1d1 (Peach-Card) 4,07 : 1 ✗ Beides wurde von axe-core gefunden, nicht geschätzt — 85 betroffene Elemente über sechs Seiten. Die Lösung ist nicht, einzelne Selektoren zu korrigieren. Jede Komponente, die irgendwann auf einer anderen Fläche landet, hätte dasselbe Problem. Stattdessen definiert JEDE Fläche ihre eigenen Textrollen. Eine Komponente muss dann nicht wissen, worauf sie liegt. Bemerkenswert: Auf dunklem Grund trägt Smoke-Gray aus der Markenpalette mit 7,24 : 1 problemlos. Die hellen Grautöne der Palette sind nicht unbrauchbar — sie sind für dunkle Flächen. ────────────────────────────────────────────────────────────────────── */ .l-section--inverse, .c-card--inverse, .c-footer { --color-text-primary: var(--brand-paper-white); /* 17,61 : 1 ✓ */ --color-text-secondary: var(--brand-smoke-gray); /* 7,24 : 1 ✓ */ --color-text-muted: var(--brand-ash-gray); /* 6,04 : 1 ✓ */ --color-divider: rgba(255, 255, 255, 0.14); --color-border: rgba(255, 255, 255, 0.18); --color-focus-ring: var(--brand-paper-white); } .c-card--accent { --color-text-primary: var(--brand-sienna-brown); /* 9,27 : 1 ✓ */ --color-text-secondary: #83452c; /* 5,89 : 1 ✓ abgeleitet */ --color-text-muted: #83452c; --color-divider: rgba(93, 42, 26, 0.18); --color-border: rgba(93, 42, 26, 0.24); --color-focus-ring: var(--brand-sienna-brown); } /* ────────────────────────────────────────────────────────────────────────── RESPONSIVE TOKEN-ÜBERSCHREIBUNGEN Mobile ist kein verkleinertes Desktop (§65). Die Display-Skala wird nicht proportional skaliert, sondern neu gesetzt: 90px würde auf 320px Breite die Komposition zerstören. ────────────────────────────────────────────────────────────────────── */ @media (max-width: 1023px) { :root { --text-display: 56px; --text-heading-lg: 40px; --text-heading: 32px; --text-heading-sm: 24px; --section-gap: var(--space-16); } } @media (max-width: 599px) { :root { --text-display: 38px; --text-heading-lg: 30px; --text-heading: 26px; --text-heading-sm: 21px; --text-subheading: 19px; --text-body-lg: 18px; --leading-display: 1.15; /* kleinere Grade brauchen mehr Luft */ --page-gutter: var(--space-5); --section-gap: var(--space-10); --card-padding: var(--space-4); } } /* ────────────────────────────────────────────────────────────────────────── REDUCED MOTION — §48, §66 Nicht „Animationen etwas kürzer", sondern aus. ────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } } /* ────────────────────────────────────────────────────────────────────────── HOHER KONTRAST Wenn das Betriebssystem mehr Kontrast anfordert, fällt die Sekundärstufe auf die Primärfarbe zurück. ────────────────────────────────────────────────────────────────────── */ @media (prefers-contrast: more) { :root { --color-text-secondary: var(--brand-ink-black); --color-text-muted: var(--brand-ink-black); --color-border: var(--brand-slate-gray); --color-border-strong: var(--brand-ink-black); } }