/* * MevaMed Design Tokens — Single Source of Truth * * Loaded FIRST, before all other CSS. * All module CSS files reference --meva-* tokens. * Legacy aliases (--hbys-*, --ui-*, --app-*, --landing-*, --color-*, --sidebar-*, etc.) * are provided below so existing selectors continue to work without modification. */ /* ════════════════════════════════════════════════════════════ 1. CANONICAL TOKENS (--meva-*) ════════════════════════════════════════════════════════════ */ :root { /* ── Brand Colors ── */ --meva-primary: #1e3a5f; --meva-primary-dark: #152a45; --meva-primary-light: #2c5282; /* ── Accent / Teal ── */ --meva-accent: #0d9488; --meva-accent-light: #14b8a6; /* ── Semantic Colors ── */ --meva-action: #2563eb; --meva-action-hover: #1d4ed8; --meva-success: #059669; --meva-success-hover: #047857; --meva-warning: #d97706; --meva-warning-hover: #b45309; --meva-error: #dc2626; --meva-error-hover: #b91c1c; /* ── Neutrals ── */ --meva-secondary: #64748b; --meva-secondary-hover: #475569; --meva-text: #1e293b; --meva-text-muted: #64748b; /* ── Surfaces ── */ --meva-bg: #f1f5f9; --meva-bg-alt: #edf0f5; --meva-card-bg: #ffffff; --meva-border: #e2e8f0; --meva-border-light: #f1f5f9; /* ── Sidebar / Chrome ── */ --meva-sidebar-bg: #141e2d; --meva-sidebar-surface: #1c2840; --meva-sidebar-hover: rgba(255,255,255,.07); --meva-sidebar-active: rgba(13,148,136,.28); --meva-topbar-bg: #1a2d48; /* ── Layout Dimensions ── */ --meva-sidebar-width: 240px; --meva-sidebar-collapsed:70px; --meva-topbar-height: 48px; --meva-statusbar-height: 26px; /* ── Border Radius ── */ --meva-radius: 6px; --meva-radius-sm: 4px; --meva-radius-md: 8px; /* ── Shadows ── */ --meva-shadow-sm: 0 1px 2px rgba(0,0,0,.06); --meva-shadow: 0 1px 3px rgba(0,0,0,.06); --meva-shadow-md: 0 4px 12px rgba(0,0,0,.08); --meva-shadow-lg: 0 4px 16px rgba(0,0,0,.18); /* ── Transitions ── */ --meva-transition: 0.2s ease; --meva-transition-fast: 0.15s ease; /* ── Typography ── */ --meva-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --meva-font-size-xs: 0.7rem; --meva-font-size-sm: 0.8rem; --meva-font-size-base: 0.875rem; --meva-font-size-md: 1rem; --meva-font-size-lg: 1.25rem; --meva-font-size-xl: 1.5rem; /* ── Z-Index Scale ── */ --meva-z-dropdown: 1000; --meva-z-sticky: 1020; --meva-z-statusbar: 1025; --meva-z-sidebar: 1030; --meva-z-modal-backdrop: 1040; --meva-z-modal: 1050; --meva-z-toast: 1080; /* ── Focus ── */ --meva-focus-ring: #258cfb; } /* ════════════════════════════════════════════════════════════ 1-b. DARK THEME OVERRIDES Applied when . Semantic colors are preserved but slightly brighter for readability on dark surfaces. Sidebar/topbar chrome barely changes since it is already dark. ════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Semantic (brighter for contrast) ── */ --meva-action: #3b82f6; --meva-action-hover: #60a5fa; --meva-success: #10b981; --meva-success-hover: #34d399; --meva-warning: #f59e0b; --meva-warning-hover: #fbbf24; --meva-error: #ef4444; --meva-error-hover: #f87171; /* ── Neutrals / Typography ── */ --meva-text: #e2e8f0; --meva-text-muted: #94a3b8; --meva-secondary: #94a3b8; --meva-secondary-hover: #cbd5e1; /* ── Surfaces ── */ --meva-bg: #0f172a; --meva-bg-alt: #0f172a; --meva-card-bg: #1e293b; --meva-border: #334155; --meva-border-light: #1e293b; /* ── Sidebar / Chrome (deeper to separate from content) ── */ --meva-sidebar-bg: #0b1120; --meva-sidebar-surface: #111827; --meva-sidebar-hover: rgba(255,255,255,.06); --meva-sidebar-active: rgba(13,148,136,.30); --meva-topbar-bg: #0d1525; /* ── Shadows (stronger opacity for dark) ── */ --meva-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --meva-shadow: 0 1px 3px rgba(0,0,0,.35); --meva-shadow-md: 0 4px 12px rgba(0,0,0,.40); --meva-shadow-lg: 0 4px 16px rgba(0,0,0,.50); /* ── Focus ── */ --meva-focus-ring: #60a5fa; /* ── Bootstrap 5 Variable Overrides ── */ --bs-body-color: #e2e8f0; --bs-body-bg: #0f172a; --bs-emphasis-color: #f1f5f9; --bs-secondary-color: rgba(226,232,240,.75); --bs-tertiary-color: rgba(226,232,240,.5); --bs-secondary-bg: #1e293b; --bs-tertiary-bg: #162035; --bs-border-color: #334155; --bs-border-color-translucent:rgba(255,255,255,.12); --bs-link-color: #60a5fa; --bs-link-hover-color: #93c5fd; --bs-code-color: #c084fc; /* ── Bootstrap Table Overrides ── */ --bs-table-color: #e2e8f0; --bs-table-bg: transparent; --bs-table-border-color: #334155; --bs-table-striped-color: #e2e8f0; --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-color: #e2e8f0; --bs-table-hover-bg: rgba(59,130,246,.08); --bs-table-active-color: #e2e8f0; --bs-table-active-bg: rgba(59,130,246,.12); } /* Print always uses light tokens regardless of saved theme */ @media print { [data-theme="dark"] { --meva-text: #1e293b; --meva-text-muted: #64748b; --meva-bg: #fff; --meva-bg-alt: #fff; --meva-card-bg: #fff; --meva-border: #d1d5db; --meva-border-light: #e5e7eb; --meva-shadow-sm: none; --meva-shadow: none; --meva-shadow-md: none; --meva-shadow-lg: none; } } /* ════════════════════════════════════════════════════════════ 2. LEGACY ALIASES — hbys-design.css compatibility ════════════════════════════════════════════════════════════ */ :root { --hbys-primary: var(--meva-primary); --hbys-primary-dark: var(--meva-primary-dark); --hbys-panel-bg: var(--meva-bg); --hbys-panel-border: var(--meva-border); --hbys-action: var(--meva-action); --hbys-action-hover: var(--meva-action-hover); --hbys-confirm: var(--meva-success); --hbys-confirm-hover: var(--meva-success-hover); --hbys-warning: var(--meva-warning); --hbys-warning-hover: var(--meva-warning-hover); --hbys-error: var(--meva-error); --hbys-error-hover: var(--meva-error-hover); --hbys-secondary: var(--meva-secondary); --hbys-secondary-hover: var(--meva-secondary-hover); --hbys-card-bg: var(--meva-card-bg); --hbys-text: var(--meva-text); --hbys-text-muted: var(--meva-text-muted); --hbys-sidebar-width: var(--meva-sidebar-width); --hbys-sidebar-collapsed:var(--meva-sidebar-collapsed); --hbys-topbar-height: var(--meva-topbar-height); --hbys-radius: var(--meva-radius); --hbys-radius-sm: var(--meva-radius-sm); --hbys-shadow: var(--meva-shadow-sm); --hbys-transition: var(--meva-transition); } /* ════════════════════════════════════════════════════════════ 3. LEGACY ALIASES — ui-standards.css compatibility ════════════════════════════════════════════════════════════ */ :root { --ui-primary: var(--meva-primary); --ui-primary-dark: var(--meva-primary-dark); --ui-accent: var(--meva-accent); --ui-accent-light: var(--meva-accent-light); --ui-bg: var(--meva-bg); --ui-card-bg: var(--meva-card-bg); --ui-border: var(--meva-border); --ui-border-light: var(--meva-border-light); --ui-text: var(--meva-text); --ui-text-muted: var(--meva-text-muted); --ui-radius: var(--meva-radius-md); --ui-radius-sm: var(--meva-radius); --ui-shadow: var(--meva-shadow); --ui-shadow-md: var(--meva-shadow-md); --ui-transition: var(--meva-transition-fast); } /* ════════════════════════════════════════════════════════════ 4. LEGACY ALIASES — app-shell.css compatibility ════════════════════════════════════════════════════════════ */ :root { --app-primary: var(--meva-primary); --app-primary-dark: var(--meva-primary-dark); --app-accent: var(--meva-accent); --app-accent-light: var(--meva-accent-light); --app-bg: var(--meva-bg); --app-card-bg: var(--meva-card-bg); --app-sidebar-width: var(--meva-sidebar-width); --app-sidebar-collapsed: var(--meva-sidebar-collapsed); --app-topbar-height: var(--meva-topbar-height); --app-statusbar-height: var(--meva-statusbar-height); } /* ════════════════════════════════════════════════════════════ 5. LEGACY ALIASES — dashboard.css compatibility ════════════════════════════════════════════════════════════ */ :root { --sidebar-width: var(--meva-sidebar-width); --sidebar-collapsed: var(--meva-sidebar-collapsed); --topbar-height: var(--meva-topbar-height); --statusbar-height: var(--meva-statusbar-height); --card-radius: var(--meva-radius-md); --card-shadow: var(--meva-shadow); --color-bg: var(--meva-bg-alt); --color-sidebar: var(--meva-sidebar-bg); --color-sidebar-surface: var(--meva-sidebar-surface); --color-sidebar-hover: var(--meva-sidebar-hover); --color-sidebar-active: var(--meva-sidebar-active); --color-accent: var(--meva-accent); --color-accent-bright: var(--meva-accent-light); --color-topbar: var(--meva-topbar-bg); } /* ════════════════════════════════════════════════════════════ 6. LEGACY ALIASES — landing.css compatibility ════════════════════════════════════════════════════════════ */ :root { --landing-primary: var(--meva-primary); --landing-primary-light: var(--meva-primary-light); --landing-bg: #f0f4f8; --landing-card: var(--meva-card-bg); --landing-border: var(--meva-border); --landing-text: var(--meva-text); --landing-muted: var(--meva-text-muted); }