/* ========================================================================== SmartPharmacy Design System — Design Tokens Palette / typography variables, split out of the former monolithic design-system.css. See wwwroot/css/design-system.css.bak for pre-split history if a diff is ever needed. ========================================================================== */ /* Self-hosted (wwwroot/fonts/) — no runtime dependency on fonts.googleapis.com. Both are variable fonts (Google serves one file covering the whole weight axis; a "400", "500", ... request all resolve to the same bytes — verified by checksum), so one @font-face with a weight *range* per family is correct, not a shortcut. Latin + Arabic subsets only (this app's actual scripts: English UI, Arabic/Kurdish RTL) — cyrillic/vietnamese/greek/math/ symbol subsets from the original Google Fonts CSS were dropped as unused. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../../fonts/plus-jakarta-sans-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../../fonts/noto-sans-arabic-var-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } :root { /* Semantic colors — primary is Nexus indigo/violet (#6D5CE0), light-violet tints for active/hover states, pastel success/danger trend-badge pairs (bg + fg, not just fg). Teal stays as the secondary chart/accent color (see Sales Overview / Total Subscriber gradients in the reference). */ --ds-primary: #6D5CE0; --ds-primary-hover: #5C4CD1; --ds-primary-active: #4E3FBD; --ds-secondary: #4FC3C0; --ds-blue: #5B93FF; --ds-teal: #2DD4BF; --ds-success: #16A34A; --ds-success-bg: color-mix(in srgb, var(--ds-success) 15%, var(--ds-surface-1)); --ds-warning: #D97706; --ds-warning-bg: color-mix(in srgb, var(--ds-warning) 15%, var(--ds-surface-1)); --ds-danger: #DC2626; --ds-danger-bg: color-mix(in srgb, var(--ds-danger) 15%, var(--ds-surface-1)); --ds-info: #5B93FF; /* Surfaces — SaaS surface ramp (Phase 2). Surface 0 = the deepest/base plane; higher levels are progressively more-recessed inset wells in the LIGHT theme (white cards sit at S1, greys below them) and progressively more-ELEVATED planes in the DARK theme. Components must reference the semantic tokens (--ds-bg / --ds-surface / --ds-surface-raised / ...), never a raw --ds-surface-N level — the mapping differs per theme. */ --ds-surface-0: #F5F7FB; --ds-surface-1: #FFFFFF; --ds-surface-2: #FAFBFC; --ds-surface-3: #F3F5F9; --ds-surface-4: #EEF2F7; --ds-bg: var(--ds-surface-0); --ds-surface: var(--ds-surface-1); --ds-surface-raised: var(--ds-surface-1); --ds-border: #ECEDF3; --ds-text: #14142B; /* #8a8aa3 measured 3.37:1 on white — fails WCAG AA (4.5:1) for normal text. #6b7280 measures ~4.83:1. */ --ds-text-muted: #6b7280; --ds-hover: rgba(109, 92, 224, 0.07); --ds-active: rgba(109, 92, 224, 0.14); /* Tooltip follows the user's chosen accent color (--ds-primary) rather than a flat fixed chip — darkened toward black so white tooltip text stays legible even on light accents (e.g. teal/emerald), and so it doesn't just become --ds-primary itself washed out. Previously used var(--ds-text)/var(--ds-surface), which inverted under dark mode (near-white --ds-text became the tooltip's own background) and made tooltips flash as a jarring white box on an otherwise dark page — the color-mix here stays dark in both themes while still tracking accent. */ --ds-tooltip-bg: color-mix(in srgb, var(--ds-primary) 55%, #14142B); --ds-tooltip-text: #F8FAFC; /* Shell — white sidebar + white navbar, per the Nexus reference. Active nav item is a light-violet pill with dark (not white) text — matches the reference exactly, unlike a dark/indigo active pill. */ --ds-sidebar-bg: var(--ds-surface-1); --ds-sidebar-border: #EAECEF; --ds-sidebar-text: #111827; --ds-sidebar-text-active: #111827; /* #98A2B3 measured ~2.5:1 on the white sidebar — fails WCAG AA even for large text. #6b7280 (already verified ~4.83:1 elsewhere) reused here. */ --ds-sidebar-label: #6b7280; /* Derived from --ds-primary (not a flat gray/hardcoded violet) so the active/hover pill actually follows the user's chosen accent color (teal/purple/blue/emerald/orange/rose/custom) instead of always looking violet-tinted regardless of the Theme Settings selection. */ --ds-sidebar-hover-bg: color-mix(in srgb, var(--ds-primary) 6%, var(--ds-bg)); --ds-sidebar-active-bg: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-bg)); /* Sidebar Settings (Theme Settings panel → "Sidebar" section, wired in theme-settings.js). Layout/glass tokens, not colors, so they live here next to the rest of the sidebar's tokens rather than duplicated per preset in shell.css. --ds-sidebar-width/-width-collapsed/-item-radius match the sidebar's previous hardcoded 260px/72px/radius-sm exactly — picking no preset changes nothing. --ds-sidebar-glass-blur/-opacity are the CSS-only fallback for the Glass Intensity slider: JS always recomputes and inline-overrides both from the 'ds-sidebar-glass' preference on load (see applyGlassIntensity), so in normal operation these two only matter if JS fails to run at all. */ --ds-sidebar-width: 280px; --ds-sidebar-width-collapsed: 72px; --ds-sidebar-width-mobile: 280px; --ds-sidebar-item-radius: var(--radius-sm); --ds-sidebar-glass-blur: 20px; --ds-sidebar-glass-opacity: 92%; /* Icon tiers: top-level nav-group icons read heavier than a submenu leaf's icon, matching the reference dashboards' two-tier icon scale. */ --ds-sidebar-icon-size: 16px; --ds-sidebar-icon-size-sub: 13px; --ds-navbar-bg: var(--ds-surface-1); --ds-navbar-text: #14142B; --ds-navbar-icon: #6b7280; --ds-search-bg: var(--ds-surface-3); /* Legacy bridge variables — aside.css/navbar.css apply these with !important and used to get them from Zephyr.css (now disabled), so they must be supplied here or the shell renders with no color at all. */ --bs-body-bg-sideBar: var(--ds-sidebar-bg); --bs-body-bg-sideBar-hover: var(--ds-sidebar-hover-bg); --bs-aside-text: var(--ds-sidebar-text); --bs-icon-color: var(--ds-navbar-icon); --bs-button-color-active: var(--ds-primary); --bs-button-color-active1: var(--ds-secondary); --bs-border-color: var(--ds-border); /* Stock Bootstrap 5 components (ones this codebase never touched with a component-level override) read --bs-border-radius/-sm/-lg directly. Only -lg was ever mapped, so anything still relying on Bootstrap's own defaults ignored the Corner Radius theme setting entirely. */ --bs-border-radius-sm: var(--radius-sm); --bs-border-radius: var(--radius-md); --bs-border-radius-lg: var(--radius-lg); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Radius scale */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* Control sizing — three tiers so every form/input/select2/button control at a given size shares one height (.form-control, .form-select, .select2-selection, .input-group-text, .btn, .dropdown-toggle), instead of mixing 38/40/42/44px controls in the same row. --control-height is the default/compact tier — kept at 36px (not 44px) after 44px proved too tall on dense grids like Selling's item table; -sm/-lg are opt-in for genuinely small (dense grid cells) or large (login, wizards) contexts. Radius intentionally reuses --radius-md/lg (not a separate --control-radius) so controls keep following the user's Corner Radius theme setting instead of a second, disconnected radius value. */ --control-height-sm: 32px; --control-height: 36px; --control-height-lg: 44px; /* Shared horizontal/vertical padding for every text-like control (.form-control, .form-select, .select2-selection, .input-group-text). Previously inlined per-component (forms.css hardcoded `0 var(--space-3)` directly), so a control could drift out of sync with its siblings. */ --control-padding-x: var(--space-3); --control-padding-y: 6px; /* Row height for grid/table headers (Mvc.Grid, DataTables). Density (compact) tightens this the same way it tightens --control-height. */ --table-row-height: 48px; /* Elevation */ --ds-shadow-xs: 0 1px 1px rgba(28, 26, 46, 0.04); --ds-shadow-sm: 0 1px 2px rgba(28, 26, 46, 0.06); --ds-shadow-md: 0 4px 12px rgba(28, 26, 46, 0.08); --ds-shadow-lg: 0 12px 32px rgba(28, 26, 46, 0.12); /* Single source of truth for the input/control focus ring — was inlined as `0 0 0 3px var(--ds-active)` in forms.css, spotlight.css and select2-theme.css. Point those at this token so the ring geometry stays consistent everywhere and follows the active accent. */ --ds-ring-width: 3px; --ds-ring: 0 0 0 var(--ds-ring-width) var(--ds-active); /* Typography scale — additive tokens only for now; not yet applied to existing headings/cards (that's a component-level pass, done once the shared shell/table/card partials are being touched deliberately). */ --ds-text-page-title: 1.75rem; /* 28px */ --ds-text-section-title: 1.25rem; /* 20px */ --ds-text-card-title: 1rem; /* 16px */ --ds-text-body: .875rem; /* 14px */ --ds-text-caption: .75rem; /* 12px */ /* Micro-interaction durations — additive tokens; wiring these into transition declarations is a per-component change, done alongside each component pass rather than as a blanket find/replace. */ --ds-duration-hover: 150ms; --ds-duration-dropdown: 200ms; --ds-duration-modal: 250ms; --ds-duration-sidebar: 250ms; /* Generalized glass-morphism tokens — same recipe as the sidebar's --ds-sidebar-glass-blur/-opacity (shell.css), but component-agnostic so any surface (toastr, modals, popovers, ...) can opt in via the same `color-mix(in srgb, var(--surface) var(--ds-glass-opacity), transparent) + backdrop-filter: blur(var(--ds-glass-blur))` recipe instead of each inventing its own translucency/blur numbers. */ --ds-glass-blur: 14px; --ds-glass-opacity: 74%; --ds-font: 'Plus Jakarta Sans', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } [data-bs-theme="dark"] { /* Dark surface ramp (Phase 3) — desaturated graphite/slate planes (not the former saturated navy-blue ramp, which read like a stock admin template rather than the Nexus SaaS look of light mode). Each level is still one visible step lighter than the last, so background < chrome < card < raised < overlay reads as a clean elevation stack, but the hue is pulled back toward neutral so the indigo accent — not the surface itself — carries the color. */ --ds-surface-0: #0B0D12; --ds-surface-1: #12141B; --ds-surface-2: #171923; --ds-surface-3: #1E212C; --ds-surface-4: #272B38; --ds-bg: var(--ds-surface-0); --ds-surface: var(--ds-surface-2); --ds-surface-raised: var(--ds-surface-3); --ds-border: #2B3040; --ds-text: #F1F3F8; --ds-text-muted: #97A0B4; /* Brand accent brightened for dark mode — the light theme's #6D5CE0 reads slightly flat against a near-black page, so it's lifted toward a more vivid violet, same hue, so it still pops without shifting the app's identity color. */ --ds-primary: #8C7CF0; --ds-primary-hover: #7A68E8; --ds-primary-active: #6853D6; --ds-secondary: #45D8D2; --ds-blue: #6AA1FF; --ds-success: #22C55E; --ds-warning: #F59E0B; --ds-danger: #EF4444; --ds-info: #6AA1FF; --ds-hover: rgba(140, 124, 240, 0.16); --ds-active: rgba(140, 124, 240, 0.26); --ds-success-bg: rgba(34, 197, 94, 0.18); --ds-danger-bg: rgba(239, 68, 68, 0.18); --ds-warning-bg: rgba(245, 158, 11, 0.18); --ds-tooltip-bg: color-mix(in srgb, var(--ds-primary) 55%, #05060a); --ds-tooltip-text: #F8FAFC; /* Denser glass under dark mode — same rationale as --ds-sidebar-glass-opacity below: an already-dark page needs a lower see-through ratio to still read as an elevated glass surface instead of blending into the content behind it. */ --ds-glass-opacity: 70%; /* Sidebar switches to a dark surface in dark mode, same family as the navbar/content — one theme, not a light island inside a dark app. */ --ds-sidebar-bg: var(--ds-surface-1); --ds-sidebar-border: #2B3040; --ds-sidebar-text: #97A0B4; --ds-sidebar-text-active: #F8FAFC; --ds-sidebar-label: #6B7789; /* Same accent-derived approach as the light theme above — was hardcoded to the purple/violet rgb(109,92,224) regardless of accent choice. */ --ds-sidebar-hover-bg: color-mix(in srgb, var(--ds-primary) 16%, transparent); --ds-sidebar-active-bg: color-mix(in srgb, var(--ds-primary) 26%, transparent); /* Denser glass under dark mode — an already-dark page needs a lower see-through ratio for the sidebar to still read as an elevated glass surface instead of blending into the content behind it. */ --ds-sidebar-glass-opacity: 80%; --ds-navbar-bg: var(--ds-surface-1); --ds-navbar-text: #F8FAFC; --ds-navbar-icon: #C7CBDA; --ds-search-bg: var(--ds-surface-0); --bs-body-bg-sideBar: var(--ds-sidebar-bg); --bs-body-bg-sideBar-hover: var(--ds-sidebar-hover-bg); --bs-aside-text: var(--ds-sidebar-text); --bs-icon-color: var(--ds-navbar-icon); --bs-border-color: var(--ds-border); --ds-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.25); --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --ds-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --ds-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55); }