/* ========================================================================== tokens.css - the design system's single source of colour, spacing and type Extracted from theme.css so that landing.css can consume the SAME tokens without also inheriting theme.css's ~1,900 lines of component rules and 161 dark-mode class overrides. Before this split the landing page (and the auth pages, which load landing.css) carried a private 28-colour palette, so a brand colour changed here did not move them. MUST be linked BEFORE theme.css / landing.css on every page. ========================================================================== */ /* ========================================================================== BRAND CONSTANTS — fixed, identical in every theme These are the PharmaEdge brand colours themselves, not roles. --primary flips to a sky blue in dark mode because its job is "the current accent"; the navy below is always the navy. landing.css used to hardcode the same six values separately, so a brand change moved the app but not the marketing site. ========================================================================== */ :root { --brand-navy: #173269; /* The top of the launch-image gradient (BG_DARK in generate_splash_icons.py). Splash only — not a surface colour. */ --brand-navy-deep: #0D1F45; --brand-navy-rgb: 23, 50, 105; --brand-royal: #1F4699; --brand-royal-rgb: 31, 70, 153; --brand-sky: #7ACEFF; --brand-sky-rgb: 122, 206, 255; --brand-green: #27AE60; --brand-green-rgb: 39, 174, 96; --brand-green-dark: #1E8449; --brand-amber: #F39C12; --brand-red: #E74C3C; } :root, [data-theme="light"] { /* Color Scheme */ color-scheme: light; /* =========================== RGB VALUES (for use with rgba()) =========================== */ --primary-rgb: var(--brand-navy-rgb); --danger-rgb: 231, 76, 60; --success-rgb: 39, 174, 96; --warning-rgb: 243, 156, 18; --black-rgb: 0, 0, 0; --white-rgb: 255, 255, 255; /* Overlay/Backdrop */ --overlay-dark: rgba(0, 0, 0, 0.6); --overlay-light: rgba(255, 255, 255, 0.15); --overlay-light-hover: rgba(255, 255, 255, 0.25); --overlay-light-bg: rgba(255, 255, 255, 0.2); /* Third-party brand colours. These are fixed by the brand and must NOT be themed — WhatsApp green is #25D366 in both light and dark. Declared here so the tint/hover pair is written once instead of copied into a page. */ --brand-whatsapp-rgb: 37, 211, 102; --brand-whatsapp-tint: rgba(37, 211, 102, 0.3); --brand-whatsapp-tint-hover: rgba(37, 211, 102, 0.5); /* =========================== PRIMARY COLORS (Professional Navy Blue) =========================== */ --primary: var(--brand-navy); /* Base Brand Color */ --primary-dark: #0F2B64; /* Darker shade for hovers */ --primary-darker: #0C2962; /* Deepest shade */ --primary-light: var(--brand-royal); /* Lighter primary */ --primary-lighter: var(--brand-sky); /* Accent/CTA color */ --primary-bg: #EEF2F7; /* Very light blue background */ --primary-bg-dark: #DDE5F0; /* Slightly darker background */ /* Primary Gradients */ --primary-gradient: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-royal) 100%); --primary-gradient-hover: linear-gradient(180deg, var(--brand-royal) 0%, #0F2B64 100%); --primary-gradient-light: linear-gradient(180deg, #EEF2F7 0%, #DDE5F0 100%); /* =========================== BACKGROUND & SURFACE COLORS (Light Mode) =========================== */ --bg-body: #F4F6F9; --bg-surface: #ffffff; --bg-surface-secondary: #EEF2F7; --bg-surface-hover: #DDE5F0; --bg-card: #ffffff; --bg-card-dark: var(--brand-navy); --bg-input: #ffffff; /* Header gradient */ --bg-header: linear-gradient(180deg, var(--brand-royal) 0%, var(--brand-navy) 100%); --bg-gradient: linear-gradient(180deg, var(--brand-royal) 0%, var(--brand-navy) 100%); --bg-sidebar: #ffffff; --bg-dropdown: #ffffff; /* Modal Backgrounds */ --bg-modal: #ffffff; /* Table Headers */ --bg-table-header: linear-gradient(135deg, var(--brand-navy) 0%, #0F2B64 100%); --bg-table-row-hover: #EEF2F7; --bg-hover: #EEF2F7; /* POS Specific Colors */ --pos-right-bg: linear-gradient(180deg, var(--brand-navy) 0%, #0F2B64 100%); --pos-right-text: #ffffff; /* =========================== TEXT COLORS (Light Mode) =========================== */ --text-primary: var(--brand-navy); --text-secondary: var(--brand-royal); /* Was #96A2BB — 2.57:1 on a white card and 2.37:1 on the page ground, well under WCAG AA (4.5:1), across ~1,254 call sites. This navy-biased slate keeps the "quiet label" role while staying readable: 5.20:1 on card, 4.81:1 on ground. --text-light stays decorative (disabled/placeholder only) and is deliberately NOT held to AA. */ --text-muted: #5F6D89; --text-light: #BEC6D5; --text-disabled: #BEC6D5; --text-inverse: #ffffff; --text-header: #ffffff; --text-link: var(--brand-royal); --text-link-hover: var(--brand-navy); /* =========================== ON-FILL FOREGROUNDS Each semantic fill paired with a foreground that is actually readable on it. Measured: white on --success is 2.87:1 and on --warning only 2.19:1, so pages were improvising their own (usually unreadable) combinations. Use var(--on-success) etc. whenever you set a semantic background. =========================== */ --on-primary: #ffffff; --on-success: #0A1220; --on-danger: #0A1220; --on-warning: #0A1220; --on-info: #ffffff; /* Text for use ON the soft --*-bg tints (badges, alerts). The -dark shades are not dark enough on their own tint: --warning-dark on --warning-bg measures 2.68:1 and even --warning-darker only reaches 3.49:1. */ --on-success-bg: #166534; /* 6.60:1 on --success-bg */ --on-danger-bg: #991B1B; /* 7.16:1 on --danger-bg */ --on-warning-bg: #7A4E06; /* 6.82:1 on --warning-bg */ --on-info-bg: var(--brand-navy); /* navy on --primary-bg */ /* Semantic TEXT on an ordinary surface — error messages, negative amounts, positive deltas. The plain --danger/--success shades are tuned to be fills and are too light to read as text (--danger on white is 3.82:1). These clear AA on card, page ground and secondary surface alike. */ --success-text: #166534; /* worst case 6.34:1 */ --danger-text: #991B1B; /* worst case 7.39:1 */ --warning-text: #7A4E06; /* worst case 6.40:1 */ /* =========================== BREAKPOINTS Canonical set. ~10 ad-hoc widths are in use across templates (768px 165x, plus 400/420/480/600/800/900/992/1200/1400). New work uses these three. Custom properties cannot be used inside @media queries, so these exist as documentation and for JS matchMedia — keep the literals in sync. =========================== */ --bp-sm: 576px; /* phone landscape and below */ --bp-md: 768px; /* tablet: collapse multi-column layouts */ --bp-lg: 1024px; /* laptop: full chrome, sticky affordances on */ /* =========================== BORDER COLORS (Light Mode) =========================== */ --border-light: #DDE5F0; --border-default: #BEC6D5; --border-medium: #BEC6D5; --border-dark: #96A2BB; --border-input: #BEC6D5; --border-input-focus: var(--brand-sky); /* Focus glow - accent color */ /* =========================== SHADOW (Light Mode) =========================== */ --shadow-sm: 0 1px 2px rgba(var(--brand-navy-rgb), 0.05); --shadow: 0 2px 4px rgba(var(--brand-navy-rgb), 0.1); --shadow-md: 0 4px 6px rgba(var(--brand-navy-rgb), 0.1); --shadow-lg: 0 10px 15px rgba(var(--brand-navy-rgb), 0.1); --shadow-xl: 0 20px 25px rgba(var(--brand-navy-rgb), 0.15); --shadow-dropdown: 0 10px 40px rgba(var(--brand-navy-rgb), 0.15); --shadow-card: 0 4px 16px rgba(var(--brand-navy-rgb), 0.1); /* =========================== SECONDARY COLORS (Royal Blue Accents) =========================== */ --secondary: var(--brand-royal); --secondary-dark: var(--brand-navy); --secondary-light: var(--brand-sky); --secondary-bg: #EEF2F7; /* Secondary Gradients */ --secondary-gradient: linear-gradient(135deg, var(--brand-royal) 0%, var(--brand-navy) 100%); --secondary-gradient-hover: linear-gradient(135deg, var(--brand-navy) 0%, #0F2B64 100%); /* =========================== SUCCESS COLORS (Emerald - kept close but harmonized) =========================== */ --success: var(--brand-green); --success-dark: var(--brand-green-dark); --success-darker: #145A32; --success-light: #58D68D; --success-lighter: #ABEBC6; --success-bg: #EAFAF1; --success-bg-dark: #D5F5E3; /* Success Gradients */ --success-gradient: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%); --success-gradient-hover: linear-gradient(135deg, var(--brand-green-dark) 0%, #145A32 100%); --success-gradient-light: linear-gradient(135deg, #EAFAF1 0%, #D5F5E3 100%); /* =========================== WARNING COLORS (Amber) =========================== */ --warning: var(--brand-amber); --warning-dark: #D68910; --warning-darker: #B9770E; --warning-light: #F8C471; --warning-lighter: #FDEBD0; --warning-bg: #FEF9E7; --warning-bg-dark: #FCF3CF; /* Warning Gradients */ --warning-gradient: linear-gradient(135deg, var(--brand-amber) 0%, #D68910 100%); --warning-gradient-hover: linear-gradient(135deg, #D68910 0%, #B9770E 100%); --warning-gradient-light: linear-gradient(135deg, #FEF9E7 0%, #FCF3CF 100%); /* =========================== DANGER COLORS (Alizarin/Rose) =========================== */ --danger: var(--brand-red); --danger-dark: #C0392B; --danger-darker: #922B21; --danger-light: #EC7063; --danger-lighter: #F5B7B1; --danger-bg: #F9EBEA; --danger-bg-dark: #F2D7D5; /* Danger Gradients */ --danger-gradient: linear-gradient(135deg, var(--brand-red) 0%, #C0392B 100%); --danger-gradient-hover: linear-gradient(135deg, #C0392B 0%, #922B21 100%); --danger-gradient-light: linear-gradient(135deg, #F9EBEA 0%, #F2D7D5 100%); /* =========================== INFO COLORS (Sky Blue - Accent) =========================== */ --info: var(--brand-sky); --info-dark: #5BB8E8; --info-darker: var(--brand-royal); --info-light: #A3DFFF; --info-lighter: #D6F0FF; --info-bg: #EEF8FF; --info-bg-dark: #D6F0FF; /* Info Gradients */ --info-gradient: linear-gradient(135deg, var(--brand-sky) 0%, #5BB8E8 100%); --info-gradient-hover: linear-gradient(135deg, #5BB8E8 0%, var(--brand-royal) 100%); --info-gradient-light: linear-gradient(135deg, #EEF8FF 0%, #D6F0FF 100%); /* =========================== NEUTRAL COLORS (Cool Gray Blue) =========================== */ --neutral-50: #F4F6F9; --neutral-100: #EEF2F7; --neutral-200: #DDE5F0; --neutral-300: #BEC6D5; --neutral-400: #96A2BB; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* =========================== BACKGROUND COLORS =========================== */ --bg-page: #f8fafc; --bg-hover: #f1f5f9; /* =========================== STATUS BADGES =========================== */ --status-pending-bg: #FCF3CF; --status-pending-text: #B9770E; --status-confirmed-bg: #D4E6F1; --status-confirmed-text: #1F618D; --status-processing-bg: #E8F6F3; --status-processing-text: #0E6655; --status-ready-bg: #D5F5E3; --status-ready-text: #145A32; --status-delivered-bg: #D5F5E3; --status-delivered-text: #145A32; --status-cancelled-bg: #F2D7D5; --status-cancelled-text: #922B21; --status-active-bg: #D5F5E3; --status-active-text: #145A32; --status-inactive-bg: #F2D7D5; --status-inactive-text: #922B21; /* =========================== TRANSITION =========================== */ --transition-fast: 150ms ease; --transition: 200ms ease; --transition-slow: 300ms ease; /* =========================== BORDER RADIUS =========================== */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* =========================== SPACING SCALE A 4px base. Primitives in app.css lay out with gap/padding from these, so vertical rhythm stays consistent without per-element margins. =========================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Control sizing — buttons, inputs and selects share these so a button and the input beside it line up without per-page nudging. 40px is the default; 44px is the comfortable touch target used on coarse pointers. */ --control-h-sm: 32px; --control-h: 40px; --control-h-lg: 48px; /* Focus ring. One definition so every focusable control agrees. */ --focus-ring: 0 0 0 4px rgba(var(--primary-rgb), 0.14); } [data-theme="dark"] { /* =========================== DARK MODE — REFINED NAVY PALETTE Less-saturated navy surfaces, calibrated text scale, calmer sky-blue accent. Brand navy (#173269 / #1F4699) retained for cross-theme parity. =========================== */ /* Color Scheme */ color-scheme: dark; /* =========================== RGB VALUES (for use with rgba()) =========================== */ --primary-rgb: 91, 179, 255; /* #5BB3FF */ --danger-rgb: 239, 68, 68; /* #EF4444 */ --success-rgb: 34, 197, 94; /* #22C55E */ --warning-rgb: 245, 158, 11; /* #F59E0B */ --black-rgb: 0, 0, 0; --white-rgb: 255, 255, 255; /* Overlay/Backdrop */ --overlay-dark: rgba(0, 0, 0, 0.7); --overlay-light: rgba(255, 255, 255, 0.08); --overlay-light-hover: rgba(255, 255, 255, 0.14); --overlay-light-bg: rgba(255, 255, 255, 0.10); /* =========================== BACKGROUND & SURFACE COLORS (Dark Mode) Elevation: body < card < elevated < hover/active =========================== */ --bg-body: #0A1220; /* page background */ --bg-surface: #121C2E; /* card/panel surface */ --bg-surface-secondary: #1A2438; /* elevated: modal/dropdown/input */ --bg-surface-hover: #243049; /* hover/active state */ --bg-card: #121C2E; --bg-card-dark: #0A1220; --bg-input: #1A2438; /* Brand navy gradient kept for header/sidebar parity with light mode */ --bg-header: linear-gradient(180deg, #173269 0%, #0F2B64 100%); --bg-gradient: linear-gradient(180deg, #173269 0%, #0F2B64 100%); --bg-sidebar: #121C2E; --bg-dropdown: #1A2438; --bg-modal: #1A2438; --bg-table-header: linear-gradient(135deg, #173269 0%, #0F2B64 100%); --bg-table-row-hover: #1A2438; --bg-page: #0A1220; --bg-hover: #243049; /* POS Specific Colors */ --pos-right-bg: linear-gradient(180deg, #0A1220 0%, #121C2E 100%); --pos-right-text: #E8EDF5; /* =========================== TEXT COLORS (Dark Mode) Calibrated for WCAG AA on --bg-surface (#121C2E): primary ~14:1 AAA secondary ~7:1 AAA muted ~4.6:1 AA light ~3:1 AA Large only =========================== */ --text-primary: #E8EDF5; --text-secondary: #A8B3C7; /* Was #7A879E — 4.28:1 on --bg-surface, marginally under AA. Nudged up for headroom: 5.50 / 6.04 / 5.00 on card / ground / surface. */ --text-muted: #8593AC; --text-light: #525E78; --text-inverse: #0A1220; /* On-fill foregrounds — see the light-mode block for rationale. Every dark semantic fill is a bright tint, so all four take the dark ink. */ --on-primary: #0A1220; --on-success: #0A1220; --on-danger: #0A1220; --on-warning: #0A1220; --on-info: #0A1220; /* On-tint text — the dark-mode tints are dark, so these are the bright shades rather than the deep ones used in light mode. */ --on-success-bg: #86EFAC; /* 10.59:1 on --success-bg */ --on-danger-bg: #FCA5A5; /* 8.80:1 on --danger-bg */ --on-warning-bg: #FCD34D; /* 9.89:1 on --warning-bg */ --on-info-bg: #7AC3FF; /* Semantic text on an ordinary surface — see the light block. */ --success-text: #6FD79B; /* worst case 8.77:1 */ --danger-text: #FCA5A5; /* worst case 8.18:1 */ --warning-text: #F0B44E; /* worst case 8.38:1 */ --text-header: #ffffff; --text-link: #5BB3FF; --text-link-hover: #87C8FF; /* =========================== BORDER COLORS (Dark Mode) =========================== */ --border-light: #1E2A40; --border-default: #2A3650; --border-dark: #3A465F; --border-input: #2A3650; --border-input-focus: #5BB3FF; /* =========================== SHADOW (Dark Mode) Slightly deeper for crisper elevation against new surfaces =========================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 2px 4px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 18px rgba(0, 0, 0, 0.55); --shadow-xl: 0 20px 32px rgba(0, 0, 0, 0.6); --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.45); /* =========================== PRIMARY COLORS (Dark Mode) =========================== */ --primary: #5BB3FF; /* sky blue accent — calibrated, less neon */ --primary-dark: #173269; /* brand navy (parity with light) */ --primary-darker: #0F2B64; --primary-light: #87C8FF; --primary-lighter: #B8DBFF; --primary-bg: #173269; --primary-bg-dark: #0F2B64; --primary-gradient: linear-gradient(135deg, #5BB3FF 0%, #1F4699 100%); /* =========================== STATUS BADGES (Dark Mode) Backgrounds are deep, low-chroma; text is bright/legible =========================== */ --status-pending-bg: #3A2705; --status-pending-text: #fcd34d; --status-confirmed-bg: #0A2540; --status-confirmed-text: #93c5fd; --status-processing-bg: #1E1B4B; --status-processing-text: #a5b4fc; --status-ready-bg: #052E1A; --status-ready-text: #6ee7b7; --status-delivered-bg: #0A3A1F; --status-delivered-text: #86efac; --status-cancelled-bg: #3A0F12; --status-cancelled-text: #fca5a5; --status-active-bg: #052E1A; --status-active-text: #6ee7b7; --status-inactive-bg: #3A0F12; --status-inactive-text: #fca5a5; /* Solid semantic backgrounds */ --success-bg: #052E1A; --success-bg-dark: #063E22; --warning-bg: #3A2705; --warning-bg-dark: #4A3008; --danger-bg: #3A0F12; --danger-bg-dark: #4A1518; --info-bg: #0A2540; --info-bg-dark: #0F3070; /* =========================== GRADIENT-LIGHT OVERRIDES (Dark Mode) =========================== */ --success-gradient-light: linear-gradient(135deg, rgba(5, 46, 26, 0.55) 0%, rgba(6, 62, 34, 0.45) 100%); --warning-gradient-light: linear-gradient(135deg, rgba(58, 39, 5, 0.55) 0%, rgba(74, 48, 8, 0.45) 100%); --danger-gradient-light: linear-gradient(135deg, rgba(58, 15, 18, 0.55) 0%, rgba(74, 21, 24, 0.45) 100%); --info-gradient-light: linear-gradient(135deg, rgba(10, 37, 64, 0.55) 0%, rgba(15, 48, 112, 0.45) 100%); /* Semantic foreground colors — modern, less neon */ --success: #22C55E; --success-dark: #16A34A; --success-light: #6ee7b7; --success-lighter: #a7f3d0; --warning: #F59E0B; --warning-dark: #D97706; --warning-darker: #B45309; --warning-light: #fcd34d; --warning-lighter: #fde68a; --danger: #EF4444; --danger-dark: #DC2626; --danger-darker: #B91C1C; --danger-light: #fca5a5; --danger-lighter: #fecaca; --info: #38BDF8; --info-dark: #0EA5E9; --info-darker: #0284C7; --info-light: #87C8FF; --info-lighter: #B8DBFF; /* Neutral overrides for dark mode (parallel to surface tiers above) */ --neutral-50: #0A1220; --neutral-100: #121C2E; --neutral-200: #1A2438; --neutral-300: #243049; --neutral-400: #525E78; --neutral-500: #7A879E; --neutral-600: #A8B3C7; --neutral-700: #C7D1E0; --neutral-800: #E8EDF5; --neutral-900: #ffffff; }