/** * Emergi Design System — Design Tokens * Canonical shared token source for admin, customer, and provider. * Dark mode: .dark on (theme.js uses localStorage "theme"). */ :root { /* ---- 2026 public platform tokens ---- */ --color-bg-dark: #0F1510; --color-bg-mid: #1A2A1D; --color-green-primary: #2D7A4F; --color-green-accent: #4CAF72; --color-green-muted: #1A4A2E; --color-text-primary: #F7F6F2; --color-text-secondary: #A8B5A2; --color-surface: #F7F6F2; --color-surface-card: #FFFFFF; --color-error: #E53935; --color-warning: #FF8F00; --type-display: 800 72px/1.05 var(--es-font-sans); --type-heading: 700 40px/1.2 var(--es-font-sans); --type-subhead: 600 24px/1.35 var(--es-font-sans); --type-body: 400 18px/1.7 var(--es-font-sans); --type-label: 600 11px/1.2 var(--es-font-sans); --type-caption: 400 14px/1.5 var(--es-font-sans); --letter-display: -0.03em; --letter-heading: -0.02em; --letter-subhead: -0.01em; --letter-label: 0.1em; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; --radius-input: 4px; --radius-card: 8px; --radius-modal: 16px; --radius-pill: 999px; --shadow-platform: 0 1px 3px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08); --transition-platform: all 180ms cubic-bezier(0.4, 0, 0.2, 1); /* ---- Emergi brand system ---- */ --emergi-green-950: #071a14; --emergi-green-900: #0b241c; --emergi-green-800: #10382c; --emergi-green-700: #16543f; --emergi-green-600: #1f6f52; --emergi-primary: #1f6f52; --emergi-primary-hover: #16543f; --emergi-primary-soft: #dcefe5; --emergi-accent: #8ee889; --emergi-accent-strong: #5fd36a; --brand-period-color: #00d664; --brand-period-glow: rgba(0, 214, 100, 0.32); --emergi-cream: #f7f1e7; --emergi-cream-2: #fbf7ef; --emergi-card: #fffaf2; --emergi-border: #e5dccf; --emergi-text: #12231d; --emergi-text-muted: #5f6f68; --emergi-text-on-dark: #f8f4ea; --emergi-text-soft-on-dark: #cbd8d0; /* ---- Brand ---- */ --es-brand-50: #ecfdf5; --es-brand-100: #ccfbf1; --es-brand-200: #99f6e4; --es-brand-500: #0d9488; --es-brand-600: #0f766e; --es-brand-700: #115e59; --es-brand-900: #134e4a; /* ---- Neutrals (light) ---- */ --es-neutral-0: #ffffff; --es-neutral-50: #f8fafc; --es-neutral-100: #f1f5f9; --es-neutral-200: #e2e8f0; --es-neutral-300: #cbd5e1; --es-neutral-400: #94a3b8; --es-neutral-500: #64748b; --es-neutral-600: #475569; --es-neutral-700: #334155; --es-neutral-800: #1e293b; --es-neutral-900: #0f172a; /* ---- Semantic ---- */ --es-bg-page: #f7f8f6; --es-bg-surface: var(--es-neutral-0); --es-bg-surface-elevated: #ffffff; --es-bg-muted: var(--es-neutral-100); --es-bg-subtle: #f5f7f5; --es-text-primary: var(--es-neutral-900); --es-text-secondary: var(--es-neutral-600); --es-text-muted: var(--es-neutral-500); --es-border: var(--es-neutral-200); --es-border-strong: var(--es-neutral-300); --es-focus-ring: rgba(13, 148, 136, 0.3); --es-primary-bg: var(--es-brand-600); --es-primary-bg-hover: var(--es-brand-700); --es-primary-text: #ffffff; --es-success: #059669; --es-success-soft: rgba(5, 150, 105, 0.14); --es-warning: #d97706; --es-warning-soft: rgba(217, 119, 6, 0.14); --es-error: #dc2626; --es-error-soft: rgba(220, 38, 38, 0.14); --es-info: #2563eb; --es-info-soft: rgba(37, 99, 235, 0.1); /* ---- Typography ---- */ --es-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif; --es-font-mono: "SFMono-Regular", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace; --es-text-xs: 0.75rem; --es-text-sm: 0.875rem; --es-text-md: 1rem; --es-text-lg: 1.125rem; --es-text-xl: 1.25rem; --es-text-2xl: 1.5rem; --es-leading-tight: 1.2; --es-leading-normal: 1.5; --es-leading-relaxed: 1.65; --es-font-weight-medium: 500; --es-font-weight-semibold: 600; --es-font-weight-bold: 700; --es-font-weight-regular: 400; /* ---- Spacing scale (4px base) ---- */ --es-space-0: 0; --es-space-1: 0.25rem; --es-space-2: 0.5rem; --es-space-3: 0.75rem; --es-space-4: 1rem; --es-space-5: 1.25rem; --es-space-6: 1.5rem; --es-space-8: 2rem; --es-space-10: 2.5rem; --es-space-12: 3rem; /* ---- Radii ---- */ --es-radius-xs: 0.375rem; --es-radius-sm: 0.5rem; --es-radius-md: 0.75rem; --es-radius-lg: 1rem; --es-radius-xl: 1.25rem; --es-radius-full: 9999px; /* ---- Shadows ---- */ --es-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --es-shadow-md: 0 10px 20px rgba(15, 23, 42, 0.08); --es-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12); --es-shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06); /* ---- Borders ---- */ --es-border-width: 1px; --es-border-width-2: 2px; /* ---- Motion ---- */ --es-duration-fast: 120ms; --es-duration-base: 180ms; --es-duration-slow: 260ms; --es-ease-standard: cubic-bezier(0.2, 0, 0, 1); } html, body { font-family: var(--es-font-sans); background: var(--es-bg-page); color: var(--es-text-primary); font-weight: var(--es-font-weight-regular); line-height: var(--es-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { text-rendering: optimizeLegibility; } input::placeholder, textarea::placeholder { color: var(--es-text-muted); } html.dark { --es-bg-page: #0f172a; --es-bg-surface: #0f172a; --es-bg-surface-elevated: #1e293b; --es-bg-muted: rgba(15, 23, 42, 0.52); --es-bg-subtle: #0f172a; --es-text-primary: #f8fafc; --es-text-secondary: #cbd5e1; --es-text-muted: #94a3b8; --es-border: #1e293b; --es-border-strong: #334155; --es-focus-ring: rgba(96, 165, 250, 0.34); --es-primary-bg: #0d9488; --es-primary-bg-hover: #14b8a6; --es-success: #10b981; --es-success-soft: rgba(16, 185, 129, 0.18); --es-warning: #f59e0b; --es-warning-soft: rgba(245, 158, 11, 0.2); --es-error: #ef4444; --es-error-soft: rgba(239, 68, 68, 0.18); --es-info: #60a5fa; --es-info-soft: rgba(96, 165, 250, 0.16); --es-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); --es-shadow-md: 0 10px 20px rgba(0, 0, 0, 0.32); --es-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.42); --es-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.26); } /* Shared customer-theme bridge for public/legal/provider pages. The customer dashboard owns richer component CSS in dashboard-primitives.css; these tokens let non-dashboard pages follow the same saved mode/color model. */ :root { --cd-accent-50: #ecfdf5; --cd-accent-100: #d1fae5; --cd-accent-200: #a7f3d0; --cd-accent-500: #10b981; --cd-accent-600: #0f766e; --cd-accent-700: #065f46; --cd-accent: var(--cd-accent-600); --cd-accent-rgb: 15, 118, 110; --cd-accent-soft: rgba(var(--cd-accent-rgb), 0.14); --cd-accent-border: rgba(var(--cd-accent-rgb), 0.28); --cd-accent-glow: rgba(var(--cd-accent-rgb), 0.22); --cd-accent-gradient: linear-gradient(135deg, var(--cd-accent-500), var(--cd-accent-600)); --cd-accent-text: var(--cd-accent-600); --cd-bg: #f8fafc; --cd-shell-bg: var(--cd-bg); --cd-surface: #ffffff; --cd-surface-2: #f8fafc; --cd-surface-3: #f1f5f9; --cd-border: #e5eaf0; --cd-border-soft: #eef2f5; --cd-text: #0f172a; --cd-text-strong: #0f172a; --cd-text-muted: #475569; --cd-shadow: rgba(15, 23, 42, 0.08); --cd-shadow-soft: rgba(15, 23, 42, 0.05); --cd-bg-gradient: radial-gradient(760px 360px at 8% -8%, rgba(var(--cd-accent-rgb), 0.08), transparent 62%), linear-gradient(180deg, var(--cd-bg), #f1f5f9); } html[data-customer-theme-color="blue"] { --cd-accent-50: #eff6ff; --cd-accent-100: #dbeafe; --cd-accent-200: #bfdbfe; --cd-accent-500: #38bdf8; --cd-accent-600: #2563eb; --cd-accent-700: #1d4ed8; --cd-accent-rgb: 37, 99, 235; --cd-accent-text: #1d4ed8; } html[data-customer-theme-color="pink"] { --cd-accent-50: #fdf2f8; --cd-accent-100: #fce7f3; --cd-accent-200: #fbcfe8; --cd-accent-500: #f472b6; --cd-accent-600: #db2777; --cd-accent-700: #be185d; --cd-accent-rgb: 219, 39, 119; --cd-accent-text: #be185d; } html[data-customer-theme-color="purple"] { --cd-accent-50: #faf5ff; --cd-accent-100: #f3e8ff; --cd-accent-200: #e9d5ff; --cd-accent-500: #a855f7; --cd-accent-600: #7c3aed; --cd-accent-700: #5b21b6; --cd-accent-rgb: 124, 58, 237; --cd-accent-text: #6d28d9; } html[data-customer-theme-color="navy"] { --cd-accent-50: #eff6ff; --cd-accent-100: #dbeafe; --cd-accent-200: #bfdbfe; --cd-accent-500: #60a5fa; --cd-accent-600: #1e3a8a; --cd-accent-700: #0f172a; --cd-accent-rgb: 30, 58, 138; --cd-accent-text: #1e3a8a; } html[data-customer-theme-color="slate"] { --cd-accent-50: #f8fafc; --cd-accent-100: #f1f5f9; --cd-accent-200: #e2e8f0; --cd-accent-500: #64748b; --cd-accent-600: #475569; --cd-accent-700: #1e293b; --cd-accent-rgb: 71, 85, 105; --cd-accent-text: #334155; } html[data-customer-theme-color] { --cd-accent: var(--cd-accent-600); --cd-accent-soft: rgba(var(--cd-accent-rgb), 0.14); --cd-accent-border: rgba(var(--cd-accent-rgb), 0.28); --cd-accent-glow: rgba(var(--cd-accent-rgb), 0.22); --cd-accent-gradient: linear-gradient(135deg, var(--cd-accent-500), var(--cd-accent-600)); --es-primary-bg: var(--cd-accent-600); --es-primary-bg-hover: var(--cd-accent-700); --es-focus-ring: var(--cd-accent-border); } html[data-customer-effective-theme="day"] { color-scheme: light; --es-bg-page: var(--cd-bg); --es-bg-surface: var(--cd-surface); --es-bg-surface-elevated: var(--cd-surface); --es-bg-muted: var(--cd-surface-2); --es-bg-subtle: var(--cd-surface-2); --es-text-primary: var(--cd-text); --es-text-secondary: var(--cd-text-muted); --es-text-muted: #64748b; --es-border: var(--cd-border); --es-border-strong: #cbd5e1; } html[data-customer-effective-theme="sunset"] { color-scheme: light; --cd-bg: #fffaf7; --cd-shell-bg: #fff8f3; --cd-surface: #fffdfb; --cd-surface-2: #fff9f5; --cd-surface-3: #fff2e8; --cd-border: var(--cd-accent-border); --cd-border-soft: rgba(var(--cd-accent-rgb), 0.14); --cd-text: #1f2937; --cd-text-strong: #1f2937; --cd-text-muted: #6b7280; --cd-shadow: rgba(15, 23, 42, 0.05); --cd-shadow-soft: rgba(15, 23, 42, 0.035); --cd-bg-gradient: radial-gradient(900px 420px at 6% -10%, rgba(251, 146, 60, 0.12), transparent 64%), radial-gradient(760px 360px at 98% 2%, rgba(249, 115, 22, 0.055), transparent 62%), linear-gradient(180deg, #fffdfb 0%, #fff8f3 100%); --es-bg-page: var(--cd-bg); --es-bg-surface: var(--cd-surface); --es-bg-surface-elevated: var(--cd-surface); --es-bg-muted: var(--cd-surface-2); --es-bg-subtle: var(--cd-surface-2); --es-text-primary: var(--cd-text); --es-text-secondary: var(--cd-text-muted); --es-text-muted: #8a7663; --es-border: var(--cd-border); --es-border-strong: color-mix(in srgb, var(--cd-accent-600) 46%, transparent); } html[data-customer-effective-theme="night"] { color-scheme: dark; --cd-bg: #0f172a; --cd-shell-bg: #0f172a; --cd-surface: #111827; --cd-surface-2: #172033; --cd-surface-3: #1e293b; --cd-border: #253044; --cd-border-soft: rgba(148, 163, 184, 0.12); --cd-text: #f8fafc; --cd-text-strong: #f8fafc; --cd-text-muted: #cbd5e1; --cd-shadow: rgba(0, 0, 0, 0.34); --cd-shadow-soft: rgba(0, 0, 0, 0.18); --cd-bg-gradient: radial-gradient(720px 340px at 12% -6%, rgba(var(--cd-accent-rgb), 0.12), transparent 64%), linear-gradient(180deg, #0f172a, #020617); --es-bg-page: var(--cd-bg); --es-bg-surface: var(--cd-surface); --es-bg-surface-elevated: var(--cd-surface-2); --es-bg-muted: rgba(30, 41, 59, 0.72); --es-bg-subtle: #10192b; --es-text-primary: var(--cd-text); --es-text-secondary: var(--cd-text-muted); --es-text-muted: #94a3b8; --es-border: var(--cd-border); --es-border-strong: #334155; --es-focus-ring: rgba(var(--cd-accent-rgb), 0.34); } /* Provider dashboard sidebar helpers */ .pd-sidebar .pd-brand-text { color: var(--es-text-primary); } .pd-sidebar .pd-nav { color: var(--es-text-secondary); } .pd-sidebar .pd-nav:hover { background-color: var(--es-bg-muted) !important; color: var(--es-text-primary) !important; } .pd-sidebar .pd-nav.bg-brand-100, .pd-sidebar .pd-nav.dark\:bg-brand-900\/30 { background-color: var(--cd-accent-soft, var(--es-bg-muted)) !important; color: var(--cd-accent-text, var(--es-primary-bg)); } html.dark .pd-sidebar .pd-nav.bg-brand-100, html.dark .pd-sidebar .pd-nav.dark\:bg-brand-900\/30 { background-color: color-mix(in srgb, var(--cd-accent-soft, rgba(37, 99, 235, 0.2)) 72%, var(--cd-surface-2, #172033)) !important; color: #e2e8f0; }