/* ============================================================ vm_tokens.css — Vision Manager DESIGN TOKENS (VMDS) ============================================================ Single source of truth för hela designsystemet. FAS 1 (2026-05-16, VMDS-rebuild): VMDS-SPEC-tokens tillagda. - Nya tokens enligt BYGGPLAN_VMDS_REBUILD.md sektion 4.2 - Modal-typ-bakgrunder (form/schema/confirm/info) - Border-brand + text-soft/strong - Shadow-modal + shadow-brand - Blur-modal/overlay/sidebar (Apple frosted glass) - Ease-out-expo + ease-in-out (Apple-motion) - Duration-fast/normal/slow + leading-tight/normal/loose - Status-ok/warning/danger/info (alias för --vm-state-*) - Text-xs..3xl + space-xs..3xl alias FAS H (2026-05-16): mörk bas + [data-theme="light"]-override. ATELIER-FUNDAMENT (2026-06-10): semantiska --vm-* pekar nu på råpaletten i vm_palette.css (lager 0). Atelier är kanoniskt. ARKITEKTUR (3 lager): LAGER 0 vm_palette.css råa hex (--palette-*) — enda hex-stället LAGER 1 :root mörk bas (--vm-* → var(--palette-*)) [data-theme="light"] ljus override (cream) LAGER 2 komponenter/mallar använder BARA --vm-* + VMDS-SPEC TOKENS (sektion 4.2) + LEGACY ALIASES (4000+ användningar) Per's design-val (HARD, 2026-06-10): * Tema: ljus = default ("Dag"), mörkt = opt-in ("Natt") * Bakgrund: atelier cream #f1efe9 (ljus) / #14161c (mörk) * Accent: atelier-blå #0a6cff (ljus) / #2a95ff (mörk) * Typsnitt: Geist primärt, Inter fallback * Branding: dämpad — INGEN Tidomat-branding i UI ============================================================ */ :root { /* ── BRAND ── */ --vm-brand-primary: var(--palette-blue-400); --vm-brand-primary-hover: var(--palette-blue-300); --vm-brand-primary-active: var(--palette-blue-500); --vm-brand-accent: #9ebde6; --vm-brand-light: #2358a1; --vm-brand-tint: #15294a; --vm-brand-dark: #006ba1; --vm-brand-darker: #005a87; /* ── ACCENT-RAMP (liv via nyanser av accent — ej nya kulörer, 2026-06-10) ── */ --vm-accent-2: var(--palette-blue-300); /* sekundär nyans (mörkt läge) */ --vm-accent-strong: var(--palette-blue-500); /* gradient-slut / starkare accent */ /* ── STATE ── */ --vm-state-critical: var(--palette-red-500); --vm-state-alert: #ff6b7a; --vm-state-warning: var(--palette-amber-500); --vm-state-ok: var(--palette-green-500); --vm-state-info: var(--vm-brand-primary); /* atelier-blå, följer accent per tema */ --vm-state-fire: #ff8c2a; /* LARMDEL Sida 4 (2026-05-23): BRAND-kategori */ /* ── STATE BACKGROUNDS (tinted) ── */ --vm-bg-critical: rgba(var(--palette-red-500-rgb), 0.15); --vm-bg-critical-strong: rgba(var(--palette-red-500-rgb), 0.25); --vm-bg-alert: rgba(255, 107, 122, 0.15); --vm-bg-warning: rgba(var(--palette-amber-500-rgb), 0.15); --vm-bg-ok: rgba(var(--palette-green-500-rgb), 0.15); --vm-bg-info: rgba(var(--vm-accent-rgb), 0.12); --vm-bg-fire: rgba(255, 140, 42, 0.15); /* ── SURFACES — Neutralt mörkt (Tidomat-blå reserveras för accenter) ── */ --vm-bg-page: var(--palette-night-900); --vm-bg-surface: var(--palette-night-800); --vm-bg-surface-2: var(--palette-night-700); --vm-bg-elevated: var(--palette-night-700); --vm-bg-input: var(--palette-night-800); --vm-bg-hover: rgba(var(--palette-blue-400-rgb), 0.08); --vm-bg-active: rgba(var(--palette-blue-400-rgb), 0.15); /* Sidomeny: atelier-neutral mörk (--palette-night-800). Chrome A behåller admin-sidebar men i atelier-ton (2026-06-10). */ --vm-bg-sidebar: var(--palette-night-800); /* ── SYSTEM-YTOR — mörkaste-mörka block (system-knapp, version-badge, ap-kpi, tabell-thead). Tidigare hårdkodat #0a0e14 i vm_studio.css. ── */ --vm-surface-system: #0a0e14; --vm-surface-system-hover: #0d1219; --vm-surface-system-active: #131820; --vm-text-on-system: #ffffff; --vm-border-on-system: rgba(255, 255, 255, 0.10); --vm-border-on-system-subtle: rgba(255, 255, 255, 0.06); /* ── MAP / FLOORPLAN — kart-vyns scen-färger (tema-bridge 2026-05-30). Mörkt = nuvarande hårdkodade floorplan2d.js this.opts-värden. Läses av floorplan2d.js när den instansieras med { themed:true } (via getComputedStyle). Default-instanser (t.ex. map_editor-previewen) rör INTE dessa — de behåller sina egna hårdkodade defaults. 3D i separat pass. --vm-map-grid är forward-looking (2D ritar ingen grid idag). ── */ --vm-map-bg: #0b1520; /* scen/canvas-bakgrund */ --vm-map-floor: rgba(30, 55, 80, 0.40); /* rum-fyllning */ --vm-map-wall: rgba(88, 136, 170, 0.80); /* vägg/rum-linje (aktiv stroke) */ --vm-map-grid: rgba(140, 180, 220, 0.08); /* subtil grid — för 3D-passet */ --vm-map-label: rgba(140, 180, 220, 0.60); /* rum/nod-etiketter */ /* ── SIDEBAR SYSTEM-PILL (Tidomat-blå gradient som default) ── */ /* Etapp 2 (2026-05-30): platta system-pill → solid (Ubiquiti, ej gradient). */ --vm-sidebar-system-grad: #23507c; --vm-sidebar-system-grad-hover: #285988; --vm-sidebar-system-text: #f7fbff; /* ── STATE BORDERS (pill/badge — alpha 0.30 för synlig kant) ── */ --vm-state-ok-border: rgba(var(--palette-green-500-rgb), 0.30); --vm-state-warning-border: rgba(var(--palette-amber-500-rgb), 0.30); --vm-state-critical-border: rgba(var(--palette-red-500-rgb), 0.30); --vm-state-info-border: rgba(var(--vm-accent-rgb), 0.30); /* ── STATE TEXT (WCAG-säker text på tints; mörkt läge = ljusare, 2026-06-10) ── */ --vm-state-ok-text: var(--palette-green-text-d); --vm-state-warning-text: var(--palette-amber-text-d); --vm-state-critical-text: var(--palette-red-text-d); /* ── BUTTONS: success/secondary/ghost solid + visible border ── */ --vm-btn-success-fg: #ffffff; /* vit text på grön bg */ --vm-btn-success-bg-hover: #25c47d; /* mörkare grön i hover */ --vm-btn-secondary-bg: transparent; --vm-btn-secondary-border: var(--vm-border-default); --vm-btn-ghost-border: var(--vm-border-subtle); /* ── MODAL FOOTER bg (subtilt mörkare än modal-bg) ── */ --vm-modal-footer-bg: rgba(0, 0, 0, 0.10); /* ── SWITCH/TOGGLE KNOB bg (måste kontrastera mot track i båda teman) ── */ --vm-switch-knob-bg: #ffffff; /* ── BORDERS — neutralt mörkt ── */ --vm-border-subtle: var(--palette-hair-on-dark); --vm-border-default: rgba(255,255,255,0.10); --vm-border-strong: var(--palette-hair-on-dark-strong); --vm-border-focus: var(--vm-brand-primary); /* ── TEXT — justerade för kontrast mot neutralt mörk bakgrund ── */ --vm-text-primary: var(--palette-paper-50); --vm-text-secondary: var(--palette-paper-300); --vm-text-muted: var(--palette-paper-500); --vm-text-disabled: #5a6470; --vm-text-inverse: #1a1f2e; --vm-text-link: var(--vm-brand-primary); --vm-text-on-brand: #ffffff; /* ── OVERLAY ── */ --vm-overlay: rgba(0, 0, 0, 0.65); --vm-overlay-strong: rgba(0, 0, 0, 0.80); /* ── SHADOWS (dark) ── */ --vm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --vm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.30); --vm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --vm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50); --vm-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60); --vm-shadow-focus: 0 0 0 3px rgba(var(--vm-accent-rgb), 0.40); /* ── SPACING ── */ --vm-space-0: 0; --vm-space-1: 4px; --vm-space-2: 8px; --vm-space-3: 12px; --vm-space-4: 16px; --vm-space-5: 20px; --vm-space-6: 24px; --vm-space-8: 32px; --vm-space-10: 40px; --vm-space-12: 48px; --vm-space-16: 64px; --vm-space-20: 80px; /* ── RADIUS ── */ --vm-radius-xs: 2px; --vm-radius-sm: 4px; --vm-radius-md: 6px; --vm-radius-lg: 8px; --vm-radius-xl: 12px; --vm-radius-2xl: 16px; --vm-radius-pill: 999px; /* ── TYPOGRAPHY ── */ /* Fas 3b (2026-06-10): Geist primärt (atelier-kanoniskt, lokal @font-face via geist-fonts.css, offline på larmcentraler). Inter behålls som fallback. */ --vm-font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --vm-font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --vm-font-mono: "Geist Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Etapp 0 (2026-05-30): tät typskala — rubriker 15–18px (var 24/20/16). */ --vm-text-h1-size: 18px; --vm-text-h1-lh: 26px; --vm-text-h1-weight: 600; --vm-text-h2-size: 16px; --vm-text-h2-lh: 24px; --vm-text-h2-weight: 600; --vm-text-h3-size: 15px; --vm-text-h3-lh: 22px; --vm-text-h3-weight: 600; --vm-text-body-size: 14px; --vm-text-body-lh: 20px; --vm-text-body-weight: 400; --vm-text-small-size: 13px; --vm-text-small-lh: 18px; --vm-text-small-weight: 400; --vm-text-tiny-size: 12px; --vm-text-tiny-lh: 16px; --vm-text-tiny-weight: 500; --vm-text-tiny-letterspacing: 0.05em; --vm-text-caps-size: 12px; --vm-text-caps-lh: 16px; --vm-text-caps-weight: 600; /* Etapp 0 (2026-05-30): caps-sektioner stannar på 12px-golv men får ökad letter-spacing 0.08→0.10em för tydligare etikett-känsla utan att krympa. */ --vm-text-caps-letterspacing: 0.10em; --vm-text-caps-transform: uppercase; /* ── TRANSITIONS ── */ --vm-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --vm-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --vm-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --vm-transition-theme: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Z-INDEX ── */ --vm-z-base: 1; --vm-z-sidebar: 100; --vm-z-header: 200; --vm-z-dropdown: 1000; --vm-z-overlay: 5000; --vm-z-modal: 5100; --vm-z-toast: 6000; --vm-z-tooltip: 7000; /* ═══════════════════════════════════════════════════════════ VMDS-SPEC TOKENS (FAS 1, 2026-05-16) BYGGPLAN_VMDS_REBUILD.md sektion 4.2 — nya tokens som VMDS-komponenter (vm_components.css) refererar direkt. BAKÅTKOMPATIBILITET: Existerande tokens (--vm-bg-elevated, --vm-state-ok etc) är OFÖRÄNDRADE. Dessa VMDS-tokens läggs till som NYA — bryter inget visuellt. ═══════════════════════════════════════════════════════════ */ /* Brand RGB (explicit för rgba()-användning) — följer accent-knappen */ --vm-brand-primary-rgb: var(--vm-accent-rgb); /* Status-aliases (VMDS-naming för state-tokens) */ --vm-status-ok: var(--vm-state-ok); --vm-status-warning: var(--vm-state-warning); --vm-status-danger: var(--vm-state-critical); --vm-status-info: var(--vm-state-info); --vm-status-fire: var(--vm-state-fire); /* Inactive (auto-inaktiverad person, ej manuell spärr — persons-rebuild FAS 1) */ --vm-status-inactive: #9d6fd6; --vm-status-inactive-rgb: 157, 111, 214; /* Modal-bakgrunder per typ */ --vm-modal-bg-default: var(--vm-bg-elevated); --vm-modal-bg-form: var(--vm-bg-elevated); --vm-modal-bg-schema: #2e3744; --vm-modal-bg-confirm: var(--vm-bg-elevated); --vm-modal-bg-info: var(--vm-bg-elevated); /* Text — soft + strong (komplement till primary/secondary/muted) */ --vm-text-soft: rgba(232, 234, 237, 0.85); --vm-text-strong: #ffffff; /* Border — brand-tinted (för focus-rings, brand-borders) */ --vm-border-brand: rgba(var(--vm-accent-rgb), 0.30); /* Shadow — modal + brand (specifika för dessa kontexter) */ --vm-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.40); --vm-shadow-brand: 0 4px 12px rgba(var(--vm-accent-rgb), 0.30); /* Backdrop — frosted glass (Apple-touch) */ --vm-blur-modal: blur(20px) saturate(140%); --vm-blur-overlay: blur(8px); --vm-blur-sidebar: blur(12px) saturate(120%); /* Typografi — text-xs..3xl (VMDS-naming) Etapp 0 (2026-05-30): tät skala. body=sm 14→13, base 16→15, lg 18→17, xl 20→18. xs=12 BEHÅLLS (12px-golv, ingen 2xs:11). 2xl/3xl orörda. */ --vm-text-xs: 12px; --vm-text-sm: 13px; --vm-text-base: 15px; --vm-text-lg: 17px; --vm-text-xl: 18px; --vm-text-2xl: 24px; --vm-text-3xl: 30px; /* Weight-aliases (VMDS-naming) */ --vm-weight-normal: 400; /* Line-height (VMDS-naming) */ --vm-leading-tight: 1.25; --vm-leading-normal: 1.5; --vm-leading-loose: 1.75; /* Font-aliases (sans = body) */ --vm-font-sans: var(--vm-font-body); /* Motion — easing (Apple ease-out-expo) */ --vm-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --vm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Duration (VMDS-naming, alias till befintliga) */ --vm-duration-fast: var(--vm-transition-fast); --vm-duration-normal: 220ms; --vm-duration-slow: var(--vm-transition-slow); /* Space-aliases (VMDS-naming, alias till numeric space-tokens) */ --vm-space-xs: var(--vm-space-1); --vm-space-sm: var(--vm-space-2); --vm-space-md: var(--vm-space-3); --vm-space-lg: var(--vm-space-4); --vm-space-xl: var(--vm-space-6); --vm-space-2xl: var(--vm-space-8); --vm-space-3xl: var(--vm-space-12); /* ═══════════════════════════════════════════════════════════ LEGACY ALIASES — bakåtkompabilitet med gamla token-namn. 4000+ användningar i CSS + templates. Fasas ut naturligt när templates migreras manuellt över tid. Aliases bygger på var()-referenser, så ändringar i :root fundamenta följer automatiskt med. ═══════════════════════════════════════════════════════════ */ /* Bg-aliases */ --vm-bg: var(--vm-bg-page); --vm-bg-soft: var(--vm-bg-surface); --vm-bg-subtle: var(--vm-bg-surface-2); --vm-bg-card: var(--vm-bg-elevated); --vm-modal-bg: var(--vm-bg-elevated); --vm-card-bg: var(--vm-bg-elevated); --vm-overlay-bg: var(--vm-overlay); /* Panel-aliases (gamla naming) */ --vm-panel: var(--vm-bg-page); --vm-panel-2: var(--vm-bg-surface); --vm-panel-head: var(--vm-bg-surface); --vm-panel-padding: var(--vm-space-6); --vm-panel-radius: var(--vm-radius-lg); /* Surface-aliases (gamla naming) */ --vm-surface: var(--vm-bg-elevated); --vm-surface-2: var(--vm-bg-surface); --vm-surface-hover: var(--vm-bg-hover); --vm-surface-raised: var(--vm-bg-elevated); /* Sidebar/topbar — Etapp 0 (2026-05-30): --vm-sidebar-w är nu canonical källa, satt till live-värdet 228px (var 240). style.css --sidebar-width + .vm-sidebar-primitiven (var 260) refererar denna. Kompakt/Ubiquiti. */ --vm-sidebar-bg: var(--vm-bg-sidebar); --vm-sidebar-w: 228px; --vm-topbar-bg: var(--vm-bg-page); --vm-topbar-h: 56px; /* Border-aliases */ --vm-border: var(--vm-border-subtle); --vm-border-soft: var(--vm-border-subtle); --vm-border-input: var(--vm-border-default); --vm-border-w: 1px; --vm-border-w-strong: 2px; /* Text-aliases */ --vm-text: var(--vm-text-primary); --vm-text-2: var(--vm-text-secondary); --vm-text-soft: var(--vm-text-secondary); --vm-text-faint: var(--vm-text-muted); --vm-text-dim: var(--vm-text-muted); --vm-text-on-accent: var(--vm-text-on-brand); --vm-text-on-subtle: var(--vm-text-primary); /* Brand-aliases (gamla namn för brand) */ --vm-brand: var(--vm-brand-primary); --vm-brand-hover: var(--vm-brand-primary-hover); --vm-brand-weak: var(--vm-brand-tint); --vm-brand-glow: rgba(var(--vm-accent-rgb), 0.30); /* Accent-aliases (gamla namn = brand) */ --vm-accent: var(--vm-brand-primary); --vm-accent-hover: var(--vm-brand-primary-hover); --vm-accent-strong: var(--vm-brand-primary-active); --vm-accent-fg: var(--vm-text-on-brand); --vm-accent-text: var(--vm-text-on-brand); --vm-accent-rgb: var(--palette-blue-400-rgb); /* knapp: theme-aware (ljus override → blue-500) */ --vm-accent-soft: rgba(var(--vm-accent-rgb), 0.10); --vm-accent-glow: rgba(var(--vm-accent-rgb), 0.30); --vm-accent-tint-08: rgba(var(--vm-accent-rgb), 0.08); --vm-accent-tint-10: rgba(var(--vm-accent-rgb), 0.10); --vm-accent-tint-14: rgba(var(--vm-accent-rgb), 0.14); --vm-accent-tint-20: rgba(var(--vm-accent-rgb), 0.20); --vm-accent-tint-22: rgba(var(--vm-accent-rgb), 0.22); --vm-accent-tint-30: rgba(var(--vm-accent-rgb), 0.30); --vm-accent-tint-40: rgba(var(--vm-accent-rgb), 0.40); --vm-accent-tint-45: rgba(var(--vm-accent-rgb), 0.45); --vm-accent-tint-55: rgba(var(--vm-accent-rgb), 0.55); --vm-accent-tint-65: rgba(var(--vm-accent-rgb), 0.65); --vm-accent-tint-70: rgba(var(--vm-accent-rgb), 0.70); /* State-aliases */ --vm-ok: var(--vm-state-ok); --vm-alert: var(--vm-state-alert); --vm-warning: var(--vm-state-warning); --vm-critical: var(--vm-state-critical); --vm-success: var(--vm-state-ok); --vm-danger: var(--vm-state-critical); --vm-info: var(--vm-state-info); /* State soft/weak/strong/glow/fg */ --vm-ok-soft: var(--vm-bg-ok); --vm-alert-soft: var(--vm-bg-alert); --vm-warning-soft: var(--vm-bg-warning); --vm-critical-soft: var(--vm-bg-critical); --vm-success-soft: var(--vm-bg-ok); --vm-success-weak: var(--vm-bg-ok); --vm-success-fg: #ffffff; --vm-success-glow: rgba(var(--palette-green-500-rgb), 0.40); --vm-warning-weak: var(--vm-bg-warning); --vm-warning-fg: #1a1f2e; --vm-warning-glow: rgba(var(--palette-amber-500-rgb), 0.40); --vm-danger-soft: var(--vm-bg-critical); --vm-danger-weak: var(--vm-bg-critical); --vm-danger-fg: #ffffff; --vm-danger-strong: rgba(var(--palette-red-500-rgb), 0.70); --vm-danger-glow: rgba(var(--palette-red-500-rgb), 0.40); --vm-info-soft: var(--vm-bg-info); /* Dot-colors (för .vm-dot, status-LEDs) */ --vm-dot-ok: var(--vm-state-ok); --vm-dot-warn: var(--vm-state-warning); --vm-dot-alarm: var(--vm-state-critical); --vm-dot-info: var(--vm-brand-primary); --vm-dot-offline: var(--vm-text-muted); --vm-dot-color: var(--vm-text-muted); --vm-dot-ring: rgba(var(--vm-accent-rgb), 0.30); /* Shadow-aliases (gamla naming) */ --vm-shadow: var(--vm-shadow-md); --vm-shadow-soft: var(--vm-shadow-sm); --vm-shadow-elev: var(--vm-shadow-lg); --vm-shadow-1: var(--vm-shadow-xs); --vm-shadow-2: var(--vm-shadow-md); --vm-shadow-3: var(--vm-shadow-lg); --vm-shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 40px rgba(var(--vm-accent-rgb), 0.18); --vm-focus-ring: var(--vm-shadow-focus); --vm-focus-ring-error: 0 0 0 3px rgba(var(--palette-red-500-rgb), 0.40); --vm-focus-ring-warning: 0 0 0 3px rgba(var(--palette-amber-500-rgb), 0.40); --vm-focus-ring-success: 0 0 0 3px rgba(var(--palette-green-500-rgb), 0.40); --vm-modal-backdrop: var(--vm-overlay); --vm-opacity-disabled: 0.45; /* Motion-aliases (gamla naming) */ --vm-motion-fast: var(--vm-transition-fast); --vm-motion-base: var(--vm-transition-base); --vm-motion-bounce: 380ms cubic-bezier(0.34, 1.56, 0.64, 1); --vm-trans-fast: var(--vm-transition-fast); --vm-trans-base: var(--vm-transition-base); --vm-trans-slow: var(--vm-transition-slow); --vm-t-fast: var(--vm-transition-fast); --vm-ease: cubic-bezier(.16, 1, .3, 1); --vm-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --vm-ease-linear: cubic-bezier(.4, 0, .2, 1); --vm-dur-fast: 120ms; --vm-dur-base: 180ms; --vm-dur-slow: 300ms; /* Font-aliases */ --vm-font: var(--vm-font-body); --vm-font-stack: var(--vm-font-body); --vm-font-size: var(--vm-text-body-size); --vm-line: var(--vm-text-body-lh); --vm-line-height: var(--vm-text-body-lh); /* Text-size aliases (gamla namn — innehöll både size och lh i en string) */ --vm-text-h1: var(--vm-text-h1-size); --vm-text-h2: var(--vm-text-h2-size); --vm-text-body: var(--vm-text-body-size); --vm-text-small: var(--vm-text-small-size); --vm-text-tiny: var(--vm-text-tiny-size); /* Weights */ --vm-weight-regular: 400; --vm-weight-medium: 500; --vm-weight-semibold: 600; --vm-weight-bold: 700; --vm-weight-black: 800; --vm-weight-heavy: 900; /* Letter-spacing */ --vm-letter-tight: -0.02em; --vm-letter-normal: -0.005em; --vm-letter-wide: 0.04em; --vm-letter-uppercase: 0.14em; /* Radius default */ --vm-radius: var(--vm-radius-lg); /* Control heights */ --vm-control-h: 40px; --vm-control-h-sm: 32px; --vm-control-h-md: 40px; --vm-control-h-lg: 48px; --vm-input-h: 40px; --vm-row-h: 44px; --vm-touch-min: 44px; /* Knapp-höjder (Etapp 0 2026-05-30) — DEFINIERADE men EJ wire:ade ännu. Wire mot .vm-btn sker i Etapp 1 (knappar). Mål: kompakt primär 32 / sekundär+ikon 28, padding-x 8–12. */ --vm-btn-height: 32px; --vm-btn-height-sm: 28px; --vm-btn-height-icon: 28px; --vm-btn-padding-x: 12px; --vm-btn-padding-x-sm: 8px; /* Density (Etapp 0 2026-05-30): kompakt kort-padding 24→20px (--vm-space-5). Token-värdet satt nu; .vm-card-familjen wire:as mot det i sid-svepet (Etapp 5), precis som btn-höjd wire:as i Etapp 1. -tight kvar på 16px. */ --vm-card-padding: var(--vm-space-5); --vm-card-padding-tight: var(--vm-space-4); --vm-card-gap: var(--vm-space-3); --vm-section-gap: var(--vm-space-6); --vm-page-padding: var(--vm-space-6); --vm-shell-gap: var(--vm-space-4); --vm-toolbar-gap: var(--vm-space-3); --vm-sweep-gap: var(--vm-space-4); --vm-sweep-radius: var(--vm-radius-lg); /* Z-index aliases (gamla naming) */ --vm-z-sticky: 50; /* Premium-tokens (used in vm_components.css premium variants) */ --vm-premium-accent-bar: linear-gradient(90deg, var(--vm-brand-primary), var(--vm-brand-accent)); --vm-premium-divider: var(--vm-border-subtle); /* Etapp 2: platta premium-paneler → solid yta (ingen gradient). */ --vm-premium-header-gradient: var(--vm-bg-elevated); --vm-premium-panel-gradient: var(--vm-bg-elevated); --vm-premium-table-row-stripe: var(--vm-bg-surface); /* Score-tokens (för score-cirklar i admin) */ --vm-score: 0; --vm-score-color: var(--vm-brand-primary); --vm-score-size: 64px; --vm-score-thickness: 6px; --vm-score-track: var(--vm-border-subtle); /* Micro-spacing (för pills, badges) */ --vm-pill-padding: 2px 8px; --vm-badge-padding: 3px 8px; --vm-chip-padding: 4px 10px; /* Ikon-storlekar */ --vm-icon-size-xs: 12px; --vm-icon-size-sm: 14px; --vm-icon-size-md: 18px; --vm-icon-size-lg: 22px; --vm-icon-size-xl: 28px; --vm-icon-stroke-w: 1.75; /* Non-prefixed legacy (--bg, --text, --accent etc — äldsta naming) */ --bg: var(--vm-bg-page); --bg-elevated: var(--vm-bg-elevated); --bg-soft: var(--vm-bg-surface); --panel: var(--vm-bg-page); --panel-2: var(--vm-bg-surface); --panel-3: var(--vm-bg-surface); --surface: var(--vm-bg-elevated); --surface-2: var(--vm-bg-surface); --border: var(--vm-border-subtle); --border-soft: var(--vm-border-subtle); --border-strong: var(--vm-border-default); --text: var(--vm-text-primary); --text-soft: var(--vm-text-secondary); --text-muted: var(--vm-text-muted); --accent: var(--vm-brand-primary); --accent-hover: var(--vm-brand-primary-hover); --accent-soft: rgba(var(--palette-blue-400-rgb), 0.10); --success: var(--vm-state-ok); --success-soft: var(--vm-bg-ok); --warning: var(--vm-state-warning); --warning-soft: var(--vm-bg-warning); --danger: var(--vm-state-critical); --danger-soft: var(--vm-bg-critical); --shadow: var(--vm-shadow-md); --shadow-soft: var(--vm-shadow-sm); --card-padding: var(--vm-space-6); --control-height: 40px; --font-base: var(--vm-font-body); --font-stack: var(--vm-font-body); --sidebar-width: var(--vm-sidebar-w); --tap-min: 44px; --topbar-height: 56px; } /* ════════════════════════════════════════════════════════════════ [data-theme="light"] — Ljustema (SYSTEM-DEFAULT fr.o.m. 2026-05-31 ljus-default-flip; tema-grund 2026-05-29) -------------------------------------------------------------- Override endast yttokens + text + borders + shadows + system-ytor. Brand- och state-färger är OFÖRÄNDRADE (Per:s HARD-RULE). Palette seedad från labb_light.css (Tailwind-mjuk neutral grå-blå). Default = light: base.html sätter data-theme="light" när cookie saknas (:root = dark-bas; detta block overrider till ljust). Mörkt = opt-in via cookie vm_color_theme=dark. Login följer cookien (login-redesign 2026-06-01). Standalone kiosk/q saknar data-theme → ärver :root (dark). ════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── SURFACES (ljust) ── */ --vm-bg-page: var(--palette-cream-50); --vm-bg-surface: var(--palette-cream-100); --vm-bg-surface-2: var(--palette-cream-150); --vm-bg-elevated: var(--palette-cream-100); --vm-bg-input: var(--palette-cream-100); --vm-bg-hover: rgba(15, 23, 42, 0.04); --vm-bg-active: rgba(15, 23, 42, 0.06); --vm-bg-sidebar: var(--palette-cream-100); /* ── SYSTEM-YTOR (ljust) — fortsatt mörkare än surface för djup ── */ --vm-surface-system: #1a1f2e; --vm-surface-system-hover: #232a3b; --vm-surface-system-active: #2d3548; --vm-text-on-system: #ffffff; --vm-border-on-system: rgba(15, 23, 42, 0.12); --vm-border-on-system-subtle: rgba(15, 23, 42, 0.08); /* ── MAP / FLOORPLAN (ljust) — mjuka ljustoner, EJ ren vit (bevarar djup/läsbarhet i kartvyn). Per:s beslut 2026-05-30 (§6-tabell). ── */ --vm-map-bg: #e8eef5; --vm-map-floor: #dde6f0; --vm-map-wall: #7a93ad; --vm-map-grid: rgba(40, 70, 110, 0.10); /* subtil mörk-på-ljus */ --vm-map-label: var(--vm-text-muted); /* ── BORDERS (ljust) ── */ --vm-border-subtle: var(--palette-hair-on-light); --vm-border-default: rgba(15, 23, 42, 0.10); --vm-border-strong: var(--palette-hair-on-light-strong); /* ── TEXT (ljust) ── 2026-05-29 r7: --vm-text-muted darkened från #6b7280 (4.83:1) till #4b5563 (Tailwind gray-600, 7.27:1) — hjälptexter + info-banner-paragraph (global_settings + schedules/doors) renderade för bleka för WCAG AA-läs. */ --vm-text-primary: var(--palette-ink-900); --vm-text-secondary: var(--palette-ink-600); --vm-text-muted: var(--palette-ink-500); --vm-text-disabled: #9ca3af; --vm-text-inverse: #e8eaed; --vm-text-strong: #0a0e1a; --vm-text-soft: rgba(26, 31, 46, 0.85); /* ── BRAND (ljust — corporate-blå #0c4da2 enl. CLAUDE.md designsystem-spec) ── 2026-05-29 r7: ljust läge fick tidigare dark-tonad #4a8bd6 (gjord för kontrast mot mörk surface). Mot ljus surface ger den för bleka knappar + länkar utan Tidomat-identitet. Återställ corporate-blå för ljust. */ --vm-brand-primary: var(--palette-blue-500); --vm-brand-primary-hover: var(--palette-blue-600); --vm-brand-primary-active: var(--palette-blue-700); --vm-brand-primary-rgb: var(--palette-blue-500-rgb); --vm-accent-rgb: var(--palette-blue-500-rgb); /* ljus: accent-knapp → blue-500 (tinter/glows följer) */ /* ── ACCENT-RAMP (ljus) ── */ --vm-accent-2: var(--palette-blue-450); --vm-accent-strong: var(--palette-blue-600); /* ── STATE TEXT (ljust — mörkare för WCAG mot ljusa tints) ── */ --vm-state-ok-text: var(--palette-green-text-l); --vm-state-warning-text: var(--palette-amber-text-l); --vm-state-critical-text: var(--palette-red-text-l); /* ── OVERLAY (ljust) ── */ --vm-overlay: rgba(15, 23, 42, 0.45); --vm-overlay-strong: rgba(15, 23, 42, 0.65); /* ── SHADOWS (ljust — mjuk Ubiquiti/Geist) ── */ --vm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --vm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.04); --vm-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06); --vm-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06); --vm-shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.14); --vm-shadow-focus: 0 0 0 3px rgba(var(--vm-accent-rgb), 0.30); /* ── MODAL-BG (ljust) ── */ --vm-modal-bg-schema: #f6f8fa; /* ── SIDEBAR SYSTEM-PILL (ljust — solid Tidomat-blå för djup) ── */ /* Etapp 2: platt system-pill (ljust) → solid. */ --vm-sidebar-system-grad: #2358a1; --vm-sidebar-system-grad-hover: #2a66b8; --vm-sidebar-system-text: #ffffff; /* ── BUTTONS (ljust — ghost/secondary får mörk-alpha border) ── */ --vm-btn-secondary-border: var(--vm-border-default); --vm-btn-ghost-border: var(--vm-border-default); /* ── MODAL FOOTER bg (ljust — subtilt ljusare än modal-bg) ── */ --vm-modal-footer-bg: rgba(15, 23, 42, 0.04); /* ── SWITCH/TOGGLE KNOB bg (ljust — mörkgrå knob på ljus track) ── */ --vm-switch-knob-bg: #6b7280; } /* ── LEGACY ALIAS-OVERRIDES (ljust, spec-bumpad) ── 2026-05-29 r7: body.theme-vision-dark (alltid på body) sätter --text-soft + --text-muted till mörk-tema-värden (#b5c6d9 / #89a0b7) hårdkodat i style.css:1748-1750 med specificitet (0,1,1). :root[data-theme="light"] (0,1,1) + later-in-source-than-body-deklaration krävs för att vinna. admin_contrast_fix.css använder var(--text-soft) !important för helptexts/info-banners → bumpa här så ljus-läge får synlig text. */ html[data-theme="light"] body.theme-vision-dark, html[data-theme="light"] body { --text: var(--vm-text-primary); --text-soft: #1f2937; /* Tailwind gray-800 — synlig kontrast mot ljus surface */ --text-muted: #4b5563; /* Tailwind gray-600 — WCAG AA 7.27:1 mot vit */ /* 2026-05-29 r8 — ROTFIX: body.theme-vision-dark (alltid på body, style.css:1738) hårdkodar dessa legacy-aliases till mörka värden och endast text flippades tidigare → alla var(--panel)/var(--bg*)-paneler förblev mörka i ljust (r7-fyndet på /integration m.fl.). Selektorn (0,1,2) vinner över body.theme-vision-dark (0,1,1). Mörkt oförändrat. */ --bg: var(--vm-bg-page); --bg-elevated: var(--vm-bg-elevated); --bg-soft: var(--vm-bg-surface-2); --panel: var(--vm-bg-elevated); --panel-2: var(--vm-bg-surface-2); --panel-3: var(--vm-bg-surface-2); --border: var(--vm-border-default); --border-soft: var(--vm-border-subtle); --border-strong: var(--vm-border-strong); --shadow: var(--vm-shadow-md); --shadow-soft: var(--vm-shadow-sm); } /* ════════════════════════════════════════════════════════════════ BASE — sätt bakgrund + text på html/body globalt ════════════════════════════════════════════════════════════════ */ html, body { background-color: var(--vm-bg-page); color: var(--vm-text-primary); } /* ════════════════════════════════════════════════════════════════ A11Y — Universal reduced-motion (WCAG 2.3.3) ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }