/* ═══════════════════════════════════════════════════════════════════════════ OTG Design System — Token-Layer (Single Source of Truth) ─────────────────────────────────────────────────────────────────────────── Framework-agnostische Design-Tokens als CSS-Custom-Properties (`--ds-*`). Herkunft: extrahiert aus der produktiv-gehärteten OTG-CRM-Implementierung (Cathedral, `mom-lead-system-foundation/src/app/globals.css`), die ihrerseits das SSP1-Design-System (Geist + Space Mono, OTG Warm Palette, 4 Elevation, Dot-Badge) trägt. Alle Werte sind WCAG-AA-geprüft (siehe Inline-Notizen). Konsum: - Plain CSS / jedes Framework: `var(--ds-bg-card)`, `var(--ds-primary)`, … - Tailwind v4: über `tailwind/otg-preset.css` (mappt auf `bg-ds-*` Utilities) - Scope: Tokens liegen auf `:root` (greenfield) UND `.otg-ds` (inkrementelle Adoption neben einem Legacy-Stylesheet — analog `.cathedral-root`). - Dark Mode: `html.dark`, `[data-theme="dark"]`, oder `.otg-ds.dark`. ═══════════════════════════════════════════════════════════════════════════ */ /* Fonts (Geist + Space Mono) werden hier NICHT geladen: ein @import in einer via @import eingebundenen Datei landet nach den Consumer-Regeln (z.B. nach `@import "tailwindcss"`) und verletzt die CSS-Regel „@import muss allen anderen Regeln vorausgehen" → Lightning-CSS-Build-Bruch bei Tailwind-v4-Consumern. Zudem ist ein Remote-Google-Fonts-Call ein DSGVO-Problem. Der Consumer lädt die Fonts self-hosted (z.B. next/font) und mappt sie auf --ds-font-ui/-brand. (Entfernt in tokens@0.4.1.) */ /* ─── Light Mode (Default) ──────────────────────────────────────────────── */ :root, .otg-ds { /* Brand */ --ds-primary: #1d48c0; /* OneTech-Blau — primäre Aktionen, aktive Nav */ --ds-primary-hover: #162f80; --ds-primary-light: #f0f3fb; /* aktive-Nav-Fläche, Primary-Tint-BG */ --ds-primary-subtle: #e4eafa; /* Kontrast-Farbe ON einer gesättigten --ds-primary-Fläche (Button-Label, aktive Toggles). Bleibt #fff in BEIDEN Modi — darf nicht --ds-bg-card wiederverwenden, das im Dark auf #1e1d1b flippt. */ --ds-on-primary: #ffffff; /* Link-/interaktiver TEXT, entkoppelt vom --ds-primary-Button-Fill. In LIGHT == --ds-primary #1d48c0 (7.66:1 auf weiß — AA). Die beiden Tokens divergieren im DARK: der Fill muss weiße Labels lesbar halten (treibt ihn dunkler), Link-TEXT muss auf der dunklen Card lesbar bleiben (treibt ihn heller) — ein Token kann nicht beides. Siehe Dark-Block. */ --ds-link: #1d48c0; /* Backgrounds — OTG Warm Palette (warmes Off-White statt kalter Grays) */ --ds-bg-page: #f9f8f6; --ds-bg-card: #ffffff; --ds-bg-sidebar: #ffffff; --ds-bg-sidebar-sub: #f5f4f1; --ds-bg-sidebar-hover: #f0eeea; --ds-bg-section: #f5f4f1; --ds-bg-hover: #f7f6f3; --ds-bg-selected: #eef2ff; /* Self/Selected-Row-Hintergrund; muted-Text AA in beiden Modi */ /* Text */ --ds-text-primary: #1a1a1a; --ds-text-secondary: #5e5b56; /* SSP1 liefert --text-muted #9B9690, aber das ist ~2.9:1 auf weiß — failt AA. Auf warmes ~4.85:1 gedarkt (Lucas-Entscheidung 2026-06-08), bleibt heller als --ds-text-secondary (Hierarchie erhalten). */ --ds-text-muted: #6f6a64; /* Lesbarkeit: #c4c0ba war ~1.8:1 auf weiß — Placeholder kaum sichtbar. Auf ein warmes ~3.3:1 gedarkt. Bewusst KEIN volles 1.4.3-Text-Niveau (4.5:1): Placeholder ist subduierter Hint-Text, bleibt heller als --ds-text-muted (Hierarchie erhalten, kein Verwechseln mit dem Eingabewert). */ --ds-text-placeholder: #978d7e; --ds-text-sidebar: #5e5b56; --ds-text-sidebar-active: #1a1a1a; /* Borders */ --ds-border: #e8e5e0; --ds-border-light: #f0eeea; --ds-border-sidebar: #e8e5e0; /* WCAG-1.4.11 (Non-text Contrast): dediziertes Token NUR für interaktive Input/Select-Boundaries — ≥3:1 ggü. JEDER Feldfläche (white 3.60 / page #f9f8f6 3.39 / section #f5f4f1 3.27), nicht nur weiß. Dekorative --ds-border/-light (Karten/Divider) bleiben bewusst soft (1.4.11-exempt) — die weiche Warm-Palette bleibt erhalten. Consumer nutzen `var(--ds-border-input, var(--ds-border))` (graceful Fallback, kein Regress). */ --ds-border-input: #8f8676; /* Semantic */ --ds-success: #16a34a; --ds-success-light: #f0fdf4; /* Solid success-Button-Fill: --ds-success #16a34a ist als weißer-Label-Grund nur 3.30:1 (AA-Fail, 13px-Label = Normal-Text ≥4.5:1). Dieser dunklere Fill traegt das weisse Label AA. Analog zu --ds-error/--ds-error-hover fuer den destructive-Button. */ --ds-success-strong: #15803d; /* green-700 — weißes Label 5.02:1 (AA) */ --ds-success-strong-hover: #166534; /* green-800 — success-Hover, weißes Label 7.13:1 (AA) */ --ds-warning: #b07d08; /* light auf #b07d08 angehoben: 3.63:1 weiß / 3.51:1 amber-50 (WCAG-1.4.11 ≥3:1 Graphic: DotBadge/Chart/Sparkline). Dark bleibt #ca8a04 (dort 5.73:1 auf Card). */ --ds-warning-light: #fefce8; --ds-error: #dc2626; --ds-error-hover: #b91c1c; /* Destructive-Hover — weißes Label 6.5:1 (AA) */ --ds-error-light: #fef2f2; --ds-info: #1d48c0; /* Semantic TEXT-Tönungen — entkoppelt vom Fill/Accent-Token (analog --ds-link vs --ds-primary). Die gesättigten --ds-success/-warning/-error dienen als FILL-mit-weißem-Label / Border / Icon; warning ist für 1.4.11-Graphic (≥3:1) auf #b07d08 angehoben (3.63:1 weiß). Als BODY-TEXT auf hellen Flächen bleiben sie sub-AA (warning ~3.6:1, success #16a34a ~3.0:1, error #dc2626 ~4.0:1 auf weiß) → dafür diese -text-Varianten (als Label-Text AA auf weiß / -light- Tints). Genutzt von Checkbox `labelTone`. */ --ds-success-text: #166534; /* green-800 — 7.1:1 auf weiß (AA) */ --ds-warning-text: #92400e; /* amber-800 — 7.1:1 auf weiß, 6.84:1 auf amber-50 (AA) */ --ds-error-text: #b91c1c; /* red-700 (== error-hover) — 6.5:1 auf weiß (AA) */ --ds-info-text: #1d48c0; /* == --ds-info light, 7.66:1 auf weiß (AA als Text) */ /* Accent (Indigo) — terminale/finalisierte Status (exportiert/archiviert), distinkt von info/primary-Blau. Badge-Tone "accent". */ --ds-accent: #4338ca; --ds-accent-light: #eef2ff; --ds-notification: #dd4b39; /* Fonts — Geist = UI/Headings, Space Mono = Brand/Wordmarks + IDs/Zahlen */ --ds-font-ui: "Geist", system-ui, -apple-system, sans-serif; --ds-font-brand: "Space Mono", ui-monospace, monospace; /* Elevation (4 Stufen) */ --ds-shadow-sm: 0 1px 2px rgba(30, 25, 20, 0.04); --ds-shadow-card: 0 1px 3px rgba(30, 25, 20, 0.05), 0 1px 2px rgba(30, 25, 20, 0.03); --ds-shadow-elevated: 0 4px 16px rgba(30, 25, 20, 0.08), 0 2px 4px rgba(30, 25, 20, 0.04); --ds-shadow-modal: 0 16px 48px rgba(30, 25, 20, 0.12), 0 4px 12px rgba(30, 25, 20, 0.06); /* Radii */ --ds-radius-xs: 3px; --ds-radius-sm: 4px; --ds-radius-md: 6px; --ds-radius-lg: 8px; --ds-radius-xl: 12px; /* Z-Index — Overlay-Stacking-Floor (sticky < tooltip < popover/menu < modal). EIN Ort für die Layer-Ordnung, damit Popover/Dropdown/DatePicker (Floating- Foundation) + Modal (`zIndex`-Prop) vorhersagbar stacken. Die Werte spiegeln die geshippte Ist-Landschaft (Sidebar-Overlay 40 · Tooltip + Sidebar-Drawer- Panel 50 · HelpIcon/Notification/UserMenu 60 · Modal 100 · CommandPalette 120), damit der Phase-2-Retrofit der bestehenden Overlays ein reiner Rename ohne Stacking-Sprung ist. Theme-invariant → nur :root, nicht im Dark-Block (wie Radii/Shadows). */ --ds-z-sticky: 40; /* Sidebar-Overlay/Backdrop + Hamburger, sticky Table-Header */ --ds-z-tooltip: 50; /* Tooltip + mobiler Sidebar-Drawer-Panel (styles.css) — transient */ --ds-z-popover: 60; /* Popover, Dropdown/Action-Menu, Select, DatePicker */ --ds-z-modal: 100; /* Modal-Backdrop + Dialog */ --ds-z-command: 120; /* CommandPalette — modal-Tier, über Modal */ /* ─── Control Sizing (density-swappable via [data-density]) ─────────────── Theme-invariant (like Radii/Z-Index) → base block only, NO dark entry. Defaults reproduce today's hardcoded px exactly (byte-identical). Density is orthogonal to theme; the [data-density] swap composes with the dark swap automatically. */ --ds-control-pad-y-sm: 6px; --ds-control-pad-y-md: 9px; --ds-control-pad-y-lg: 11px; --ds-control-pad-x-sm: 11px; --ds-control-pad-x-md: 15px; --ds-control-pad-x-lg: 18px; --ds-control-font-sm: 12.5px; --ds-control-font-md: 13px; --ds-control-font-lg: 14px; --ds-control-min-h-sm: auto; --ds-control-min-h-md: auto; --ds-control-min-h-lg: auto; --ds-control-min-w-sm: auto; --ds-control-min-w-md: auto; --ds-control-min-w-lg: auto; --ds-field-pad-y-sm: 5px; --ds-field-pad-y-md: 8px; --ds-field-pad-x-sm: 9px; --ds-field-pad-x-md: 11px; --ds-field-font-sm: 12.5px; --ds-field-font-md: 13px; --ds-field-min-h-sm: auto; --ds-field-min-h-md: auto; --ds-field-chevron-gutter-sm: 24px; --ds-field-chevron-gutter-md: 30px; --ds-field-leading-gutter-sm: 27px; --ds-field-leading-gutter-md: 33px; --ds-field-chevron-size-sm: 12px; --ds-field-chevron-size-md: 14px; --ds-field-chevron-offset-sm: 7px; --ds-field-chevron-offset-md: 9px; --ds-menu-item-pad-y: 8px; --ds-menu-item-pad-x: 10px; --ds-menu-item-font: 13.5px; --ds-menu-item-min-h: auto; /* AppHeader-Actions-Gap: rechte Slot-Gruppe (global Bell/UserMenu). In touch expandiert deren data-ds-tap-min-::before auf 44px; bei 10px Gap überlappen zwei 44er Hit-Areas → touch öffnet auf 16px. Compact setzt ihn explizit auf 10px (nearest-setter, damit compact unter touch tight bleibt). */ --ds-appheader-actions-gap: 10px; /* NotificationBell-Header-Padding-Y: touch macht 'Alle gelesen' zu einem 44px-Ziel (min-height), was den Header sonst auf ~67px aufbläht. Touch trimmt das vertikale Padding, damit der Header proportional bleibt (~52px, Titel nicht freischwebend). */ --ds-notif-header-pad-block: 11px; --ds-control-icon-sm: 24px; --ds-control-icon-md: 30px; --ds-control-icon-lg: 40px; --ds-tap-min: auto; --ds-chip-pad-y: 3px; --ds-chip-pad-x: 10px; --ds-chip-font: 12px; --ds-chip-min-h: auto; --ds-datepicker-cell: 40px; --ds-datepicker-day-inset: 4px; --ds-pagination-cell: 32px; /* Component-scoped exceptions preserve controls that do not match a shared tier today. Combobox x-padding is one pixel wider than fields ONLY in the Default; compact/touch align both intentionally. */ --ds-seg-pad-y: 5px; --ds-seg-pad-x: 12px; --ds-seg-font: 12.5px; --ds-seg-min-h: auto; --ds-tabs-pad-y: 9px; --ds-tabs-pad-x: 12px; --ds-tabs-font: 13px; --ds-tabs-min-h: auto; --ds-themetoggle-segment-w: 28px; --ds-themetoggle-segment-h: 24px; --ds-combobox-pad-x: 12px; /* ─── Chart / Dataviz (RFC 0002, Issue #85) ─────────────────────────────── Zwei getrennte Skalen. Beide sind ECHTE Tokens mit Light/Dark-Swap, keine feste Hex-Liste: die Kontrastrichtung kehrt sich zwischen den Modi um (im Light liegt die Serienfarbe dunkler als die Card, im Dark heller), deshalb kann ein einzelner Hex 1.4.11 nicht in beiden Modi erfüllen. DISJUNKT VON DEN STATUS-TOKENS. Keine Serie ist --ds-primary/-success/ -warning/-error. Sonst liest ein Nutzer in einem neutralen Kategorien-Chart "gut" und "schlecht", wo keine Wertung gemeint ist. Alle Werte gegen --ds-bg-card gemessen (WCAG 1.4.11 ≥3:1, Balken/Flächen tragen Bedeutung). Light-Minimum 3.13, Dark-Minimum 3.19. ⚠️ GRENZE, die der Konsument kennen muss: die Serien liegen zwangsläufig in einem engen Luminanzband (im Light muss ALLES ≥3:1 gegen Weiß bleiben). Der geringste Serie-zu-Serie-Kontrast ist dadurch 1.12 — zu wenig, um bei Farbfehlsichtigkeit allein zu tragen. FARBE DARF NIE DER EINZIGE TRÄGER SEIN: ab ~4 Serien gehören direkte Labels, Muster oder Glyphen dazu. Das ist keine Schwäche dieser Palette, sondern eine Folge der Anforderung — mehr Trennung ist bei 8 Serien mit ≥3:1-Floor physikalisch nicht drin. */ --ds-chart-series-1: #223e89; --ds-chart-series-2: #7b400e; --ds-chart-series-3: #1a685e; --ds-chart-series-4: #b6358f; --ds-chart-series-5: #885fd0; --ds-chart-series-6: #588e29; --ds-chart-series-7: #da6372; --ds-chart-series-8: #529abd; /* Ordinal/sequenziell — EIN Hue, 5 Intensitätsstufen. Für Dinge MIT natürlicher Ordnung (Trichterstufen, Zeitreihen-Intensität, Heatmap). Benachbarte Stufen 1.24 auseinander; auch die hellste Stufe hält ≥3:1. */ --ds-chart-seq-1: #25418c; --ds-chart-seq-2: #3155b7; --ds-chart-seq-3: #4367cd; --ds-chart-seq-4: #5a7bd3; --ds-chart-seq-5: #718cd9; /* Chart-Chrome. Aliase auf die Basis-Tokens, damit sie nicht auseinander- laufen — der Kontrast ist dort schon geprüft. */ --ds-chart-grid: var(--ds-border-light); --ds-chart-axis: var(--ds-text-muted); --ds-chart-tooltip-bg: var(--ds-bg-card); --ds-chart-tooltip-border: var(--ds-border); } /* ─── Dark Mode (variable-swap) ───────────────────────────────────────────── bg/text/border kommen verbatim aus SSP1 DESIGN.md § Dark (`html.dark`). primary/-light-Tints/on-primary sind abgeleitet (DERIVED) und AA-getunt. */ html.dark, [data-theme="dark"], .otg-ds.dark, html.dark .otg-ds { /* Brand */ --ds-primary: #4d6fd0; /* DERIVED — SSP1 primary-light-3; weißes Label 4.67:1 (AA) */ /* Hover geht im Dark DUNKLER statt heller: #4d6fd0 ist mit 4.67:1 schon die AA-Untergrenze fürs weiße Label — jede hellere Stufe failt (alt #6b86dd: 3.45:1; WCAG 1.4.3 gilt auch im Hover-State). #3a57b8 = 6.5:1. (0.5.0) */ --ds-primary-hover: #3a57b8; --ds-primary-light: #1e2a44; /* dunkle Navy-Fläche für aktive Nav */ --ds-primary-subtle: #243056; --ds-on-primary: #ffffff; /* DERIVED — Link-TEXT, AA auf jeder dunklen Fläche: 5.95:1 auf Card #1e1d1b, 5.05:1 auf Navy-Nav #1e2a44, 5.0:1 auf bg-hover. Der #4d6fd0-Fill ist als Text nur 3.6:1 (failt AA) — daher ist Link-Text hier entkoppelt. */ --ds-link: #7e97e3; --ds-info: #4d6fd0; /* Backgrounds — SSP1 warm-dark */ --ds-bg-page: #161514; --ds-bg-card: #1e1d1b; --ds-bg-sidebar: #1e1d1b; --ds-bg-sidebar-sub: #252422; --ds-bg-sidebar-hover: #2c2b28; --ds-bg-section: #252422; --ds-bg-hover: #2c2b28; --ds-bg-selected: #1e1b3a; /* Text — muted AA-getunt (SSP1-dark #706c66 failt auf #1e1d1b) */ --ds-text-primary: #edebe8; --ds-text-secondary: #a8a49e; --ds-text-muted: #8f8a83; /* DERIVED — ~4.6:1 auf #1e1d1b */ --ds-text-placeholder: #736e66; /* Lesbarkeit: #4a4742 war ~1.8:1 — auf ~3.3:1 (Hint-Text, kein volles 1.4.3) */ --ds-text-sidebar: #a8a49e; --ds-text-sidebar-active: #edebe8; /* Borders */ --ds-border: #333130; --ds-border-light: #292826; --ds-border-sidebar: #333130; --ds-border-input: #7a746c; /* WCAG-1.4.11: ≥3:1 ggü. jeder Dark-Feldfläche (card 3.64 / section #252422 3.35) */ /* Semantic — gesättigte Farben bleiben; -light-Tints für dunkle Flächen */ --ds-success: #16a34a; --ds-success-light: #15271c; /* Solid success-Button-Fill — bleibt im Dark-Mode dunkel (weißes Label), kein Lighten: white-on-#15803d = 5.02:1, white-on-#166534 = 7.13:1 (AA in beiden Modi). */ --ds-success-strong: #15803d; /* green-700 — weißes Label 5.02:1 (AA) */ --ds-success-strong-hover: #166534; /* green-800 — 7.13:1 (AA) */ --ds-warning: #ca8a04; --ds-warning-light: #2a2410; --ds-error: #dc2626; --ds-error-hover: #b91c1c; /* dunkler analog primary-hover — weißes Label 6.5:1 */ --ds-error-light: #2b1718; /* Semantic TEXT-Tönungen Dark — heller als die Fill-Tokens, AA als Label-Text auf der dunklen Card (#1e1d1b) UND den dunklen -light-Tints. Die Fill-Tokens taugen im Dark als Text teils nicht (info #4d6fd0 nur 3.6:1 — siehe --ds-link oben, gleiches Entkopplungs-Motiv). */ --ds-success-text: #4ade80; /* green-400 — ~9.7:1 auf #1e1d1b (AA) */ --ds-warning-text: #fbbf24; /* amber-400 — ~10:1 auf #1e1d1b (AA) */ --ds-error-text: #f87171; /* red-400 — ~6.0:1 auf #1e1d1b (AA) */ --ds-info-text: #7e97e3; /* == --ds-link dark — 5.95:1 auf Card (AA) */ /* Accent (Indigo) — Dark: helleres Indigo auf dunkler getönter Fläche (AA). */ --ds-accent: #818cf8; --ds-accent-light: #1e1b3a; --ds-notification: #dd4b39; /* Chart / Dataviz — Dark-Pendants (RFC 0002, Issue #85). Gleiche Hues, aber HELLER als die Card statt dunkler: im Dark kehrt sich die Kontrastrichtung um. Genau deshalb sind das Tokens und keine feste Hex-Liste. Gegen --ds-bg-card (#1e1d1b) gemessen, Minimum 3.19. */ --ds-chart-series-1: #3f65cf; --ds-chart-series-2: #b96215; --ds-chart-series-3: #259486; --ds-chart-series-4: #d56db6; --ds-chart-series-5: #ad8fdf; --ds-chart-series-6: #75bc36; --ds-chart-series-7: #eaa4ad; --ds-chart-series-8: #a4c9dc; --ds-chart-seq-1: #4569ce; --ds-chart-seq-2: #6281d5; --ds-chart-seq-3: #7c96dc; --ds-chart-seq-4: #93a8e2; --ds-chart-seq-5: #afbfea; /* --ds-chart-grid/-axis/-tooltip-* sind Aliase auf Basis-Tokens und werden hier bewusst NICHT neu gesetzt — sie folgen dem Swap ihrer Quelle. */ /* Shadows/Radii/Fonts werden im Dark NICHT neu definiert (warme Shadows sind auf dunkel ~unsichtbar; Borders tragen die Elevation). */ } /* ─── Density: Compact (B2B, tighter) ─── sizing tokens only ─────────────── */ [data-density="compact"], :where([data-density="compact"]) .otg-ds, .otg-ds[data-density="compact"] { --ds-control-pad-y-sm: 4px; --ds-control-pad-y-md: 6px; --ds-control-pad-y-lg: 8px; --ds-control-pad-x-sm: 9px; --ds-control-pad-x-md: 12px; --ds-control-pad-x-lg: 14px; --ds-control-font-sm: 12px; --ds-control-font-md: 12.5px; --ds-control-font-lg: 13px; --ds-field-pad-y-sm: 4px; --ds-field-pad-y-md: 6px; --ds-field-pad-x-sm: 8px; --ds-field-pad-x-md: 10px; --ds-field-font-sm: 12px; --ds-field-font-md: 12.5px; --ds-field-chevron-gutter-sm: 22px; --ds-field-chevron-gutter-md: 26px; --ds-field-leading-gutter-sm: 26px; --ds-field-leading-gutter-md: 30px; --ds-field-chevron-size-sm: 12px; --ds-field-chevron-size-md: 13px; --ds-field-chevron-offset-sm: 6px; --ds-field-chevron-offset-md: 8px; --ds-menu-item-pad-y: 5px; --ds-menu-item-font: 13px; --ds-appheader-actions-gap: 10px; /* explicit nearest-setter: compact-under-touch bleibt tight (kein ::before-Overlap in compact) */ --ds-notif-header-pad-block: 11px; /* explicit nearest-setter: compact-Header behält komfortables Padding (kein 44px-Link in compact) */ --ds-tap-min: auto; /* explicit nearest-setter: compact = auto (keine 44px-Ziele); sonst erbt ein compact-Subtree UNTER einem touch-Ancestor die 44px (Switch/Radio/Checkbox-Label + die ::before-Glyphs würden touch-groß) */ --ds-control-icon-sm: 24px; --ds-control-icon-md: 28px; --ds-control-icon-lg: 36px; --ds-chip-pad-y: 2px; --ds-chip-pad-x: 8px; --ds-chip-font: 11.5px; --ds-datepicker-cell: 34px; --ds-datepicker-day-inset: 4px; --ds-pagination-cell: 28px; --ds-seg-pad-y: 4px; --ds-seg-pad-x: 10px; --ds-seg-font: 12px; --ds-seg-min-h: 24px; --ds-tabs-pad-y: 6px; --ds-tabs-pad-x: 10px; --ds-tabs-font: 12.5px; --ds-themetoggle-segment-w: 26px; --ds-themetoggle-segment-h: 24px; --ds-combobox-pad-x: 10px; } /* ─── Density: Touch (WCAG 2.5.5 — ≥44px targets) ───────────────────────── */ [data-density="touch"], :where([data-density="touch"]) .otg-ds, .otg-ds[data-density="touch"] { --ds-control-pad-y-sm: 10px; --ds-control-pad-y-md: 12px; --ds-control-pad-y-lg: 14px; --ds-control-pad-x-sm: 14px; --ds-control-pad-x-md: 18px; --ds-control-pad-x-lg: 22px; --ds-control-font-sm: 13px; --ds-control-font-md: 14px; --ds-control-font-lg: 15px; --ds-control-min-h-sm: 44px; --ds-control-min-h-md: 44px; --ds-control-min-h-lg: 48px; --ds-control-min-w-sm: 44px; --ds-control-min-w-md: 44px; --ds-control-min-w-lg: 48px; --ds-field-pad-y-sm: 10px; --ds-field-pad-y-md: 11px; --ds-field-pad-x-sm: 12px; --ds-field-pad-x-md: 14px; --ds-field-font-sm: 13px; --ds-field-font-md: 14px; --ds-field-min-h-sm: 44px; --ds-field-min-h-md: 44px; --ds-field-chevron-gutter-sm: 34px; --ds-field-chevron-gutter-md: 38px; --ds-field-leading-gutter-sm: 34px; --ds-field-leading-gutter-md: 38px; --ds-field-chevron-size-sm: 14px; --ds-field-chevron-size-md: 16px; --ds-field-chevron-offset-sm: 10px; --ds-field-chevron-offset-md: 12px; --ds-menu-item-pad-y: 13px; --ds-menu-item-pad-x: 14px; --ds-menu-item-font: 14px; --ds-menu-item-min-h: 44px; --ds-appheader-actions-gap: 16px; /* Bell+Avatar 44er ::before: center-to-center 48 ≥ 44 (browser-verifiziert) */ --ds-notif-header-pad-block: 4px; /* 'Alle gelesen' wird 44px → Header sonst ~67px; getrimmt auf ~52px */ --ds-control-icon-sm: 44px; --ds-control-icon-md: 44px; --ds-control-icon-lg: 44px; --ds-tap-min: 44px; --ds-chip-pad-y: 5px; --ds-chip-pad-x: 12px; --ds-chip-font: 13px; --ds-chip-min-h: auto; --ds-datepicker-cell: 44px; --ds-datepicker-day-inset: 0px; --ds-pagination-cell: 44px; --ds-seg-pad-y: 10px; --ds-seg-pad-x: 14px; --ds-seg-font: 13px; --ds-seg-min-h: 44px; --ds-tabs-pad-y: 12px; --ds-tabs-pad-x: 16px; --ds-tabs-font: 14px; --ds-tabs-min-h: 44px; --ds-themetoggle-segment-w: 44px; --ds-themetoggle-segment-h: 44px; --ds-combobox-pad-x: 14px; } /* ─── Base-Surface (optional Convenience) ─────────────────────────────────── Greenfield-Apps können die Wurzel direkt auf das Token-System setzen. */ .otg-ds { font-family: var(--ds-font-ui); background: var(--ds-bg-page); color: var(--ds-text-primary); }