/* ========================================================== Mekora theme: every color of the app lives here. Look: "Graphite" — a premium car-site feel on a mid-grey graphite base (not black): cards one shade lighter than the page, light text, pill buttons, and orange only on the main action of each screen. Change a value below and the whole app follows (styles.css and receipt.css only use these names). Logo and icon files are in public/brand/. Contrast (WCAG AA): text needs 4.5:1 against its background (3:1 when large), icons 3:1. tests/contrast.test.js checks the main pairs below. Paper: printed sheets, the signing pad, the Recibo PDF and the emails are dark text on white (--paper-*). The PDFs and emails read those values from this file (src/lib/brand.js), so keep plain #hex values there. ========================================================== */ :root { color-scheme: dark; /* ---- The one accent: orange, only on the main action button of each screen. Defined only here. ---- */ --accent: #F5A623; --accent-hover: #FFB53D; --accent-text: #1A1C1F; /* text and icons on the orange */ --accent-strong: #9A6108; /* orange dark enough to read as text on paper (PDFs) */ /* ---- Page and cards ---- */ --bg: #45484E; /* page: mid-grey graphite */ --bg-end: #3F4247; /* the page darkens slightly towards the bottom */ --card: #52565D; /* cards: one shade lighter than the page */ --column: #4B4F55; /* Tablero columns: between the page and the cards */ --lane: #4A4D53; /* Tablero (pilot): the quiet lane behind each column's cards */ --divider: rgba(255, 255, 255, .09); /* hairlines inside cards and between the day's numbers */ --text: #F3F4F6; /* main text */ --muted: #D6DADE; /* secondary text (4.5:1 or more on every surface) */ --faint: #D0D5DA; /* hints, timestamps, placeholders */ --ink: #1A1C1F; /* dark text on light fills (selected pills, the current step) */ --border: #62666D; /* card edges */ --brand-dark: #F3F4F6; /* the strongest mark: selected chips and steps (light pill + --ink text), totals lines */ --brand-dark-2: #D2D6DB; /* secondary mark: icons in tiles, small labels */ /* ---- Derived neutrals ---- */ --border-strong: #7C8189; /* inputs, outlines */ --border-hover: #9AA0A8; --surface: #4A4E54; /* inner panels inside cards (a step darker) */ --surface-2: #575B62; /* hover backgrounds, tracks */ --surface-3: #575B62; /* card headers and footers */ --input: #3E4146; /* fields: set into the card */ --avatar: #6A6F77; /* round initials */ /* ---- Buttons: main = orange (above); secondary = grey outline pill; minor = text or icon only; destructive = red ---- */ --btn-bg: transparent; --btn-bg-end: transparent; --btn-border: #A9AEB5; --btn-border-hover: #D6DADE; --btn-hover: rgba(255, 255, 255, .07); --btn-shadow: none; --btn-dark: transparent; /* a section's own "save": a secondary button too */ --btn-dark-hover: rgba(255, 255, 255, .07); --danger-solid: #C93A3A; /* destructive buttons (white text, 5:1) */ --danger-solid-hover: #B32F2F; --neutral-soft: #474B51; /* icon tiles, soft badges (set into the card) */ --selected: var(--brand-dark); --selected-soft: #4A5868; /* the selected row (blue-grey) */ --link: #C3DAF7; --link-underline: #6F8FB3; --focus: #9CC3F5; --ring: 0 0 0 3px rgba(156, 195, 245, .35); --plate-bg: #F3F4F6; /* license plates stay white */ --plate-text: #1A1C1F; --plate-blue: #1F4E9C; /* ---- Top bar (and the dark panels: login, camera button, archive notice) ---- */ --sidebar-bg: #2F3237; --sidebar-bg-end: #2A2C31; --sidebar-text: #E4E6E9; --sidebar-muted: #B3B9C0; --sidebar-hover: rgba(255, 255, 255, .08); --sidebar-active: #F3F4F6; /* the open section is a light pill */ --sidebar-active-text: #1A1C1F; --sidebar-line: rgba(255, 255, 255, .12); --sidebar-marker: #F3F4F6; --sidebar-badge-bg: #F3F4F6; --sidebar-badge-text: #1A1C1F; /* ---- Feedback (text tints on dark backgrounds) ---- */ --success: #8CDEAC; --success-soft: #3F584E; --success-text: #8CDEAC; --success-border: #5E8C74; --success-panel: #45564F; --warning: #F5C669; --warning-soft: #5D5544; --warning-text: #F5C669; --warning-border: #8C7A50; --info-soft: #425061; --info-text: #B4D1F4; /* Errors are a soft red box with a warning icon, so they never look like a button. */ --danger: #F8C1BC; --danger-soft: #5C484A; --danger-text: #F8C1BC; --danger-border: #8C5E5E; --whatsapp: #1C7F46; --whatsapp-hover: #166B3C; --whatsapp-text: #8CDEAC; /* the WhatsApp icon on outline buttons */ --whatsapp-soft: #3F584E; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22); --shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 18px 36px -22px rgba(0, 0, 0, .6); --shadow-lg: 0 20px 44px -18px rgba(0, 0, 0, .65); --shadow-accent: 0 6px 18px -8px rgba(245, 166, 35, .55); /* ---- Order statuses: --status- is the dot, -soft the badge, -text the label (and icons) ---- */ --status-draft: #94A3B8; --status-draft-soft: #4C5159; --status-draft-text: #C5CDD9; --status-received: #A7B1BF; --status-received-soft: #4F545A; --status-received-text: #C7CDD6; --status-assigned: #5B9BE6; --status-assigned-soft: #425061; --status-assigned-text: #B4D1F4; --status-inspection: #A58BF0; --status-inspection-soft: #4F4D63; --status-inspection-text: #D4C7F8; --status-diagnosis: #8790F5; --status-diagnosis-soft: #4A4E64; --status-diagnosis-text: #C5CAFA; --status-awaiting_approval: #F2B843; --status-awaiting_approval-soft: #5D5544; --status-awaiting_approval-text: #F5C669; --status-changes_requested: #F28C52; --status-changes_requested-soft: #5D4D47; --status-changes_requested-text: #F8C1A2; --status-approved: #34C3B4; --status-approved-soft: #3B5758; --status-approved-text: #89DCD4; --status-in_repair: #2BB3A4; --status-in_repair-soft: #395455; --status-in_repair-text: #95D9D2; --status-awaiting_parts: #D9A441; --status-awaiting_parts-soft: #585143; --status-awaiting_parts-text: #E9CA91; --status-ready: #4CCB7E; --status-ready-soft: #3F584E; --status-ready-text: #8CDEAC; --status-delivered: #3FAE6A; --status-delivered-soft: #3D534B; --status-delivered-text: #A7DABA; --status-cancelled: #E07A72; --status-cancelled-soft: #5A4A4C; --status-cancelled-text: #F1C2BE; /* ---- Sections of the order page: a thin top line, the icon and a faint wash behind the title ---- */ --sec-request: #B4D1F4; --sec-request-soft: #425061; /* Lo que pide el cliente */ --sec-diagnosis: #D4C7F8; --sec-diagnosis-soft: #4F4D63; /* Diagnóstico */ --sec-checkin: #95D9D2; --sec-checkin-soft: #395455; /* Ingreso */ --sec-estimate: #EBC883; --sec-estimate-soft: #5A5243; /* Cotización */ --sec-payments: #8CDEAC; --sec-payments-soft: #3F584E; /* Pagos */ --sec-signatures: #C7CDD6; --sec-signatures-soft: #4F545A; /* Hojas y firmas */ /* ---- Actividad: the icon of each kind of entry ---- */ --event-cancel: var(--status-cancelled-text); --event-cancel-soft: var(--status-cancelled-soft); --event-payment: #8CDEAC; --event-payment-soft: #3F584E; --event-signature: #B4D1F4; --event-signature-soft: #425061; --event-note: #C7CDD6; --event-note-soft: #4F545A; --event-other: #8A9097; /* ---- Roles (badges) ---- */ --role-owner: #E4E6E9; --role-owner-soft: #575A5F; --role-manager: #B4D1F4; --role-manager-soft: #425061; --role-advisor: #8CDEAC; --role-advisor-soft: #3F584E; --role-mechanic: #D4C7F8; --role-mechanic-soft: #4F4D63; /* ---- Ajustes tiles: a colored badge behind each icon ---- */ --tile-blue: #425061; --tile-blue-icon: #CFE1F8; --tile-teal: #395455; --tile-teal-icon: #BEEAE5; --tile-green: #3F584E; --tile-green-icon: #C3EBD1; --tile-violet: #4F4D63; --tile-violet-icon: #DCD3FA; --tile-slate: #575B62; --tile-slate-icon: #E4E6E9; --tile-rose: #5C484A; --tile-rose-icon: #F6CDD3; /* ---- Charts (dashboards): series colors in fixed order ---- */ --chart-1: #8EC0F5; /* blue: first series (income, sales, sign-ups) */ --chart-2: #F2A08A; /* coral: second series (cancellations) */ --chart-grid: #62666D; --chart-tick: #D0D5DA; /* ---- Paper: printed sheets, the signing pad, the Recibo PDF and the emails ---- */ --paper-bg: #FFFFFF; --paper-text: #1D232B; --paper-text-2: #33404F; --paper-muted: #4B5563; --paper-faint: #56606C; --paper-border: #D9DEE4; --paper-border-strong: #B9C1CA; --paper-surface: #F1F3F6; --paper-surface-2: #E3E7EC; --paper-accent: #9A6108; --paper-link: #255E99; /* ---- Shape and motion ---- */ --radius: 20px; --radius-sm: 12px; --pill: 999px; --ease: cubic-bezier(.2, .7, .3, 1); } /* Paper scope: the sheets and the signing pad read like printed paper (dark on white), inside the dark app. */ .receipt, .sign-pad-card, .paper { color-scheme: light; color: var(--paper-text); /* text that doesn't set its own color inherits the paper ink, not the app's light text */ --card: var(--paper-bg); --text: var(--paper-text); --muted: var(--paper-muted); --faint: var(--paper-faint); --border: var(--paper-border); --border-strong: var(--paper-border-strong); --border-hover: #8A949E; --surface: var(--paper-surface); --surface-2: var(--paper-surface-2); --surface-3: var(--paper-surface); --input: #FFFFFF; --brand-dark: var(--paper-text); --brand-dark-2: var(--paper-text-2); --neutral-soft: var(--paper-surface-2); --link: var(--paper-link); --link-underline: #8FAAC6; --focus: #2F6FB0; --ring: 0 0 0 3px rgba(47, 111, 176, .25); --btn-border: #8A949E; --btn-border-hover: #4B5563; --btn-hover: rgba(0, 0, 0, .05); --success-text: #166B3C; --success-soft: #E5F5EC; --success-border: #BCE3CB; --success-panel: #F1FAF5; --warning-text: #8A5A0A; --warning-soft: #FEF4E1; --warning-border: #F2D59B; --danger: #B42318; --danger-text: #8F1D14; --danger-soft: #FDECEC; --danger-border: #F4C7C3; --shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 18px 36px -22px rgba(0, 0, 0, .55); }