/* ============================================================ TOKENS · Trauzeit Design System Source of Truth: docs/MASTER-BRIEFING.md Sektion 4 Bridget Sullys Hex-Codes sind nicht-verhandelbar. ============================================================ */ :root { /* ── Bridget Core (4 Hex-Werte = Source of Truth) ──────── */ --ivory: #F7F4F2; /* warmes Weiß, Hintergrund */ --ink: #2B2B2B; /* nahezu Schwarz, Typografie */ --pink: #E06C8A; /* Akzent Feiern */ --sage: #A8B8A2; /* Akzent Abschied */ /* ── Paper & Ink (abgeleitet) ──────────────────────────── */ --paper: #F1EBE4; --paper-warm: #EBE2D6; --ink-soft: #5A5654; /* ink-mute: vorher #8A8582 — schaffte nur 3.1:1 auf paper-warm (FAIL WCAG AA). Neu #5F5B57 → 6.1:1 zu ivory, 5.1:1 zu paper-warm (AA bestanden auf beiden BGs). */ --ink-mute: #5F5B57; /* ── Feiern · Pink-Skala ───────────────────────────────── */ /* pink-deep: angepasst von #C4526F (3.97:1 fail AA) auf #B0466A (4.90:1 pass AA). Master-Briefing-Regel: „Derivate müssen WCAG-AA bestehen." Bridgets Kern-Hex `--pink: #E06C8A` bleibt unverändert; nur das deep-Derivat wurde dunkler kalibriert, damit Eyebrows + .faq-item__closing + Hover-CTA-States AA passen. */ --pink-deep: #B0466A; --pink-mid: #EA99AC; --pink-soft: #F2C5D0; --pink-wash: #FADEE4; --pink-hint: #FCEEF1; /* ── Abschied · Sage-Skala ─────────────────────────────── */ /* sage-deep auf #4A5446 gesetzt für WCAG-AA-Kontrast (5.8:1 zu paper-warm). */ --sage-deep: #4A5446; --sage-mid: #BEC9B9; --sage-soft: #D0DACB; --sage-wash: #E6ECE1; --sage-hint: #EFF2EC; /* ── Kontext-Akzent (umgeschaltet via body[data-context]) */ /* Default = neutral (Landing). Wird unten überschrieben. */ --accent: var(--ink); --accent-deep: var(--ink); --accent-soft: var(--paper-warm); --accent-wash: var(--paper); --accent-hint: var(--ivory); --accent-mid: var(--ink-soft); /* ── Typografie ────────────────────────────────────────── Inter (Selina-Wunsch, ersetzt Cormorant/Parisienne). Spiel mit Light (300) für Display + Bold (700) für Akzente. `--font-script` zeigt jetzt auf Inter-Light statt Parisienne, damit Logo + Hero-Subs nicht ins Leere fallen. */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* ── Layout ────────────────────────────────────────────── */ --maxw: 1440px; --radius: 2px; --pad-x: clamp(24px, 8vw, 120px); --header-h: 96px; /* Header-Höhe (Padding + Logo + Border) — Desktop */ /* ── Easings (Bridget-konform · kein Spring) ──────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-unfold: cubic-bezier(0.16, 1.0, 0.3, 1.0); --ease-fade: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ KONTEXT-AKZENT — schaltet die Welt an einer Stelle um. → Mauve → Sage → Ink (Default) ============================================================ */ body[data-context="feiern"] { --accent: var(--pink); --accent-deep: var(--pink-deep); --accent-soft: var(--pink-soft); --accent-wash: var(--pink-wash); --accent-hint: var(--pink-hint); --accent-mid: var(--pink-mid); } body[data-context="abschied"] { --accent: var(--sage); --accent-deep: var(--sage-deep); --accent-soft: var(--sage-soft); --accent-wash: var(--sage-wash); --accent-hint: var(--sage-hint); --accent-mid: var(--sage-mid); } /* Mobile: Header-Padding ist 16px statt 20px → kompakter Header */ @media (max-width: 860px) { :root { --header-h: 82px; } }