/* ================================================ Theme CSS Custom Properties Light mode defaults in :root Dark overrides via body[data-layout-mode="dark"] Sepia (warm light variant) via body[data-layout-mode="sepia"] ================================================ */ /* ================================================ INVARIANT SCALES Spacing / type / radius / motion / elevation / z-index. These do NOT change with the theme, so :root is correct for them — unlike anything colour-bearing, which must live in the three theme blocks below (see the warning above BRAND ROLES). Generalised from public/assets/css/ai-calls.css, which proved this shape on the AI-call reports. Everything here is additive: no existing token changed name or value. ================================================ */ :root { /* ---- Spacing: strict 8px system. The 0.5 step (4px) exists only for inline gaps (icon↔label), never for layout. ---- */ --theme-space-0: 0; --theme-space-0-5: 4px; --theme-space-1: 8px; --theme-space-1-5: 12px; --theme-space-2: 16px; --theme-space-2-5: 20px; --theme-space-3: 24px; --theme-space-4: 32px; --theme-space-5: 40px; --theme-space-6: 48px; --theme-space-8: 64px; --theme-space-10: 80px; --theme-space-12: 96px; /* ---- Typography ---- Three families are in circulation: Montserrat (the house components in custom.css), IBM Plex Sans (@imported by Minia's app.min.css) and Inter (self-hosted through Vite, Vue side only). --theme-font-sans is the single seam: point it somewhere else and the whole ERP shell follows. Montserrat stays the default so this change is visually neutral on day one. Inter leads the stack because it is already self-hosted and has far better number legibility in dense tables; it is only reached on pages that load the Vite build. */ --theme-font-sans: "Montserrat", Inter, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --theme-fs-xs: 11px; --theme-fs-sm: 12px; --theme-fs-base: 13px; /* .all-btn and most dense UI already sit here */ --theme-fs-md: 14px; --theme-fs-lg: 16px; /* .input-form */ --theme-fs-xl: 20px; /* .cncard .card-title */ --theme-fs-2xl: 24px; --theme-fs-3xl: 30px; --theme-lh-tight: 1.25; --theme-lh-base: 1.5; --theme-lh-loose: 1.7; --theme-fw-normal: 400; --theme-fw-medium: 500; --theme-fw-semibold: 600; --theme-fw-bold: 700; --theme-tracking-wide: 0.02em; /* ---- Radius ---- Was: .input-form 4px, .cncard 5px, .all-btn 8px — three values, no rationale. These are the canonical steps; the legacy aliases below keep the old geometry until each component is migrated. */ --theme-r-xs: 4px; --theme-r-sm: 6px; --theme-r-md: 8px; --theme-r-lg: 12px; --theme-r-xl: 16px; --theme-r-pill: 999px; /* ---- Motion ---- Consumed by the transition block at the foot of this file, which already honours prefers-reduced-motion. Keep durations short: this is a data-entry ERP, not a marketing site. */ --theme-dur-fast: 120ms; --theme-dur-base: 200ms; --theme-dur-slow: 300ms; --theme-ease: cubic-bezier(0.4, 0, 0.2, 1); --theme-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---- Control sizing ---- */ --theme-control-h-sm: 32px; --theme-control-h: 36px; /* .all-btn's existing height */ --theme-control-h-lg: 45px; /* .input-form's existing min-height */ --theme-tap-target: 44px; /* WCAG 2.5.5 floor for touch */ /* ---- Z-index: one ladder, so nothing has to guess 9999 again ---- */ --theme-z-dropdown: 1000; --theme-z-sticky: 1020; --theme-z-fixed: 1030; --theme-z-backdrop: 1040; --theme-z-modal: 1050; --theme-z-popover: 1070; --theme-z-toast: 1090; /* ---- Brand ramp ---- Generated from #274472 — the dominant house navy (159 uses in hand-written CSS, vs 88 for #111184 and 9 for Minia's #5156be). Hue and saturation are the repo's own; only the lightness steps are new, so the brand reads exactly as before. Contrast, measured (not estimated): 700 #274472 on white ........ 9.74 AAA 600 #31558f on white ........ 7.43 AAA 500 #3f6eb8 on white ........ 5.08 AA 400 #7195ce on white ........ 3.05 AA-large only 300 #a2badf on #1e2227 ...... 8.09 AAA ← dark-mode text 400 #7195ce on #1e2227 ...... 5.25 AA 700 on a dark body is 1.64 — it FAILS. That is precisely why the brand ROLES below are redefined per theme instead of being used raw from this ramp. */ --theme-brand-50: #f4f6f8; --theme-brand-100: #e7ebf1; --theme-brand-200: #ccd7e8; --theme-brand-300: #a2badf; --theme-brand-400: #7195ce; --theme-brand-500: #3f6eb8; --theme-brand-600: #31558f; --theme-brand-700: #274472; /* the existing brand navy, unchanged */ --theme-brand-800: #1d3356; --theme-brand-900: #162439; /* The action navy, kept as its own hue because 88 rules depend on it (.all-btn text, .input-form focus border). 14.61 on white. */ --theme-action-500: #2a2ab8; --theme-action-600: #1c1c9e; --theme-action-700: #111184; --theme-action-800: #0c0c63; /* ---- Solid button fills ---- Status colours, not brand colours, so they are theme-invariant: the text on them is always white, and white-on-fill contrast does not depend on the page background. These are AA-corrected. An audit of improved-buttons.css found 8 of 13 solid fills failing 4.5:1 with white text — e.g. Save #10b981 scored 2.54, Export #f59e0b 2.15, WhatsApp #25d366 1.98. Each value below is the SAME HUE walked down in lightness until it reaches AA, so the buttons still read green/blue/amber/red, just legibly. Measured ratios against #ffffff are in the comments. */ --theme-btn-success-bg: #0c875e; /* 4.52 — was #10b981 @ 2.54 */ --theme-btn-success-bg-hover: #05875e; /* 4.53 */ --theme-btn-success-bg-active: #047857; /* 5.48 — already passed */ --theme-btn-info-bg: #3472d8; /* 4.62 — was #3b82f6 @ 3.68 */ --theme-btn-info-bg-hover: #2563eb; /* 5.17 — already passed */ --theme-btn-info-bg-active: #1d4ed8; /* 6.70 */ --theme-btn-warning-bg: #a46a07; /* 4.52 — was #f59e0b @ 2.15 */ --theme-btn-warning-bg-hover: #b26205; /* 4.52 — was #d97706 @ 3.19 */ --theme-btn-warning-bg-active: #8a5205; /* 6.38 */ --theme-btn-danger-bg: #d73d3d; /* 4.54 — was #ef4444 @ 3.76 */ --theme-btn-danger-bg-hover: #dc2626; /* 4.83 — already passed */ --theme-btn-danger-bg-active: #b91c1c; /* 6.47 */ --theme-btn-wa-bg: #188741; /* 4.58 — was #25d366 @ 1.98 */ --theme-btn-wa-bg-hover: #15873e; /* 4.60 */ --theme-btn-solid-text: #ffffff; } /* ================================================ LIGHT (default) ================================================ */ :root { /* Backgrounds */ --theme-bg-body: #f3f3f9; --theme-bg-surface: #ffffff; --theme-bg-elevated: #f8f9fa; --theme-bg-hover: #f3f4f6; /* Borders */ --theme-border: #e9e9ef; --theme-border-input: #ced4da; /* Text */ --theme-text-primary: #495057; --theme-text-heading: #212529; --theme-text-muted: #6b7280; --theme-text-link: #5156be; --theme-text-link-hover: #3f44a0; /* Inputs */ --theme-input-bg: #ffffff; /* Tables */ --theme-table-header-bg: #f8f9fa; --theme-table-header-text: #000000; --theme-table-header-border: #dee2e6; /* Scrollbars */ --theme-scrollbar-track: #f1f1f1; --theme-scrollbar-thumb: #c1c1c1; --theme-scrollbar-thumb-hover: #a8a8a8; /* States */ --theme-bg-disabled: #e9ecef; --theme-text-disabled: #6c757d; --theme-focus-border: #86b7fe; --theme-focus-shadow: rgba(13, 110, 253, 0.25); --theme-text-placeholder: #6c757d; --theme-bg-code: #f8f9fa; --theme-bg-active: #0d6efd; /* Soft state backgrounds */ --theme-bg-soft-primary: #e8e8f7; --theme-bg-soft-success: #d4edda; --theme-bg-soft-danger: #f8d7da; --theme-bg-soft-warning: #fff3cd; --theme-bg-soft-info: #d1ecf1; --theme-bg-soft-secondary: #e2e3e5; /* Alerts */ --theme-alert-info-bg: #cfe2ff; --theme-alert-info-border: #b6d4fe; --theme-alert-info-text: #084298; --theme-alert-success-bg: #d1e7dd; --theme-alert-success-border: #badbcc; --theme-alert-success-text: #0f5132; --theme-alert-warning-bg: #fff3cd; --theme-alert-warning-border: #ffecb5; --theme-alert-warning-text: #664d03; --theme-alert-danger-bg: #f8d7da; --theme-alert-danger-border: #f5c2c7; --theme-alert-danger-text: #842029; /* Accent palette (dashboard cards) */ --theme-accent-blue: #0d6efd; --theme-accent-green: #198754; --theme-accent-yellow: #ffc107; --theme-accent-cyan: #0dcaf0; --theme-accent-purple: #6f42c1; --theme-accent-red: #dc3545; --theme-accent-orange: #fd7e14; /* Accent background tints */ --theme-accent-blue-bg: #e7f1ff; --theme-accent-green-bg: #d1e7dd; --theme-accent-yellow-bg: #fff3cd; --theme-accent-cyan-bg: #cff4fc; --theme-accent-purple-bg: #e2d9f3; --theme-accent-red-bg: #f8d7da; /* Row tints — table row status highlights. Dark values are genuinely dark so the globally force-lightened row text stays readable on top of them. */ --theme-row-tint-green: #d9f7dc; --theme-row-tint-cyan: #cff7f4; --theme-row-tint-amber: #fff3c4; --theme-row-tint-red: #fde8e8; --theme-row-tint-slate: #f0f4f8; /* Hierarchy levels */ --theme-level-0-bg: #e8f5e9; --theme-level-1-bg: #f1f8e9; --theme-level-2-bg: #f5f5f5; /* Footer gradients */ --theme-footer-gradient-start: #e8eaf6; --theme-footer-gradient-end: #e3f2fd; --theme-footer-stat-bg: rgba(0, 0, 0, 0.05); --theme-footer-stat-hover-bg: rgba(0, 0, 0, 0.08); /* Modal */ --theme-modal-header-start: #e8eaf6; --theme-modal-header-end: #e3f2fd; --theme-modal-footer-bg: #f8f9fa; /* Shadows */ --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --theme-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --theme-shadow-dropdown: 0 5px 20px rgba(0, 0, 0, 0.1); /* Icon colors */ --theme-icon-success: #198754; --theme-icon-danger: #dc3545; --theme-icon-warning: #ffc107; --theme-icon-info: #0dcaf0; /* Gold (wc_box_frames, deleted vehicles) */ --theme-gold-border: #daa520; --theme-gold-bg: #fdf5e6; --theme-gold-text: #8b6914; /* Deleted records */ --theme-deleted-bg: #fff5f5; --theme-deleted-text: #dc3545; --theme-deleted-by-text: #dc3545; /* Overlay */ --theme-overlay-bg: rgba(0, 0, 0, 0.5); /* Green highlight (totals, download buttons) */ --theme-green-highlight-bg: #d4edda; --theme-green-highlight-text: #155724; --theme-download-gradient-start: #28a745; --theme-download-gradient-end: #1e7e34; /* Age badges */ --theme-age-ok-bg: #d1e7dd; --theme-age-ok-text: #0f5132; --theme-age-warning-bg: #fff3cd; --theme-age-warning-text: #664d03; --theme-age-danger-bg: #f8d7da; --theme-age-danger-text: #842029; /* Alert level pills */ --theme-pill-ok-bg: #d1e7dd; --theme-pill-ok-text: #0f5132; --theme-pill-alert-bg: #fff3cd; --theme-pill-alert-text: #664d03; --theme-pill-high-bg: #ffe5d0; --theme-pill-high-text: #984c0c; --theme-pill-omg-bg: #f8d7da; --theme-pill-omg-text: #842029; /* Action buttons (phone, whatsapp, pdf) */ --theme-btn-phone-bg: #e7f1ff; --theme-btn-phone-text: #0d6efd; --theme-btn-whatsapp-bg: #d4edda; --theme-btn-whatsapp-text: #25D366; --theme-btn-pdf-bg: #f8d7da; --theme-btn-pdf-text: #dc3545; /* Tracking link */ --theme-tracking-bg: #e7f1ff; --theme-tracking-text: #0d6efd; --theme-tracking-hover-bg: #cfe2ff; /* Noncredit pending */ --theme-noncredit-bg: #f8d7da; --theme-noncredit-text: #842029; /* Overdue */ --theme-overdue-red: #dc3545; /* DFR time summary panel */ --theme-time-summary-bg: #e8eaf6; --theme-time-summary-border: #c5cae9; /* Shortcut key */ --theme-shortcut-active-bg: #d4edda; --theme-shortcut-active-border: #b1dfbb; /* Select2 selected option */ --theme-select2-selected-bg: rgba(13, 110, 253, 0.1); /* ---- BRAND ROLES (light) ---- ⚠️ Roles live in the THREE theme blocks, never in the invariant :root above. A colour alias declared on :root resolves once against the light value and never re-resolves under body[data-layout-mode="dark"] — the trap documented in ai-calls.css. Components should consume these roles, not the raw --theme-brand-* ramp, so dark and sepia keep working. */ --theme-brand-text: var(--theme-brand-700); /* 9.74 on white */ --theme-brand-text-hover: var(--theme-brand-800); --theme-brand-solid: var(--theme-brand-700); --theme-brand-solid-hover: var(--theme-brand-800); --theme-brand-solid-text: #ffffff; /* vs solid: AAA */ --theme-brand-surface: var(--theme-brand-50); --theme-brand-surface-hover: var(--theme-brand-100); --theme-brand-border: var(--theme-brand-200); --theme-brand-accent-bar: var(--theme-brand-700); /* .cncard top rule */ /* Interactive/action navy — .all-btn and input focus. */ --theme-action-text: var(--theme-action-700); /* 14.61 on white */ --theme-action-solid: var(--theme-action-700); --theme-action-solid-text: #ffffff; --theme-action-border: rgba(17, 17, 132, 0.25); --theme-action-ring: rgba(17, 17, 132, 0.35); --theme-action-shadow: rgba(17, 17, 132, 0.06); --theme-action-shadow-strong: rgba(17, 17, 132, 0.25); /* Focus ring — one definition, used by every interactive element. Rendered as a real outline (not a box-shadow) so it survives overflow:hidden, which .all-btn sets. */ --theme-ring-width: 2px; --theme-ring-offset: 2px; --theme-ring-color: var(--theme-action-700); /* Neutral button (the bare .all-btn) and disabled — these DO vary per theme, unlike the status fills above. */ --theme-btn-neutral-bg: #ffffff; --theme-btn-neutral-text: var(--theme-action-700); --theme-btn-neutral-border: var(--theme-action-border); --theme-btn-neutral-hover-bg: var(--theme-action-700); --theme-btn-neutral-hover-text: #ffffff; --theme-btn-disabled-bg: #f3f4f6; --theme-btn-disabled-border: #e5e7eb; --theme-btn-disabled-text: #69707d; /* 4.53 on the disabled bg */ /* Red LABEL on an outline button (.cancel-btn) — the fill red is too dark to read as text on the dark surface. */ --theme-btn-danger-text: #d73d3d; /* 4.54 on white */ } /* ================================================ DARK ================================================ */ body[data-layout-mode="dark"] { /* Backgrounds */ --theme-bg-body: #1e2227; --theme-bg-surface: #2a2f34; --theme-bg-elevated: #323840; --theme-bg-hover: #3a4249; /* Borders */ --theme-border: #3a3f48; --theme-border-input: #525761; /* Text */ --theme-text-primary: #e3e4e8; --theme-text-heading: #ffffff; --theme-text-muted: #9ca3af; --theme-text-link: #6ea8fe; --theme-text-link-hover: #93c5fd; /* Ink for surfaces that deliberately keep a LIGHT face in dark mode (.theme-light-face — see theme-overrides.css SECTION 1b). */ --theme-light-face-text: #1e293b; /* Inputs */ --theme-input-bg: #3a3f48; /* Tables */ --theme-table-header-bg: #3d5a80; --theme-table-header-text: #ffffff; --theme-table-header-border: #4a6a91; /* Scrollbars */ --theme-scrollbar-track: #1e2227; --theme-scrollbar-thumb: #4a5568; --theme-scrollbar-thumb-hover: #5a6578; /* States */ --theme-bg-disabled: #2e3238; --theme-text-disabled: #9ca3af; --theme-focus-border: #6ea8fe; --theme-focus-shadow: rgba(110, 168, 254, 0.25); --theme-text-placeholder: #9ca3af; --theme-bg-code: #1a1d21; --theme-bg-active: #3d5a80; /* Soft state backgrounds */ --theme-bg-soft-primary: #2a3f5f; --theme-bg-soft-success: #1e4620; --theme-bg-soft-danger: #4a2020; --theme-bg-soft-warning: #4a3a1e; --theme-bg-soft-info: #1e3a4a; --theme-bg-soft-secondary: #3a3f48; /* Alerts */ --theme-alert-info-bg: #1e3a5f; --theme-alert-info-border: #2a4f7a; --theme-alert-info-text: #a8d4ff; --theme-alert-success-bg: #1e5f2a; --theme-alert-success-border: #2a7a3a; --theme-alert-success-text: #99ffa8; --theme-alert-warning-bg: #5f4a1e; --theme-alert-warning-border: #7a5f2a; --theme-alert-warning-text: #ffd699; --theme-alert-danger-bg: #5f1e1e; --theme-alert-danger-border: #7a2a2a; --theme-alert-danger-text: #ff9999; /* Accent palette */ --theme-accent-blue: #60a5fa; --theme-accent-green: #34d399; --theme-accent-yellow: #fbbf24; --theme-accent-cyan: #22d3ee; --theme-accent-purple: #a78bfa; --theme-accent-red: #f87171; --theme-accent-orange: #fb923c; /* Accent background tints */ --theme-accent-blue-bg: #1e3a5f; --theme-accent-green-bg: #1a3d2e; --theme-accent-yellow-bg: #3d351a; --theme-accent-cyan-bg: #1a3d3d; --theme-accent-purple-bg: #2d2354; --theme-accent-red-bg: #3d1a1a; /* Row tints — table row status highlights. Dark values are genuinely dark so the globally force-lightened row text stays readable on top of them. */ --theme-row-tint-green: #14532d; --theme-row-tint-cyan: #134e4a; --theme-row-tint-amber: #4a3a1e; --theme-row-tint-red: #4a2020; --theme-row-tint-slate: #232a35; /* Hierarchy levels */ --theme-level-0-bg: #2d3a2d; --theme-level-1-bg: #323d32; --theme-level-2-bg: #2e3339; /* Footer gradients */ --theme-footer-gradient-start: #1e2940; --theme-footer-gradient-end: #1e3050; --theme-footer-stat-bg: rgba(255, 255, 255, 0.08); --theme-footer-stat-hover-bg: rgba(255, 255, 255, 0.15); /* Modal */ --theme-modal-header-start: #1e3a5f; --theme-modal-header-end: #2d4a6f; --theme-modal-footer-bg: #252a2e; /* Shadows */ --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --theme-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4); --theme-shadow-dropdown: 0 5px 20px rgba(0, 0, 0, 0.3); /* Icon colors */ --theme-icon-success: #75d97b; --theme-icon-danger: #ff6b6b; --theme-icon-warning: #ffc107; --theme-icon-info: #17a2b8; /* Gold */ --theme-gold-border: #b8860b; --theme-gold-bg: #8b6914; --theme-gold-text: #fcd34d; /* Deleted records */ --theme-deleted-bg: #3d2020; --theme-deleted-text: #ff9999; --theme-deleted-by-text: #ff9999; /* Overlay */ --theme-overlay-bg: rgba(0, 0, 0, 0.7); /* Green highlight */ --theme-green-highlight-bg: #2d5a2d; --theme-green-highlight-text: #92d050; --theme-download-gradient-start: #1a5c38; --theme-download-gradient-end: #0d3d24; /* Age badges */ --theme-age-ok-bg: linear-gradient(135deg, #1a3d2e 0%, #1e4a35 100%); --theme-age-ok-text: #6ee7b7; --theme-age-warning-bg: linear-gradient(135deg, #3d351a 0%, #4a3f1a 100%); --theme-age-warning-text: #fde68a; --theme-age-danger-bg: linear-gradient(135deg, #3d1a1a 0%, #4a2020 100%); --theme-age-danger-text: #fca5a5; /* Alert level pills */ --theme-pill-ok-bg: linear-gradient(135deg, #1a3d2e 0%, #1e4a35 100%); --theme-pill-ok-text: #6ee7b7; --theme-pill-alert-bg: linear-gradient(135deg, #4a3f1a 0%, #5c4a1a 100%); --theme-pill-alert-text: #fde68a; --theme-pill-high-bg: linear-gradient(135deg, #4a2f1a 0%, #5c3a1a 100%); --theme-pill-high-text: #fdba74; --theme-pill-omg-bg: linear-gradient(135deg, #4a1a1a 0%, #5c2020 100%); --theme-pill-omg-text: #fca5a5; /* Action buttons */ --theme-btn-phone-bg: #2a3f5f; --theme-btn-phone-text: #6ea8fe; --theme-btn-whatsapp-bg: #1e4620; --theme-btn-whatsapp-text: #25D366; --theme-btn-pdf-bg: #4a2020; --theme-btn-pdf-text: #dc3545; /* Tracking link */ --theme-tracking-bg: #1e3a5f; --theme-tracking-text: #60a5fa; --theme-tracking-hover-bg: #2a4f7a; /* Noncredit pending */ --theme-noncredit-bg: #4a2020; --theme-noncredit-text: #ff9999; /* Overdue */ --theme-overdue-red: #ff6b6b; /* DFR time summary panel */ --theme-time-summary-bg: #2a3441; --theme-time-summary-border: #3a4f66; /* Shortcut key */ --theme-shortcut-active-bg: #2d5a2d; --theme-shortcut-active-border: #3a6e3a; /* Select2 selected option */ --theme-select2-selected-bg: rgba(61, 90, 128, 0.4); /* ---- BRAND ROLES (dark) ---- The ramp steps invert: 700 scores 1.64 on #1e2227 and is unreadable, so text roles move up to 300/400 and solid fills move to 500/600 where white still passes. */ --theme-brand-text: var(--theme-brand-300); /* 8.09 on body */ --theme-brand-text-hover: var(--theme-brand-200); /* 11.00 */ --theme-brand-solid: var(--theme-brand-600); --theme-brand-solid-hover: var(--theme-brand-500); --theme-brand-solid-text: #ffffff; --theme-brand-surface: rgba(63, 110, 184, 0.14); --theme-brand-surface-hover: rgba(63, 110, 184, 0.24); --theme-brand-border: rgba(113, 149, 206, 0.32); --theme-brand-accent-bar: var(--theme-brand-400); /* The action navy is near-black and invisible here — dark mode borrows the brand ramp for interactive chrome instead. */ --theme-action-text: var(--theme-brand-300); --theme-action-solid: var(--theme-brand-600); --theme-action-solid-text: #ffffff; --theme-action-border: rgba(162, 186, 223, 0.30); --theme-action-ring: rgba(162, 186, 223, 0.55); --theme-action-shadow: rgba(0, 0, 0, 0.35); --theme-action-shadow-strong: rgba(0, 0, 0, 0.5); --theme-ring-color: var(--theme-brand-300); --theme-btn-neutral-bg: #262b31; --theme-btn-neutral-text: var(--theme-brand-300); --theme-btn-neutral-border: rgba(162, 186, 223, 0.30); --theme-btn-neutral-hover-bg: var(--theme-brand-600); --theme-btn-neutral-hover-text: #ffffff; --theme-btn-disabled-bg: #2f353c; --theme-btn-disabled-border: #3f464f; --theme-btn-disabled-text: #979ea7; /* 4.58 on the disabled bg */ --theme-btn-danger-text: #f87171; /* 4.88 on the dark surface */ /* Inline-styled pill badges (x-last-reminder-badge, x-ai-call-badge, x-ai-stock-call-badge, x-high-value-badge). Light values live as the var() fallbacks inside each component — only dark needs overrides; sepia is a light theme and correctly falls through to the fallbacks. */ --pill-stale-bg: #374151; --pill-stale-fg: #9ca3af; --pill-green-bg: #14532d; --pill-green-fg: #86efac; --pill-blue-bg: #1e3a8a; --pill-blue-fg: #93c5fd; --pill-amber-bg: #422006; --pill-amber-fg: #fcd34d; --pill-amber-border: #a16207; --pill-red-bg: #450a0a; --pill-red-fg: #fca5a5; --pill-accent-green: #4ade80; --pill-accent-blue: #93c5fd; --pill-accent-amber: #fbbf24; --pill-accent-muted: #9ca3af; --pill-accent-red: #f87171; --pill-sep: rgba(255, 255, 255, 0.25); } /* ================================================ SEPIA (warm light theme) Parchment-like tones, easy on eyes ================================================ */ body[data-layout-mode="sepia"] { /* Backgrounds */ --theme-bg-body: #f5f0e8; --theme-bg-surface: #faf7f2; --theme-bg-elevated: #efe9dd; --theme-bg-hover: #e8e0d0; /* Borders */ --theme-border: #d4c9b5; --theme-border-input: #c4b89e; /* Text */ --theme-text-primary: #5c4b32; --theme-text-heading: #3d2e18; /* Was #8a7a62 — 3.90 on the sepia surface and 3.67 on the sepia body, i.e. below AA for normal text. Same hue, darkened until it passes: 4.56 on #faf7f2, 4.50 on #f5f0e8. */ --theme-text-muted: #7a6c57; --theme-text-link: #8b5c2a; --theme-text-link-hover: #6d4520; /* Inputs */ --theme-input-bg: #faf7f2; /* Tables */ --theme-table-header-bg: #e8dcc8; --theme-table-header-text: #3d2e18; --theme-table-header-border: #d4c9b5; /* Scrollbars */ --theme-scrollbar-track: #efe9dd; --theme-scrollbar-thumb: #c4b89e; --theme-scrollbar-thumb-hover: #a89878; /* States */ --theme-bg-disabled: #efe9dd; --theme-text-disabled: #8a7a62; --theme-focus-border: #b8860b; --theme-focus-shadow: rgba(184, 134, 11, 0.2); --theme-text-placeholder: #8a7a62; --theme-bg-code: #efe9dd; --theme-bg-active: #b8860b; /* Soft state backgrounds */ --theme-bg-soft-primary: #e8dcc8; --theme-bg-soft-success: #dbe8d4; --theme-bg-soft-danger: #f0ddd5; --theme-bg-soft-warning: #f0e8d0; --theme-bg-soft-info: #d5e0e8; --theme-bg-soft-secondary: #e8e0d0; /* Alerts */ --theme-alert-info-bg: #e0e8f0; --theme-alert-info-border: #c8d8e8; --theme-alert-info-text: #3d5a80; --theme-alert-success-bg: #dbe8d4; --theme-alert-success-border: #c8d8b8; --theme-alert-success-text: #2d5a1e; --theme-alert-warning-bg: #f0e8d0; --theme-alert-warning-border: #e8d8b0; --theme-alert-warning-text: #6b4f1a; --theme-alert-danger-bg: #f0ddd5; --theme-alert-danger-border: #e8c8b8; --theme-alert-danger-text: #7a2e2e; /* Accent palette */ --theme-accent-blue: #4a7a9e; --theme-accent-green: #4a8a4a; --theme-accent-yellow: #b8860b; --theme-accent-cyan: #3a8a9a; --theme-accent-purple: #7a5a9a; --theme-accent-red: #a03030; --theme-accent-orange: #c07020; /* Accent background tints */ --theme-accent-blue-bg: #dce8f0; --theme-accent-green-bg: #dbe8d4; --theme-accent-yellow-bg: #f0e8d0; --theme-accent-cyan-bg: #d5e8ea; --theme-accent-purple-bg: #e5ddf0; --theme-accent-red-bg: #f0ddd5; /* Row tints — table row status highlights. Dark values are genuinely dark so the globally force-lightened row text stays readable on top of them. */ --theme-row-tint-green: #dbe8d4; --theme-row-tint-cyan: #d5e8ea; --theme-row-tint-amber: #f0e8d0; --theme-row-tint-red: #f0ddd5; --theme-row-tint-slate: #e8e0d0; /* Hierarchy levels */ --theme-level-0-bg: #dde8d4; --theme-level-1-bg: #e4edd8; --theme-level-2-bg: #efe9dd; /* Footer gradients */ --theme-footer-gradient-start: #e8dcc8; --theme-footer-gradient-end: #e0d4be; --theme-footer-stat-bg: rgba(0, 0, 0, 0.04); --theme-footer-stat-hover-bg: rgba(0, 0, 0, 0.07); /* Modal */ --theme-modal-header-start: #e8dcc8; --theme-modal-header-end: #ddd0b8; --theme-modal-footer-bg: #efe9dd; /* Shadows */ --theme-shadow-sm: 0 1px 3px rgba(92, 75, 50, 0.08); --theme-shadow-md: 0 4px 12px rgba(92, 75, 50, 0.1); --theme-shadow-lg: 0 12px 32px rgba(92, 75, 50, 0.12); --theme-shadow-dropdown: 0 5px 20px rgba(92, 75, 50, 0.12); /* Icon colors */ --theme-icon-success: #4a8a4a; --theme-icon-danger: #a03030; --theme-icon-warning: #b8860b; --theme-icon-info: #3a8a9a; /* Gold */ --theme-gold-border: #b8860b; --theme-gold-bg: #e8dcc8; --theme-gold-text: #6b4f1a; /* Deleted records */ --theme-deleted-bg: #f0ddd5; --theme-deleted-text: #a03030; --theme-deleted-by-text: #a03030; /* Overlay */ --theme-overlay-bg: rgba(61, 46, 24, 0.4); /* Green highlight */ --theme-green-highlight-bg: #dbe8d4; --theme-green-highlight-text: #2d5a1e; --theme-download-gradient-start: #4a8a4a; --theme-download-gradient-end: #3a7a3a; /* Age badges */ --theme-age-ok-bg: #dbe8d4; --theme-age-ok-text: #2d5a1e; --theme-age-warning-bg: #f0e8d0; --theme-age-warning-text: #6b4f1a; --theme-age-danger-bg: #f0ddd5; --theme-age-danger-text: #7a2e2e; /* Alert level pills */ --theme-pill-ok-bg: #dbe8d4; --theme-pill-ok-text: #2d5a1e; --theme-pill-alert-bg: #f0e8d0; --theme-pill-alert-text: #6b4f1a; --theme-pill-high-bg: #eeddc8; --theme-pill-high-text: #8a4a1a; --theme-pill-omg-bg: #f0ddd5; --theme-pill-omg-text: #7a2e2e; /* Action buttons */ --theme-btn-phone-bg: #dce8f0; --theme-btn-phone-text: #4a7a9e; --theme-btn-whatsapp-bg: #dbe8d4; /* WhatsApp brand green (#25D366) lands at 1.6:1 on this pale chip — it only works on dark mode's #1e4620. Deepened here to 5.2:1 while staying unmistakably WhatsApp-green. (Light mode pairs the same #25D366 with #d4edda for the same ~1.5:1; left alone, as that is outside sepia.) */ --theme-btn-whatsapp-text: #0b6b34; --theme-btn-pdf-bg: #f0ddd5; --theme-btn-pdf-text: #a03030; /* Tracking link */ --theme-tracking-bg: #dce8f0; --theme-tracking-text: #4a7a9e; --theme-tracking-hover-bg: #c8d8e8; /* Noncredit pending */ --theme-noncredit-bg: #f0ddd5; --theme-noncredit-text: #7a2e2e; /* Overdue */ --theme-overdue-red: #a03030; /* DFR time summary panel */ --theme-time-summary-bg: #e0d4be; --theme-time-summary-border: #d4c9b5; /* Shortcut key */ --theme-shortcut-active-bg: #dbe8d4; --theme-shortcut-active-border: #b8d4a8; /* Select2 selected option */ --theme-select2-selected-bg: rgba(184, 134, 11, 0.1); /* ---- BRAND ROLES (sepia) ---- Sepia deliberately re-hues the whole UI warm (#8b5c2a links, #b8860b focus). Dropping a cold navy in here would tear that up, so the roles map onto the existing warm palette rather than the blue ramp. Measured on --theme-bg-surface #faf7f2: #6d4520 .............. 7.79 AAA #52341a .............. 10.54 AAA #8b5c2a .............. 5.37 AA (accent bar only, not text) white on #6d4520 ..... 8.33 AAA */ --theme-brand-text: #6d4520; --theme-brand-text-hover: #52341a; --theme-brand-solid: #6d4520; --theme-brand-solid-hover: #52341a; --theme-brand-solid-text: #ffffff; --theme-brand-surface: #f0e6d6; --theme-brand-surface-hover: #e6d8c2; --theme-brand-border: #d4c9b5; --theme-brand-accent-bar: #8b5c2a; --theme-action-text: #6d4520; --theme-action-solid: #6d4520; --theme-action-solid-text: #ffffff; --theme-action-border: rgba(109, 69, 32, 0.28); --theme-action-ring: rgba(109, 69, 32, 0.45); --theme-action-shadow: rgba(109, 69, 32, 0.08); --theme-action-shadow-strong: rgba(109, 69, 32, 0.25); --theme-ring-color: #6d4520; --theme-btn-neutral-bg: #faf7f2; --theme-btn-neutral-text: #6d4520; --theme-btn-neutral-border: rgba(109, 69, 32, 0.28); --theme-btn-neutral-hover-bg: #6d4520; --theme-btn-neutral-hover-text: #ffffff; --theme-btn-disabled-bg: #ece5d8; --theme-btn-disabled-border: #d9cfbb; --theme-btn-disabled-text: #6f6555; /* 4.57 on the disabled bg */ --theme-btn-danger-text: #a03030; /* #d73d3d is 4.25 on parchment */ } /* ================================================ OS PREFERENCE FALLBACK Auto-detect dark mode when no user preference is saved JS removes this by setting data-layout-mode explicitly ================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-layout-mode]) body:not([data-layout-mode]) { --theme-bg-body: #1e2227; --theme-bg-surface: #2a2f34; --theme-bg-elevated: #323840; --theme-text-primary: #e3e4e8; --theme-text-heading: #ffffff; --theme-text-muted: #9ca3af; } } /* ================================================ SMOOTH THEME TRANSITIONS Only on key surface elements to avoid performance issues. The * selector is intentionally NOT used here. ================================================ */ body:not(.no-transitions), body:not(.no-transitions) .card, body:not(.no-transitions) .card-body, body:not(.no-transitions) .card-header, body:not(.no-transitions) .modal-content, body:not(.no-transitions) .page-content, body:not(.no-transitions) .main-content, body:not(.no-transitions) .table, body:not(.no-transitions) .form-control, body:not(.no-transitions) .form-select, body:not(.no-transitions) .dropdown-menu, body:not(.no-transitions) .nav-link, body:not(.no-transitions) .btn { transition: background-color var(--theme-dur-slow) var(--theme-ease), color var(--theme-dur-slow) var(--theme-ease), border-color var(--theme-dur-slow) var(--theme-ease); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }