/* ============================================================ PIOS Desktop — Design Tokens ("Ember") WP0 deliverable. Source of truth: docs/design-direction-desktop.md Custom properties only — no rules that paint anything. Color tokens are DEFAULTS: operator template colors (cache/styles2.css, loads after this file) stay authoritative on the contract selectors. Components must always set surface AND text color together from these tokens. ============================================================ */ :root { /* ---- color: neutral graphite base ---- */ --pd-bg: #15171B; --pd-surface: #1D2026; --pd-surface-2: #262A31; --pd-line: #343943; --pd-ink: #F2F0EB; --pd-ink-soft: #B9BCC3; /* ---- color: single accent (ember) + states ---- */ --pd-accent: #E85D2C; --pd-accent-soft: rgba(232, 93, 44, 0.15); --pd-on-accent: #FFF7F2; --pd-ok: #4CAF7D; --pd-err: #E5484D; /* light legacy panels (checkout fragments, map, ratebox) keep dark ink; never rely on inherited body color (dark-skin lesson) */ --pd-ink-on-light: #23262B; --pd-surface-light: #FAF8F5; /* ---- typography ---- */ --pd-font-display: 'Bricolage Grotesque', system-ui, sans-serif; --pd-font-body: 'Roboto', system-ui, -apple-system, sans-serif; --pd-font-num: 'Roboto', system-ui, sans-serif; /* + tabular-nums */ --pd-fs-xs: 12px; --pd-fs-s: 13px; --pd-fs-base: 15px; --pd-fs-m: 17px; --pd-fs-l: 22px; --pd-fs-xl: 28px; --pd-fs-xxl: 36px; --pd-lh-body: 1.55; --pd-lh-tight: 1.15; --pd-track-display: -0.02em; /* ---- spacing (4px base) ---- */ --pd-sp-1: 4px; --pd-sp-2: 8px; --pd-sp-3: 12px; --pd-sp-4: 16px; --pd-sp-5: 24px; --pd-sp-6: 32px; --pd-sp-7: 48px; --pd-sp-8: 64px; /* ---- layout ---- */ --pd-page-max: 1200px; --pd-rail-w: 360px; --pd-gutter: 32px; /* ---- shape (shape lock: s/m + pill for price/CTA only) ---- */ --pd-r-s: 6px; --pd-r-m: 12px; --pd-r-pill: 999px; /* ---- elevation (tinted, never pure black) ---- */ --pd-shadow-1: 0 2px 10px rgba(10, 12, 16, 0.35); --pd-shadow-2: 0 12px 40px rgba(10, 12, 16, 0.5); /* ---- focus (border + glow, never outline on rounded controls) ---- */ --pd-focus-ring: 0 0 0 3px var(--pd-accent-soft); /* ---- motion (strong ease-out; exit ≈ 60-70% of enter) ---- */ --pd-ease: cubic-bezier(0.23, 1, 0.32, 1); --pd-ease-io: cubic-bezier(0.77, 0, 0.175, 1); --pd-t-fast: 140ms; --pd-t-med: 220ms; --pd-t-slow: 320ms; } /* ============================================================ TEE DESKTOP THEME (WP-tee) Pixel-nahe Nachbildung von temp/tee. Eigener --tee-* Namespace, damit die bestehenden --pd-* Tokens unberührt bleiben. Akzentfarbe wird über gewählt — das ist die spätere Schnittstelle für die neue Admin-Template-Funktion. ============================================================ */ :root { /* surfaces (aus tee/index.css + Spec) */ --tee-bg: #0D0D0D; --tee-surface: #1E2020; --tee-surface-2: #282A2B; --tee-sidebar: #121414; --tee-footer: #0A0C0D; --tee-line: #232526; --tee-line-2: #2F3132; --tee-input-bg: #0D0D0D; --tee-input-line: #2C2E2F; /* text */ --tee-ink: #F5F5F5; --tee-ink-soft: #A0A0A0; --tee-ink-warm: #D0C5AF; --tee-ink-light: #111111; /* auf hellen Legacy-Panels (Cart-Items) */ /* status */ --tee-ok: #22C55E; --tee-hot: #DC2626; /* typography — two families only (operator 2026-07-05): Bricolage for headings, Roboto for everything else. --tee-font-mono keeps its name to avoid touching 28 call sites, but the monospace look is retired → Roboto. */ --tee-font-body: 'Roboto', system-ui, -apple-system, sans-serif; --tee-font-display: 'Bricolage Grotesque', system-ui, sans-serif; --tee-font-mono: 'Roboto', system-ui, -apple-system, sans-serif; /* shape */ --tee-r-s: 8px; --tee-r-m: 12px; --tee-r-l: 16px; --tee-r-xl: 24px; --tee-r-pill: 999px; /* layout — sticky header height (logo 64px + 2x16px topbar padding + 1px border). Consumed by the sticky header, the category nav (sticks below it) and #orderBox. */ --tee-header-h: 97px; /* elevation + glow */ --tee-shadow: 0 12px 40px rgba(0,0,0,.5); --tee-shadow-soft: 0 2px 10px rgba(0,0,0,.35); /* motion */ --tee-ease: cubic-bezier(0.23, 1, 0.32, 1); --tee-t: 220ms; } /* --- Akzent-Themes: umschalten via data-theme am --- */ :root, [data-theme="gold"] { --tee-accent: #D4AF37; --tee-accent-hover: #F2CA50; --tee-accent-2: #FFE17D; /* Gradient-Ende der CTAs */ --tee-accent-soft: rgba(212,175,55,.15); --tee-accent-glow: rgba(212,175,55,.30); --tee-on-accent: #0D0D0D; /* map the existing Ember accent used by desktop.css onto the theme so untouched legacy components (coupon button, + buttons) go gold too */ --pd-accent: #D4AF37; --pd-accent-soft: rgba(212,175,55,.15); --pd-on-accent: #0D0D0D; } [data-theme="crimson"] { --tee-accent: #B01E28; --tee-accent-hover: #D4323C; --tee-accent-2: #E0555E; --tee-accent-soft: rgba(176,30,40,.15); --tee-accent-glow: rgba(176,30,40,.35); --tee-on-accent: #FFF7F2; --pd-accent: #B01E28; --pd-accent-soft: rgba(176,30,40,.15); --pd-on-accent: #FFF7F2; }