/* ============================================================================ Pathway Lab Service · Design Tokens v1.0 (09/2026) Drei Ebenen: 1 Primitive (Rohwerte, nie direkt in Komponenten) 2 Semantik (Rollen – das benutzen Seiten und Komponenten) 3 Komponenten (nur wo eine Komponente eigene Stellschrauben braucht) Herkunft: Logo-Navy + Pathway-Grün (Live-Seite), Syne/Figtree (Live-Seite), B612 Mono (Etiketten), Eosin/Hämatoxylin (H&E-Färbung, nur Akzent) Motion nach Emil Kowalski: eigene ease-out-Kurven, UI < 300 ms, Abgang schneller als Auftritt ========================================================================== */ :root { /* ── 1 · PRIMITIVE ─────────────────────────────────────────────────────── */ /* Navy (aus dem Logo) */ --navy-950: #0A1C2E; --navy-900: #0F2B46; --navy-800: #12304D; --navy-700: #1B3A5C; --navy-600: #24476B; --navy-400: #7F97AE; --navy-300: #9FB2C5; --navy-200: #C4D0DC; --navy-50: #EEF2F6; /* Grün (Pathway-Button-Grün der Live-Seite; 700 = AA-tauglich mit Weiß) */ --green-800: #2F6918; --green-700: #3A7A1F; --green-600: #4B9228; --green-300: #9BD77A; --green-100: #E4F1D9; /* H&E-Färbung – ausschließlich Akzent/Platzhalter, nie Fläche oder CTA */ --eosin-800: #8A3F62; --eosin-600: #C9557F; --eosin-50: #F8ECF1; --hema-600: #5B3F8C; /* Neutrale (leicht grünstichig, passend zum Laborweiß) */ --neutral-0: #FFFFFF; --neutral-50: #F6F7F5; --neutral-100: #EDF0EC; --neutral-200: #DDE2DE; --neutral-300: #C9D0CB; --neutral-600: #56616B; --neutral-800: #2E3A45; --neutral-950: #0F1B26; /* Schriften (selbst gehostet, siehe fonts/fonts.css) */ --font-display: 'Syne', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-mono: 'B612 Mono', ui-monospace, monospace; /* Cockpit-/Instrumenten-Mono → Laboretikett. Nur für Beschriftungen (Objektträger, Formblatt, Abb., Datum) */ /* ── Typo-Skala (9 Stufen statt 25 Einzelwerte) ── */ --fs-micro: 12px; /* Mono-Labels, Tags, Tabellenköpfe */ --fs-caption: 14px; /* Hilfstexte, Meta, Formular-Labels */ --fs-small: 15.5px; /* Kartentexte, Listen */ --fs-body: 17px; /* Fließtext */ --fs-lead: clamp(17px, 1.45vw, 19px); /* Einleitungen */ --fs-h4: 20px; /* Karten-/FAQ-Titel */ --fs-h3: clamp(21px, 1.8vw, 24px); /* Leistungs-Titel */ --fs-h2: clamp(28px, 4vw, 48px); /* Abschnitts-Überschriften */ --fs-display: clamp(36px, 4.6vw, 64px); /* Nur H1 */ --fs-figure: 32px; /* Preise, Kennzahlen */ --lh-tight: 1.04; --lh-snug: 1.3; --lh-body: 1.62; --tracking-display: -0.025em; --tracking-mono: 0.04em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ── Abstands-Skala (4er-Raster) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-section: clamp(64px, 8.5vw, 112px); --gutter: 32px; --container: 1200px; --tap-min: 44px; /* ── Radien ── */ --radius-xs: 3px; /* Tags, Nummern-Chips */ --radius-sm: 6px; /* Themen-Chips, Icon-Kacheln */ --radius-md: 8px; /* Buttons, Inputs */ --radius-lg: 12px; /* Karten, Tabellen, Formular */ --radius-xl: 16px; /* Fotos */ --radius-full: 999px; /* ── Linien (statt Schatten: Flächen + Hairlines) ── */ --border-width: 1px; --focus-width: 2.5px; /* ── Motion (Emil Kowalski) ── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Auftritt, Feedback */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Bewegung auf dem Screen */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Leisten/Sheets */ --ease-color: ease; /* Farb-/Hover-Wechsel */ --dur-press: 140ms; /* Button-Druck */ --dur-hover: 180ms; /* Hover, Farbe */ --dur-ui: 220ms; /* Menü, Accordion, Chips */ --dur-exit: 160ms; /* Abgang immer schneller als Auftritt */ --dur-sheet: 280ms; /* Sticky-Leiste rein */ --dur-reveal: 450ms; /* seltene Scroll-Einblendung (Marketing) */ --stagger: 60ms; --press-scale: 0.97; /* ── 2 · SEMANTIK ──────────────────────────────────────────────────────── */ --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-sunken: var(--neutral-100); --color-surface-hover: #FAFBFA; --color-surface-inverse: var(--navy-950); --color-surface-inverse-raised: var(--navy-800); --color-text: var(--neutral-950); --color-text-heading: var(--navy-900); --color-text-secondary: var(--neutral-800); --color-text-muted: var(--neutral-600); --color-text-inverse: var(--neutral-0); --color-text-inverse-secondary: var(--navy-200); --color-text-inverse-muted: var(--navy-400); /* nur auf --color-surface-inverse (5,70:1) */ --color-text-inverse-label: var(--navy-300); /* auf --color-surface-inverse-raised (6,2:1); -muted wäre 4,46 */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-border-inverse: var(--navy-600); --color-action: var(--green-700); /* EINZIGE CTA-Farbe */ --color-action-hover: var(--green-800); --color-action-text: var(--neutral-0); --color-link: var(--green-700); --color-link-on-wash: var(--green-800); /* Grün auf Wash: 700 wäre nur 4,49:1 */ --color-focus: var(--green-600); --color-wash: var(--green-100); /* Tags, Auswahl, Nummern */ --color-positive-inverse: var(--green-300); /* ✓ auf dunkel */ --color-danger: #B42318; /* Formfehler · 6,5:1 auf Weiß */ --color-danger-wash: #FDECEA; --color-placeholder-bg: var(--eosin-50); /* „von Jana zu liefern“ */ --color-placeholder-border: #C9A7B7; --color-placeholder-text: var(--eosin-800); /* Kategorien-Punkte der Leistungen (Identität, nie Fläche) */ --cat-audit: var(--green-600); --cat-qmb: var(--hema-600); --cat-doku: var(--navy-700); --cat-prozess: var(--eosin-600); /* ── 3 · KOMPONENTEN ───────────────────────────────────────────────────── */ --btn-pad-y: 15px; --btn-pad-x: 22px; --btn-pad-y-sm: 11px; --btn-pad-x-sm: 16px; --tag-pad: 4px 8px; --card-pad: var(--space-7); --slide-label-w: 84px; /* Objektträger-Beschriftungsfeld */ --slide-label-w-sm: 50px; --slide-frost: repeating-linear-gradient(135deg, #EAEDE9 0 3px, #F3F5F2 3px 6px); --header-h: 76px; } @media (max-width: 640px) { :root { --gutter: 18px; --card-pad: var(--space-5); } }