/* ============================================================ puntavo / move-IT — Design-Token-Wahrheit Ported 1:1 from puntavo/packages/ui/src/tokens/tokens.css (Story 3.1 — canonical v2 contract, DESIGN.md 2026-06-02). Variants via data-* attributes on : [data-theme="petrol|graphit|forst"] [data-density="kompakt|standard|komfortabel"] [data-comp="wertig|praezise"] Defaults (petrol / standard / wertig) apply without attributes. ============================================================ */ :root { /* Neutrals (cool/green tinted) */ --c-bg: #f4f6f5; --c-surface: #ffffff; --c-surface-2: #fafbfb; --c-surface-3: #f1f4f3; --c-border: #e5eae8; --c-border-strong: #d2dad7; --c-text: #15201d; --c-text-2: #586663; --c-text-3: #8a9692; /* Overlay scrim (theme-independent) */ --c-scrim: rgba(12, 24, 21, 0.34); /* Status (5, cross-module, fg/bg) */ --s-planned-fg: #5b6967; --s-planned-bg: #ebeeed; --s-transit-fg: #1b6ba8; --s-transit-bg: #e6eff6; --s-delivered-fg: #1c7a49; --s-delivered-bg: #e4f1e9; --s-delayed-fg: #a86b07; --s-delayed-bg: #f8efdc; --s-exception-fg: #ae3b3b; --s-exception-bg: #f7e8e8; /* Module signature colors (solid/soft) */ --mod-transport-solid: #0f5a50; --mod-transport-soft: #e4efec; --mod-procure-solid: #2a5c8a; --mod-procure-soft: #e7eef5; --mod-freight-solid: #9a6b2f; --mod-freight-soft: #f4ecdf; --mod-customs-solid: #3b4a6b; --mod-customs-soft: #e9ecf3; --mod-export-solid: #8a3b3b; --mod-export-soft: #f4e6e6; /* Dark launcher/portal shell (default petrol; themed below) */ --c-shell-bg: #0c322e; --c-shell-bg-2: #0a2a27; --c-shell-fg: #b7cbc6; --c-shell-fg-2: #7e948f; --c-shell-accent: #3fbfae; /* Shell glass + bright on-shell text + dark shell elevation */ --c-shell-glass: rgba(255, 255, 255, 0.1); --c-shell-glass-hover: rgba(255, 255, 255, 0.16); --c-shell-glass-border: rgba(255, 255, 255, 0.14); --c-shell-glass-border-strong: rgba(255, 255, 255, 0.22); --c-shell-fg-bright: #eaf2ef; --shadow-tile: 0 10px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); --shadow-tile-raise: 0 16px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22); --shadow-dock: 0 14px 40px rgba(0, 0, 0, 0.3); --shadow-launch: 0 40px 90px rgba(0, 0, 0, 0.45); /* Dark toast surface + skeleton shimmer */ --c-toast-bg: #15201d; --c-toast-fg: #eef3f1; --motion-skeleton: 1200ms; /* @kind other */ /* Typography — IBM Plex */ --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, sfmono-regular, menlo, monospace; --line-base: 1.45; /* @kind other */ /* Font-size scale (canonical, DESIGN.md) */ --fs-view-title: 26px; --fs-appbar-title: 17px; --fs-appbar-sub: 12px; --fs-section-label: 11px; --fs-kpi-value: 30px; --fs-ct-count: 34px; --fs-table-header: 11.5px; --fs-table-body: 13.5px; --fs-form-section: 16px; --fs-field-label: 12.5px; --fs-badge: 11.5px; /* Control heights — FIXED (not density-driven) */ --ctrl-appbar-h: 62px; --ctrl-field-h: 42px; --ctrl-btn-h: 40px; --ctrl-btn-h-sm: 34px; --ctrl-chip-h: 32px; /* Motion durations (zeroed in reduced-motion below) */ --motion-fast: 120ms; /* @kind other */ --motion-base: 180ms; /* @kind other */ --motion-slow: 240ms; /* @kind other */ /* z-index scale */ --z-header: 50; /* @kind other */ --z-app-surface: 70; /* @kind other */ --z-launch: 75; /* @kind other */ --z-drawer: 80; /* @kind other */ --z-tweaks: 90; /* @kind other */ --z-toast: 100; /* @kind other */ /* → Theme petrol (default) */ --c-primary: #0f5a50; --c-primary-hover: #0b443c; --c-primary-soft: #e4efec; --c-primary-ring: rgba(15, 90, 80, 0.32); /* → Density standard (default) */ --font-base: 14px; --row-h: 44px; --cell-py: 11px; --cell-px: 16px; --pad-lg: 24px; --pad-md: 16px; --pad-sm: 10px; /* → Style wertig (default) */ --radius: 12px; --radius-sm: 8px; --radius-btn: 10px; --radius-btn-sm: 9px; --radius-field: 9px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(11, 32, 28, 0.05), 0 2px 8px rgba(11, 32, 28, 0.05); --shadow-raise: 0 6px 22px rgba(11, 32, 28, 0.1), 0 2px 8px rgba(11, 32, 28, 0.06); --shadow-pop: 0 30px 80px rgba(6, 26, 22, 0.3), 0 8px 24px rgba(6, 26, 22, 0.16); } /* ---------- Themes ---------- */ [data-theme='petrol'] { --c-primary: #0f5a50; --c-primary-hover: #0b443c; --c-primary-soft: #e4efec; --c-primary-ring: rgba(15, 90, 80, 0.32); --c-shell-bg: #0c322e; --c-shell-bg-2: #0a2a27; --c-shell-fg: #b7cbc6; --c-shell-fg-2: #7e948f; --c-shell-accent: #3fbfae; } [data-theme='graphit'] { --c-primary: #30474e; --c-primary-hover: #243840; --c-primary-soft: #e7ecee; --c-primary-ring: rgba(48, 71, 78, 0.32); --c-shell-bg: #1b2226; --c-shell-bg-2: #161c1f; --c-shell-fg: #b6bfc2; --c-shell-fg-2: #7e878b; --c-shell-accent: #5fa9a0; } [data-theme='forst'] { --c-primary: #1e5a37; --c-primary-hover: #16472b; --c-primary-soft: #e5f0e9; --c-primary-ring: rgba(30, 90, 55, 0.32); --c-shell-bg: #102a1b; --c-shell-bg-2: #0c2216; --c-shell-fg: #b5c9bc; --c-shell-fg-2: #7c9384; --c-shell-accent: #4fb877; } /* ---------- Density (data density ONLY, not controls) ---------- */ [data-density='standard'] { --font-base: 14px; --row-h: 44px; --cell-py: 11px; --cell-px: 16px; --pad-lg: 24px; --pad-md: 16px; --pad-sm: 10px; } [data-density='kompakt'] { --font-base: 13px; --row-h: 36px; --cell-py: 7px; --cell-px: 14px; --pad-lg: 18px; --pad-md: 12px; --pad-sm: 8px; } [data-density='komfortabel'] { --font-base: 15px; --row-h: 54px; --cell-py: 15px; --cell-px: 20px; --pad-lg: 30px; --pad-md: 20px; --pad-sm: 12px; } /* ---------- Component style (radii + shadows) ---------- */ [data-comp='wertig'] { --radius: 12px; --radius-sm: 8px; --radius-btn: 10px; --radius-btn-sm: 9px; --radius-field: 9px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(11, 32, 28, 0.05), 0 2px 8px rgba(11, 32, 28, 0.05); --shadow-raise: 0 6px 22px rgba(11, 32, 28, 0.1), 0 2px 8px rgba(11, 32, 28, 0.06); --shadow-pop: 0 30px 80px rgba(6, 26, 22, 0.3), 0 8px 24px rgba(6, 26, 22, 0.16); } [data-comp='praezise'] { --radius: 4px; --radius-sm: 3px; --radius-btn: 4px; --radius-btn-sm: 4px; --radius-field: 4px; --radius-pill: 4px; --shadow-card: none; --shadow-raise: 0 1px 0 rgba(20, 32, 29, 0.04); --shadow-pop: 0 6px 20px rgba(16, 32, 28, 0.12), 0 1px 3px rgba(16, 32, 28, 0.08); } /* ---------- Base application ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-ui); font-size: var(--font-base); line-height: var(--line-base); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } body { margin: 0; font-family: var(--font-ui); font-size: var(--font-base); } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: color-mix(in oklab, var(--c-primary) 22%, transparent); } /* Numbers/IDs/money/quantities — mono + tabular numbers */ .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } /* ---------- A11y: prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; /* @kind other */ --motion-base: 0ms; /* @kind other */ --motion-slow: 0ms; /* @kind other */ --motion-skeleton: 0ms; /* @kind other */ } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }