/* ------------------------------------------------------------ Design tokens (global) Why: Centralise app colour definitions so all component CSS can reference semantic variables (single source of truth). ------------------------------------------------------------- */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; --radius-base: 14px; /* Used in: assets/css/app.css (body background, .auth-shell background). */ --theme-body-bg: #F2F5F5; /* Used in: assets/css/app.css (body text, .btn text, .form-control text, .planner-tooltip content), assets/css/select2.css (selected text), assets/css/toast.css (toast body text), assets/css/alert.css (alert body text), assets/css/form_wizard.css (step title). */ --theme-body-text: #565360; /* Used in: assets/css/app.css (.muted, .label, placeholders, small helper text), assets/css/alert.css (.app-alert-hint), assets/css/form_wizard.css (inactive step circles background). */ --theme-muted: #908E9B; /* Used in: assets/css/app.css (.card, .pill, .auth-card, .form-control background, booking modal body), assets/css/alert.css (alert dialog surface, input bg), assets/css/toast.css (toast container background), assets/css/select2.css (control background), assets/css/landing_body_card.css (table row backgrounds). */ --theme-surface: #ffffff; /* Used in: assets/css/app.css (.btn border, .card border, .form-control border, minor UI borders), assets/css/select2.css (control border), assets/css/alert.css (dialog + input borders), assets/css/landing_body_card.css (row hover + action borders), assets/css/form_wizard.css (wizard progress track + step borders), assets/css/add_update_body_card.css (button borders). */ --theme-border: #e5e7eb; /* Used in: assets/css/app.css (a/button focus-visible outline, input/select focus border), assets/css/side_nav_bar.css (menu focus-visible), assets/css/header_card.css (button focus-visible), assets/css/filter_card.css (button focus-visible), assets/css/form_wizard.css (step focus + current step), assets/css/select2.css (focus border), assets/css/alert.css (input focus). */ --theme-focus: #1FA9E8; /* Used in: assets/css/app.css (input/select focus ring), assets/css/select2.css (focus ring), assets/css/alert.css (input focus ring). */ --theme-focus-ring: #1FA9E829; /* Used in: assets/css/side_nav_bar.css (mobile sidebar overlay), assets/css/loader.css (preloader overlay), assets/css/alert.css (alert overlay backdrop). */ --theme-overlay-80: #000000CC; /* Used in: assets/css/app.css (modal backdrop). */ /* used in quick add vehicle/client modal backdrop */ --theme-overlay-35: #00000059; /* Used in: assets/css/app.css (.auth-card shadow, brand mark shadow, planner tooltip shadow), assets/css/side_nav_bar.css (sidebar collapser + user menu shadow), assets/css/landing_body_card.css (card shadow), assets/css/add_update_body_card.css (card shadow), assets/css/alert.css (dialog shadow), assets/css/toast.css (toast shadow). */ --theme-shadow: #1118271F; /* Used in: assets/css/side_nav_bar.css (#sidebar/#topbar backgrounds, collapser bg), assets/css/header_card.css (header card background), assets/css/filter_card.css (filter card background), assets/css/app.css (booking modal header/footer bg, tooltip bg), assets/css/landing_body_card.css (table header background), assets/css/alert.css (alert header/footer bg), assets/css/toast.css (toast header bg). Sidebar background colour. Navbar background colour. */ --theme-chrome-bg: #1f1f22; /* --theme-chrome-bg: #333238; */ /* --theme-chrome-bg: #00072d; */ /* Used in: assets/css/side_nav_bar.css (sidebar/topbar text + icons), assets/css/header_card.css (header text + buttons), assets/css/filter_card.css (button/label text on chrome), assets/css/app.css (booking modal header/footer text, tooltip text), assets/css/landing_body_card.css (table header text), assets/css/alert.css (alert header text + icon), assets/css/toast.css (toast header + close icon + standardized title colours). */ --theme-chrome-text: #F2F5F5; /* Used in: assets/css/side_nav_bar.css (sidebar/topbar dividers and icon borders), assets/css/header_card.css (header button borders), assets/css/filter_card.css (filter button borders/card border), assets/css/app.css (booking modal header/footer borders, tooltip border, modal divider), assets/css/alert.css (header/footer + button borders), assets/css/toast.css (header divider + progress background stroke). */ --theme-chrome-border: #FFFFFF1F; /* Used in: assets/css/filter_card.css (outlined action buttons on dark chrome filter card). Why: The default chrome border token is tuned for separators/dividers, so it's intentionally subtle. Outlined buttons need a stronger border to read as interactive controls. */ --theme-chrome-btn-outline-border: #FFFFFF66; /* Used in: assets/css/filter_card.css (outlined action button hover border on dark chrome filter card). */ --theme-chrome-btn-outline-border-hover: #FFFFFF80; /* Used in: assets/css/side_nav_bar.css (menu hover bg, menu icon bg), assets/css/header_card.css (header button hover), assets/css/filter_card.css (filter button hover), assets/css/alert.css (icon bg + standardized intent icon bg), assets/css/loader.css (spinner secondary segment). */ --theme-chrome-hover-bg: #37B9F11A; /* Used in: assets/css/side_nav_bar.css (active menu link background, active sub-menu item background). */ --theme-chrome-active-bg: #37B9F124; /* Used in: assets/css/app.css (.btn-primary, modal footer buttons, swap button), assets/css/header_card.css (.btn-primary), assets/css/filter_card.css (.btn-primary), assets/css/add_update_body_card.css (form action buttons), assets/css/landing_body_card.css (table action buttons), assets/css/side_nav_bar.css (brand mark gradient + active indicator colour), assets/css/alert.css (alert buttons), assets/css/loader.css (spinner segments). */ --theme-primary-btn-bg: #8739F9; /* --theme-primary-btn-bg: #8739F9; */ /*Used in: assets/css/app.css (required field asterisk). */ --theme-required-asterisk: #e40000; /* Used in: assets/css/app.css (modal/footer button hover + swap hover), assets/css/header_card.css (.btn-primary:hover), assets/css/filter_card.css (.btn-primary:hover), assets/css/add_update_body_card.css (button hover), assets/css/landing_body_card.css (table action hover), assets/css/side_nav_bar.css (logout hover), assets/css/alert.css (button hover), assets/css/loader.css (spinner segment). */ --theme-primary-btn-hover-bg: #1FA9E8; /* Used in: assets/css/app.css (.btn-primary text, modal footer buttons text), assets/css/header_card.css (.btn-primary text), assets/css/filter_card.css (.btn-primary text), assets/css/add_update_body_card.css (buttons text), assets/css/landing_body_card.css (table action text), assets/css/side_nav_bar.css (logo mark text, logout text), assets/css/alert.css (buttons text), assets/css/form_wizard.css (wizard step numbers). */ --theme-primary-btn-text: #F2F5F5; /* Table Row Flash */ --theme-row-flash-bg-primary: #a9ebc3; --theme-row-flash-bg-secondary: #d5e9dd; /* Report Row Flash */ --report-row-bg-green: #d1fae5; --report-row-bg-yellow: #fff3cd; --report-row-bg-red: #f8d7da; /* Used in: assets/css/app.css (/invoices booking groups) */ --theme-old-booking-bg: #d1fae5; /* Used in: assets/css/login.css (login page background). Replace value later with your custom login background colour. */ --theme-login-bg: #808080; --color-login-particles-dot: var(--theme-primary-btn-bg); --color-login-particles-line: var(--theme-primary-btn-text); --color-login-particles-stroke: var(--theme-primary-btn-text); /* ------------------------------------------------------------ Toast tokens (hex-only) Why: The toast design uses type colours (success/error/warning/info) for the icon + progress bar while keeping the toast surface consistent. ------------------------------------------------------------- */ --toast-bg: var(--theme-surface); --toast-text: var(--theme-body-text); --toast-title: #111827; --toast-shadow: #0000001A; --toast-success: #198754; --toast-error: #DC3545; --toast-warning: #FFC107; --toast-info: #0DCAF0; /* ------------------------------------------------------------ Alert tokens (hex-only) Why: Alerts (custom confirm/prompt) are a modal component; we separate tokens so you can tune overlay, dialog, header and buttons without hunting through alert.css. ------------------------------------------------------------- */ /* Used in: assets/css/alert.css (.app-alert-overlay background). */ --alert-overlay-bg: var(--theme-overlay-80); /* Used in: assets/css/alert.css (.app-alert-overlay z-index). */ --alert-overlay-z: 99999; /* Used in: assets/css/alert.css (.app-alert-dialog background). */ --alert-dialog-bg: var(--theme-surface); /* Used in: assets/css/alert.css (.app-alert-dialog text). */ --alert-dialog-text: var(--theme-body-text); /* Used in: assets/css/alert.css (.app-alert-dialog border). */ --alert-dialog-border: var(--theme-border); /* Used in: assets/css/alert.css (.app-alert-dialog shadow). */ --alert-dialog-shadow: var(--theme-shadow); /* Used in: assets/css/alert.css (.app-alert-header background). */ --alert-header-bg: var(--theme-chrome-bg); /* Used in: assets/css/alert.css (.app-alert-header text + title). */ --alert-header-text: var(--theme-chrome-text); /* Used in: assets/css/alert.css (.app-alert-header border-bottom). */ --alert-header-border: var(--theme-chrome-border); /* Used in: assets/css/alert.css (.app-alert-icon background). */ --alert-icon-bg: var(--theme-chrome-hover-bg); /* Used in: assets/css/alert.css (.app-alert-icon text/icon color). */ --alert-icon-text: var(--theme-chrome-text); /* Used in: assets/css/alert.css (alert intent icon colour: success). */ --alert-success: #198754; /* Used in: assets/css/alert.css (alert intent icon colour: error/danger). */ --alert-error: #DC3545; /* Used in: assets/css/alert.css (alert intent icon colour: warning). */ --alert-warning: #FFC107; /* Used in: assets/css/alert.css (alert intent icon colour: info/confirm). */ --alert-info: #0DCAF0; /* Used in: assets/css/alert.css (.app-alert-message text). */ --alert-body-text: var(--theme-body-text); /* Used in: assets/css/alert.css (.app-alert-hint muted text). */ --alert-hint-text: var(--theme-muted); /* Used in: assets/css/alert.css (.app-alert-input background). */ --alert-input-bg: var(--theme-surface); /* Used in: assets/css/alert.css (.app-alert-input text). */ --alert-input-text: var(--theme-body-text); /* Used in: assets/css/alert.css (.app-alert-input border). */ --alert-input-border: var(--theme-border); /* Used in: assets/css/alert.css (.app-alert-input focus border). */ --alert-input-focus-border: var(--theme-focus); /* Used in: assets/css/alert.css (.app-alert-input focus ring). */ --alert-input-focus-ring: var(--theme-focus-ring); /* Used in: assets/css/alert.css (.app-alert-footer background). */ --alert-footer-bg: var(--theme-chrome-bg); /* Used in: assets/css/alert.css (.app-alert-footer border-top). */ --alert-footer-border: var(--theme-chrome-border); /* Used in: assets/css/alert.css (.app-alert-btn background). */ --alert-btn-bg: var(--theme-primary-btn-bg); /* Used in: assets/css/alert.css (.app-alert-btn hover background). */ --alert-btn-hover-bg: var(--theme-primary-btn-hover-bg); /* Used in: assets/css/alert.css (.app-alert-btn text). */ --alert-btn-text: var(--theme-primary-btn-text); /* Used in: assets/css/alert.css (.app-alert-btn border). */ --alert-btn-border: var(--theme-chrome-border); /* ------------------------------------------------------------ Loader tokens (hex-only) Why: Loader overlay/spinner should be tuneable independently from primary buttons, while still defaulting to the global theme. ------------------------------------------------------------- */ /* Used in: assets/css/loader.css (.preloader-overlay background). */ --loader-overlay-bg: var(--theme-overlay-80); /* Used in: assets/css/loader.css (.preloader-overlay z-index). */ --loader-overlay-z: 9999; /* Used in: assets/css/loader.css (.loader border width). */ --loader-ring-border-width: 3px; /* Used in: assets/css/loader.css (.loader outer ring primary segment). */ --loader-ring-primary: var(--theme-primary-btn-bg); /* Used in: assets/css/loader.css (.loader outer ring secondary segment). */ --loader-ring-secondary: var(--theme-chrome-hover-bg); /* Used in: assets/css/loader.css (.loader mid ring accent segment). */ --loader-ring-accent: var(--theme-primary-btn-hover-bg); /* ------------------------------------------------------------ Table action button tokens (hex-only) Why: Table action buttons are repeated across list views; tokens allow consistent sizing and hover states without duplicating CSS. ------------------------------------------------------------- */ /* Used in: assets/css/landing_body_card.css (.table-action-btn width/height). */ --table-action-btn-width: 26px; /* Used in: assets/css/landing_body_card.css (.table-action-btn width/height). */ --table-action-btn-height: 22px; /* Used in: assets/css/landing_body_card.css (.table-action-btn border-radius). */ --table-action-btn-radius: 3px; /* Used in: assets/css/landing_body_card.css (.table-action-btn font-size). */ --table-action-btn-font-size: 0.75rem; /* Used in: assets/css/landing_body_card.css (.table-action-btn background). */ --table-action-btn-bg: var(--theme-primary-btn-bg); /* Used in: assets/css/landing_body_card.css (.table-action-btn hover background). */ --table-action-btn-hover-bg: var(--theme-primary-btn-hover-bg); /* Used in: assets/css/landing_body_card.css (.table-action-btn text). */ --table-action-btn-text: var(--theme-primary-btn-text); /* Used in: assets/css/landing_body_card.css (.table-action-btn border). */ --table-action-btn-border: var(--theme-border); /* Used in: assets/css/landing_body_card.css (.table-action-btn hover border). */ --table-action-btn-hover-border: var(--theme-primary-btn-hover-bg); /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-view background). */ --table-action-btn-view-bg: #1FA9E81A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-view hover background). */ --table-action-btn-view-hover-bg: #1FA9E833; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-view text/icon). */ --table-action-btn-view-text: #1FA9E8; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-view border). */ --table-action-btn-view-border: #1FA9E84D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-view hover border). */ --table-action-btn-view-hover-border: #1FA9E866; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-edit background). */ --table-action-btn-edit-bg: #8739F91A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-edit hover background). */ --table-action-btn-edit-hover-bg: #8739F933; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-edit text/icon). */ --table-action-btn-edit-text: #8739F9; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-edit border). */ --table-action-btn-edit-border: #8739F94D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-edit hover border). */ --table-action-btn-edit-hover-border: #8739F966; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-print background). */ --table-action-btn-print-bg: #00072D14; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-print hover background). */ --table-action-btn-print-hover-bg: #00072D24; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-print text/icon). */ --table-action-btn-print-text: #00072D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-print border). */ --table-action-btn-print-border: #00072D33; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-print hover border). */ --table-action-btn-print-hover-border: #00072D4D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-download background). */ --table-action-btn-download-bg: #4C5BFF1A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-download hover background). */ --table-action-btn-download-hover-bg: #4C5BFF33; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-download text/icon). */ --table-action-btn-download-text: #4C5BFF; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-download border). */ --table-action-btn-download-border: #4C5BFF4D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-download hover border). */ --table-action-btn-download-hover-border: #4C5BFF66; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-email background). */ --table-action-btn-email-bg: #06B6D41A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-email hover background). */ --table-action-btn-email-hover-bg: #06B6D433; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-email text/icon). */ --table-action-btn-email-text: #06B6D4; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-email border). */ --table-action-btn-email-border: #06B6D44D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-email hover border). */ --table-action-btn-email-hover-border: #06B6D466; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-pay background). */ --table-action-btn-pay-bg: #22C55E1A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-pay hover background). */ --table-action-btn-pay-hover-bg: #22C55E33; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-pay text/icon). */ --table-action-btn-pay-text: #16A34A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-pay border). */ --table-action-btn-pay-border: #22C55E4D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-pay hover border). */ --table-action-btn-pay-hover-border: #22C55E66; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-delete background). */ --table-action-btn-delete-bg: #EF44441A; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-delete hover background). */ --table-action-btn-delete-hover-bg: #EF444433; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-delete text/icon). */ --table-action-btn-delete-text: #EF4444; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-delete border). */ --table-action-btn-delete-border: #EF44444D; /* Used in: assets/css/landing_body_card.css (.table-action-btn.action-delete hover border). */ --table-action-btn-delete-hover-border: #EF444466; }