/* ═══════════════════════════════════════════════════════════════ BatFast OMS — Design Tokens (2026 rebrand) Product palette: Brand Blue chrome + one Tiger Orange shout. Scarlet/cherry reserved for the wordmark + danger semantics. Consumed by brand.css (Bootstrap 5.3 underneath). ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Monte Stella'; src: url("../fonts/monte_stella_med_italic.05103a5edc15.ttf") format('truetype'); font-style: italic; font-weight: 500; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat-regular.787ef76fe0a7.ttf") format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat-semibold.86a9b302417c.ttf") format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat-bold.71d1c5f4d2e5.ttf") format('truetype'); font-weight: 700; font-display: swap; } :root { /* ── Brand core ──────────────────────────────────────────── */ --bf-blue: #0F3B52; /* Brand Blue — chrome, headers */ --bf-blue-deep: #0A2A3C; /* hover / pressed chrome */ --bf-blue-light: #4881B1; /* supporting blue */ --bf-blue-tint: #E8EFF4; /* selected rows, soft fills */ --bf-orange: #EC6533; /* Tiger Orange — THE accent */ --bf-orange-deep: #C84F22; /* hover */ --bf-orange-tint: #FDEFE8; /* soft fill */ --bf-scarlet: #C20736; /* logo + danger only */ --bf-cherry: #971005; /* logo + danger hover */ /* ── Neutrals ────────────────────────────────────────────── */ --bf-graphite: #2E2D2C; /* default text */ --bf-muted: #66707A; /* secondary text */ --bf-disabled: #B9B9B9; --bf-border: #D5DCDF; --bf-border-strong: #AEBCC2; --bf-surface: #FFFFFF; --bf-surface-alt: #F8F8F8; --bf-bg: #EFF2F3; /* app canvas */ /* ── Semantic ────────────────────────────────────────────── */ --bf-success: #137A5B; /* AA on white; brand green deepened */ --bf-success-bright:#1BA178; --bf-success-tint: #E1F8F0; --bf-danger: #C20736; --bf-danger-tint: #FBE4EA; --bf-warning: #B97A00; /* AA text-on-tint */ --bf-warning-bright:#FABC48; --bf-warning-tint: #FCF3DE; --bf-gold: #D19205; --bf-pink: #E30B5C; /* Shot / Social colourway */ --bf-pink-deep: #B80949; --bf-pink-tint: #FCE3EC; --bf-indigo: #424BB2; /* logistics family */ --bf-indigo-deep: #2A3180; --bf-indigo-tint: #E7E9F8; --bf-steel: #6EA2CE; /* Legacy aliases (pre-2026 stylesheet variables still referenced by older inline styles) — mapped onto the new palette. */ --bf-crimson: #C20736; --bf-navy: #0F3B52; --bf-light: #EFF2F3; --bf-text: #2E2D2C; --bf-white: #FFFFFF; /* ── Type ────────────────────────────────────────────────── */ --ff-display: 'Monte Stella', Georgia, serif; /* italic uppercase */ --ff-body: 'Montserrat', system-ui, sans-serif; --fs-title: 1.75rem; /* page titles (display face) */ --fs-h2: 1.125rem; /* card / section heads */ --fs-body: .875rem; --fs-table: .85rem; --fs-small: .78rem; --fs-micro: .68rem; /* kickers, column labels */ --ls-kicker: .09em; /* ── Geometry ────────────────────────────────────────────── */ --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --touch: 44px; /* ── Elevation (flat by default; hard offset = brand pop) ── */ --sh-card: 0 1px 2px rgba(15,59,82,.07); --sh-raised: 0 4px 14px rgba(15,59,82,.13); --sh-modal: 0 18px 50px rgba(10,42,60,.35); --sh-pop: 6px 8px 0 rgba(15,59,82,.10); /* score-card drop */ /* ── Motion ──────────────────────────────────────────────── */ --ease-standard: cubic-bezier(.4,0,.2,1); --ease-overshoot: cubic-bezier(.68,-.55,.265,1.55); --ease-bounce: cubic-bezier(.8,.5,.2,1.4); /* ════════════════════════════════════════════════════════════ STATUS SYSTEM — "Phase families" 5 phase hues; early states in a phase are tinted, the closing state of a phase is solid. Read the phase from the hue, the progress from the weight. All pairs pass WCAG AA (≥4.5:1). Mapped onto the REAL 16-state OMS pipeline + cancelled. ──────────────────────────────────────────────────────────── */ /* phase hues */ --ph-commercial: #2D5E8C; /* steel blue */ --ph-build: #B5481E; /* tiger family, AA-deepened */ --ph-qc: #8A6203; /* gold */ --ph-logistics: #424BB2; /* indigo */ --ph-install: #B80949; /* raspberry */ --ph-live: #137A5B; /* green */ /* state → bg / fg (one pair per real pipeline status) */ --st-draft-bg: #FFFFFF; --st-draft-fg: #5C6B72; --st-draft-bd: #AEBCC2; --st-commercial_review-bg: #E3EDF7; --st-commercial_review-fg: #2D5E8C; --st-approved-bg: #2D5E8C; --st-approved-fg: #FFFFFF; --st-ordering-bg: #FDEAE1; --st-ordering-fg: #9E3D12; --st-assembly-bg: #B5481E; --st-assembly-fg: #FFFFFF; --st-qc_assembly-bg: #FBF0D4; --st-qc_assembly-fg: #7A5500; --st-packed-bg: #E7E9F8; --st-packed-fg: #32398F; --st-shipped-bg: #424BB2; --st-shipped-fg: #FFFFFF; --st-on_site-bg: #2A3180; --st-on_site-fg: #FFFFFF; --st-installation-bg: #FCE0EB; --st-installation-fg: #9C0A40; --st-qc_installation-bg: #8A6203; --st-qc_installation-fg: #FFFFFF; --st-commissioned-bg: #B80949; --st-commissioned-fg: #FFFFFF; --st-training-bg: #8F0735; --st-training-fg: #FFFFFF; --st-go_live-bg: #137A5B; --st-go_live-fg: #FFFFFF; --st-qc_post_go_live-bg: #F3E3AE; --st-qc_post_go_live-fg: #6B4B00; --st-complete-bg: #0E5F46; --st-complete-fg: #FFFFFF; --st-cancelled-bg: #ECEEEF; --st-cancelled-fg: #5C6B72; /* ── Proposition colourways (sub-brand mapping) ──────────── */ --prop-social: #E30B5C; /* Cricket Social / Baseball Social / Shot */ --prop-blue: #0F3B52; /* Perform / Smart Play */ --prop-tour: #1BA178; /* Tour */ /* ── QC results ──────────────────────────────────────────── */ --qc-pass: #137A5B; --qc-fail: #C20736; --qc-pending: #66707A; /* ── Lead-time severity ──────────────────────────────────── */ --lt-ok: #137A5B; --lt-warn: #B97A00; --lt-crit: #C20736; /* ── Chart palette (Reports) ─────────────────────────────── */ --chart-1: #0F3B52; --chart-2: #EC6533; --chart-3: #4881B1; --chart-4: #1BA178; --chart-5: #D19205; --chart-6: #E30B5C; --chart-7: #424BB2; --chart-8: #6EA2CE; } /* ════════════════════════════════════════════════════════════ WORKSHOP MODE — dark, high-contrast, glanceable across a room. Toggled by body.workshop (hard-hat switch in navbar). ════════════════════════════════════════════════════════════ */ body.workshop { --bf-bg: #0A2230; --bf-surface: #11334A; --bf-surface-alt: #0D2A3D; --bf-graphite: #F2F6F8; --bf-muted: #9FB6C2; --bf-border: #1E4860; --bf-border-strong: #2D5E7C; --bf-blue-tint: #173E58; --bf-orange-tint: #4A2415; --bf-light: #0A2230; --bf-text: #F2F6F8; --sh-card: 0 1px 2px rgba(0,0,0,.4); --sh-raised: 0 6px 18px rgba(0,0,0,.5); --st-draft-bg: transparent; --st-draft-fg: #B8C9D2; --st-draft-bd: #4A6B7E; --st-commercial_review-bg:#1C4666; --st-commercial_review-fg:#A8CDEC; --st-ordering-bg:#5A2A12; --st-ordering-fg:#FFC4A6; --st-qc_assembly-bg:#4D3D08; --st-qc_assembly-fg:#FFDF8E; --st-packed-bg:#272D6B; --st-packed-fg:#C3C8F0; --st-installation-bg:#5E0B2B; --st-installation-fg:#FFB7D0; --st-qc_post_go_live-bg:#4D3D08; --st-qc_post_go_live-fg:#FFDF8E; --st-cancelled-bg:#1C3849; --st-cancelled-fg:#9FB6C2; }