/* ============================================================================ LIFTED DESIGN SYSTEM — POS THEME BRIDGE Vendored DS foundation + a value remap of the legacy POS theme variables onto DS tokens. Phase 1 (look only): we change VALUES, keep variable NAMES, so all existing markup/logic keeps working while the app adopts the Lifted look (Electric Violet #7A5CFF "pos" brand, deep-ink neutrals, DS type/radii). Loaded by sidebar.ftl (shared chrome, present on every back-office page). To revert: remove the in sidebar.ftl and delete this file + /ds. The remap is scoped to :root:root so it wins over the legacy ":root" / ":root, body.dark" blocks in sidebar.css / newsale.css / saleoptions.css / type.css regardless of stylesheet link order, without !important. ============================================================================ */ @import url('/ds/styles.css'); /* Adopt the PoS brand scope (Electric Violet) app-wide without needing data-brand on every . Mirrors tokens/colors.css [data-brand="pos"]. */ :root { --brand: var(--violet); --brand-bright: var(--violet-bright); --brand-grad-to: var(--violet-bright); --brand-deep: var(--violet-600); --brand-darker: var(--violet-800); --brand-tint: rgba(122, 92, 255, 0.14); --brand-tint-strong:rgba(122, 92, 255, 0.26); --brand-contrast: var(--white); --text-on-brand: var(--white); --ring: rgba(122, 92, 255, 0.60); } /* ---- Legacy POS variable remap → DS tokens ------------------------------- Same names, DS values. :root:root gives us (0,2,0) specificity so these resolve over the per-page legacy :root blocks no matter the load order. */ :root:root { /* --- Accents (blue #3b82f6 → violet brand) --- */ --primary: var(--brand); --secondary: var(--cyan); --danger: var(--error); --success: var(--success); --warning: var(--warning); --info: var(--info); --color-accent-blue: var(--brand); --color-accent-green: var(--success); --color-accent-red: var(--error); /* --- Surfaces / backgrounds (slate dark → DS ink ramp) --- */ --background: var(--bg-page); --surface: var(--surface-card); --surface-hover: var(--surface-hover); --color-primary-bg: var(--bg-base); --color-secondary-bg: var(--surface-card); --color-tertiary-bg: var(--surface-raised); --color-card-bg: var(--surface-card); --color-hover-bg: var(--surface-hover); --color-status-header: var(--surface-raised); /* --- Text --- */ --text-primary: var(--text-strong); --text-secondary: var(--text-body); --text-muted: var(--text-muted); --color-text-primary: var(--text-strong); --color-text-secondary: var(--text-body); /* --- Borders --- */ --border: var(--border-default); --color-border: var(--border-default); /* --- Shadows (legacy → DS elevation) --- */ --shadow: var(--shadow-md); --shadow-sm: var(--shadow-sm); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-hover: var(--shadow-lg); --color-shadow: rgba(0, 0, 0, 0.45); /* --- Radii (legacy → DS radius scale) --- */ --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); /* --- Gradients (purple/blue mixes → brand gradient) --- */ --gradient-primary: var(--grad-brand); --gradient-secondary: linear-gradient(135deg, var(--success), var(--green-bright)); --gradient-danger: linear-gradient(135deg, var(--error), var(--orange)); --gradient-warning: linear-gradient(135deg, var(--warning), var(--yellow-bright)); --gradient-surface: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-raised) 100%); /* --- Sidebar chrome --- */ --sidebar-bg-start: var(--ink-900); --sidebar-bg-end: var(--void); --sidebar-surface: var(--surface-card); --sidebar-border: var(--border-subtle); --sidebar-text-primary: var(--text-strong); --sidebar-text-secondary:var(--text-body); --sidebar-active: var(--brand); --sidebar-hover-bg: var(--surface-hover); /* --- Particles (re-tint to brand) --- */ --particles-dot-color: rgba(122, 92, 255, 0.45); --particles-line-color: rgba(122, 92, 255, 0.28); } /* Use the DS sans across the app body without rewriting per-page font stacks. */ :root:root body { font-family: var(--font-sans); }