/* * EchoCAD Design Tokens — "EchoCAD Night" * ---------------------------------------- * Single source of truth for colors, spacing, typography, and shadows * across every PHP page that uses the unified shell. Reference these * tokens via var(--ec-...). Never hardcode color or spacing values * inside component CSS or page CSS. * * The system is DARK-ONLY. There is no light mode. The redesign that * authored this token set is built around true black surfaces, true * primary accents (no teal), and Inter/JetBrains Mono typography. * * Two parallel naming schemes coexist: * - Semantic (--ec-color-*) — preferred for new code. * - Design-name aliases (--ec-bg-N, --ec-fg-N, --ec-blue, ...) — * match the names in the original "EchoCAD Night" design source * and the components.css implementation. Either spelling is fine * in component CSS; pages should prefer the semantic names. * * Bootstrap 5's --bs-* variables are NOT mirrored here. Bootstrap is * re-skinned in components.css by rebinding --bs-* under body.ec-shell * to point at these tokens — that's how existing admin pages inherit * the EchoCAD Night look without any markup changes. */ :root { /* ============================================================ * Surfaces — true dark, layered for depth without true white text * ============================================================ */ --ec-color-bg: #000000; /* page background */ --ec-color-bg-elevated: #111114; /* cards, panels, dropdowns */ --ec-color-bg-sunken: #18181c; /* table headers, hover */ --ec-color-bg-overlay: rgba(0, 0, 0, 0.6); --ec-color-bg-sidebar: #0a0a0b; --ec-color-bg-topbar: #0a0a0b; /* ============================================================ * Text — high-contrast on near-black, descending emphasis * ============================================================ */ --ec-color-text: #fafafa; /* primary */ --ec-color-text-muted: #a1a1aa; /* secondary body */ --ec-color-text-inverse: #0a0a0b; /* on white/colored fills */ --ec-color-text-link: var(--ec-color-brand); /* Sidebar text — sidebar is dark even by sidebar standards. */ --ec-color-sidebar-text: #fafafa; --ec-color-sidebar-text-muted: #71717a; /* ============================================================ * Borders / dividers — quiet, just enough to separate surfaces * ============================================================ */ --ec-color-border: #1d1d22; --ec-color-border-strong: #2a2a31; --ec-color-border-subtle: #1d1d22; /* ============================================================ * Brand + status — true reds/blues/yellows/greens. NO teal. * ============================================================ */ --ec-color-brand: #2563eb; --ec-color-brand-emphasis: #1d4ed8; --ec-color-primary: #2563eb; --ec-color-primary-soft: rgba(37, 99, 235, 0.12); --ec-color-success: #16a34a; --ec-color-success-soft: rgba(22, 163, 74, 0.12); --ec-color-warning: #eab308; --ec-color-warning-soft: rgba(234, 179, 8, 0.12); --ec-color-danger: #dc2626; --ec-color-danger-soft: rgba(220, 38, 38, 0.12); --ec-color-info: #2563eb; /* design uses blue, not teal */ --ec-color-info-soft: rgba(37, 99, 235, 0.12); /* ============================================================ * Dispatch unit / incident status (semantic, kept stable across * redesigns so dispatch UI doesn't shift accidentally) * ============================================================ */ --ec-color-status-available: #16a34a; --ec-color-status-assigned: #eab308; --ec-color-status-enroute: #eab308; --ec-color-status-on-scene: #2563eb; --ec-color-status-cleared: #71717a; --ec-color-status-oos: #71717a; /* ============================================================ * Dispatch priority colors (1 = highest) * Sourced from the existing CAD palette so the new shell * matches what dispatchers already see in views/layout.php. * ============================================================ */ --ec-color-priority-1: #dc2626; --ec-color-priority-2: #ea580c; --ec-color-priority-3: #f59e0b; --ec-color-priority-4: #eab308; --ec-color-priority-5: #84cc16; --ec-color-priority-6: #22c55e; --ec-color-priority-7: #14b8a6; --ec-color-priority-8: #0ea5e9; --ec-color-priority-9: #6366f1; /* ============================================================ * EchoCAD Night design-name aliases * These mirror the original design's variable names so the * component CSS in components.css can read like the source. * ============================================================ */ --ec-bg-0: #000000; --ec-bg-1: #0a0a0b; --ec-bg-2: #111114; --ec-bg-3: #18181c; --ec-bg-4: #1f1f24; --ec-line-1: #1d1d22; --ec-line-2: #2a2a31; --ec-fg-0: #fafafa; --ec-fg-1: #d4d4d8; --ec-fg-2: #a1a1aa; --ec-fg-3: #71717a; --ec-fg-4: #52525b; --ec-blue: #2563eb; --ec-blue-hi: #3b82f6; --ec-blue-lo: #1d4ed8; --ec-green: #16a34a; --ec-green-hi: #22c55e; --ec-red: #dc2626; --ec-red-hi: #ef4444; --ec-yellow: #eab308; --ec-yellow-hi: #facc15; --ec-orange: #ea580c; --ec-orange-hi: #f97316; --ec-violet: #7c3aed; /* Legacy color-name aliases kept so older markup using * "amber" / "cyan" still resolves to the right hue. */ --ec-amber: var(--ec-yellow); --ec-amber-hi: var(--ec-yellow-hi); --ec-cyan: var(--ec-blue); /* ============================================================ * Spacing (4px scale) * ============================================================ */ --ec-space-1: 4px; --ec-space-2: 8px; --ec-space-3: 12px; --ec-space-4: 16px; --ec-space-5: 24px; --ec-space-6: 32px; --ec-space-7: 48px; --ec-space-8: 64px; /* ============================================================ * Typography — Inter UI / JetBrains Mono / Material Symbols * Loaded via Google Fonts in includes/shell/header.php. * ============================================================ */ --ec-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --ec-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ec-font-size-xs: 0.6875rem; /* 11px */ --ec-font-size-sm: 0.75rem; /* 12px */ --ec-font-size-base: 0.875rem; /* 14px — design body size */ --ec-font-size-md: 0.9375rem; /* 15px */ --ec-font-size-lg: 1rem; /* 16px */ --ec-font-size-xl: 1.25rem; /* 20px */ --ec-font-size-2xl: 1.375rem; /* 22px — page titles */ --ec-font-size-3xl: 1.75rem; /* 28px — KPI values */ --ec-line-height-tight: 1.25; --ec-line-height-base: 1.5; --ec-font-weight-regular: 400; --ec-font-weight-medium: 500; --ec-font-weight-semibold: 600; --ec-font-weight-bold: 700; /* ============================================================ * Radii * ============================================================ */ --ec-radius-sm: 6px; --ec-radius-md: 8px; --ec-radius-lg: 12px; --ec-radius-pill: 999px; --ec-radius-circle: 50%; /* ============================================================ * Shadows — tuned for dark surfaces. Keep them honest; on a * black canvas, shadows mostly add a faint inner highlight and * a deep cast. * ============================================================ */ --ec-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 1px 2px rgba(0, 0, 0, 0.6); --ec-shadow-sm: var(--ec-shadow-card); --ec-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); --ec-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4); --ec-shadow-pop: var(--ec-shadow-lg); /* ============================================================ * Layout * ============================================================ */ --ec-sidebar-width: 248px; --ec-sidebar-width-collapsed: 68px; --ec-topbar-height: 56px; --ec-z-topbar: 1020; --ec-z-sidebar: 1030; --ec-z-overlay: 1080; --ec-z-toast: 1090; } /* The shell has no light variant. We still set color-scheme so the * native form controls (date pickers, scrollbars) render dark. */ :root { color-scheme: dark; } body.ec-shell { background-color: var(--ec-color-bg); color: var(--ec-color-text); font-family: var(--ec-font-family-base); font-size: var(--ec-font-size-base); line-height: var(--ec-line-height-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.ec-shell a { color: var(--ec-color-text-link); }