/* ============================================================ DECARB PLUS — DESIGN SYSTEM / CSS VARIABLES Upload to: /assets/css/variables.css Load this file BEFORE style.css and BEFORE Bootstrap overrides in every page's . ============================================================ */ :root { /* ---- Brand colours (source of truth — do not hardcode hex anywhere else in the project; always reference these vars) ---- */ --color-primary: #173404; /* Deep Green — primary brand colour, headers, nav, buttons */ --color-primary-dark: #0E2102; /* Deepest Green — hover states, dark section backgrounds */ --color-accent: #5E8C1F; /* Lime Accent — CTAs, links, active states (AA-contrast safe on white) */ --color-accent-light: #97C459; /* Light Lime — hover accents, badges, chart highlights */ --color-tint: #EAF3DE; /* Warm Sand Tint — section backgrounds, card fills */ --color-graphite: #3A3F44; /* Body text colour */ --color-steel: #767D72; /* Secondary / muted text, captions */ --color-paper: #F5F6F2; /* Page background */ --color-white: #FFFFFF; /* ---- Semantic aliases (use these in components) ---- */ --color-bg: var(--color-paper); --color-surface: var(--color-white); --color-text: var(--color-graphite); --color-text-muted: var(--color-steel); --color-border: #D8E4CC; --color-success: #2E7D32; --color-warning: #B8860B; --color-danger: #A32D2D; --color-info: #2C6E9E; /* ---- Typography ---- */ --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --fs-h1: 2.25rem; /* 36px */ --fs-h2: 1.75rem; /* 28px */ --fs-h3: 1.375rem; /* 22px */ --fs-h4: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ --fs-xs: 0.75rem; /* 12px */ /* ---- Spacing scale (8px base grid) ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ---- Radius & shadow ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 3px rgba(23, 52, 4, 0.08); --shadow-md: 0 4px 12px rgba(23, 52, 4, 0.10); --shadow-lg: 0 10px 30px rgba(23, 52, 4, 0.14); /* ---- Layout ---- */ --container-max: 1200px; --navbar-height: 72px; --navbar-height-mobile: 60px; --mobile-bottom-nav-height: 64px; /* ---- EXTENDED PALETTE (added for the Colorful Enterprise upgrade) ---- These five supporting hues exist for ONE job each: category tags, chart series, KPI card variety, and status color-coding. They are NEVER used for primary brand elements (nav, logo, primary buttons, footer) — those stay on --color-primary/--color-accent above. Each hue ships as a matched trio: base / light tint (card backgrounds) / dark text (for text on the light tint, AA-contrast safe). ---- */ --color-amber: #E0A526; /* Gold/Amber — ratings, highlights, "featured" badges */ --color-amber-tint: #FBF0DC; --color-amber-text: #7A5610; --color-teal: #1B7A72; /* Teal — B2B/industrial category, secondary info states */ --color-teal-tint: #DFF0EE; --color-teal-text: #0F4A45; --color-coral: #C15B3D; /* Terracotta/Coral — fleet/logistics category, warm CTAs */ --color-coral-tint: #F7E4DD; --color-coral-text: #7A3722; --color-indigo: #3E5C99; /* Indigo/Blue — CRM/leads category, informational states */ --color-indigo-tint: #E3E8F3; --color-indigo-text: #253A63; --color-plum: #7A4870; /* Plum — export/GCC category, premium/B2B-tier accents */ --color-plum-tint: #EFE3EC; --color-plum-text: #4A2B45; /* ---- Gradients (hero sections and CTA banners ONLY — see usage rules) ---- */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%); --gradient-warm: linear-gradient(135deg, var(--color-coral) 0%, var(--color-amber) 100%); } /* ============================================================ BOOTSTRAP 5 VARIABLE OVERRIDES Include this AFTER Bootstrap's CSS so these take effect. ============================================================ */ :root { --bs-primary: var(--color-primary); --bs-primary-rgb: 23, 52, 4; --bs-secondary: var(--color-steel); --bs-success: var(--color-accent); --bs-success-rgb: 94, 140, 31; --bs-body-color: var(--color-graphite); --bs-body-bg: var(--color-paper); --bs-link-color: var(--color-accent); --bs-link-hover-color: var(--color-primary-dark); --bs-border-color: var(--color-border); } .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-dark); --bs-btn-hover-border-color: var(--color-primary-dark); --bs-btn-active-bg: var(--color-primary-dark); } .btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4d7519; --bs-btn-hover-border-color: #4d7519; } .bg-brand-tint { background-color: var(--color-tint) !important; } .bg-brand-primary { background-color: var(--color-primary) !important; } .bg-brand-dark { background-color: var(--color-primary-dark) !important; } .text-brand { color: var(--color-primary) !important; } .text-brand-accent { color: var(--color-accent) !important; } .text-muted-brand { color: var(--color-steel) !important; } /* ============================================================ EXTENDED PALETTE UTILITY CLASSES — badges, tags, KPI cards Pattern: .badge-{color} for pill-shaped tags (tint bg + text color) .kpi-{color} for dashboard KPI card backgrounds ============================================================ */ .badge-amber { background-color: var(--color-amber-tint); color: var(--color-amber-text); } .badge-teal { background-color: var(--color-teal-tint); color: var(--color-teal-text); } .badge-coral { background-color: var(--color-coral-tint); color: var(--color-coral-text); } .badge-indigo { background-color: var(--color-indigo-tint); color: var(--color-indigo-text); } .badge-plum { background-color: var(--color-plum-tint); color: var(--color-plum-text); } .badge-green { background-color: var(--color-tint); color: var(--color-primary); } .kpi-amber { background-color: var(--color-amber-tint); } .kpi-teal { background-color: var(--color-teal-tint); } .kpi-coral { background-color: var(--color-coral-tint); } .kpi-indigo { background-color: var(--color-indigo-tint); } .kpi-plum { background-color: var(--color-plum-tint); } .kpi-green { background-color: var(--color-tint); } .icon-amber { color: var(--color-amber-text); } .icon-teal { color: var(--color-teal-text); } .icon-coral { color: var(--color-coral-text); } .icon-indigo { color: var(--color-indigo-text); } .icon-plum { color: var(--color-plum-text); } .bg-gradient-primary { background: var(--gradient-primary); } .bg-gradient-accent { background: var(--gradient-accent); } .bg-gradient-warm { background: var(--gradient-warm); } /* ============================================================ USAGE RULES (comment reference — do not remove) - Primary green dominates: nav, footer, headings, primary buttons. The extended palette (amber/teal/coral/indigo/plum) NEVER touches these elements — brand identity stays disciplined even as the rest of the UI gets more colorful. - Lime accent is controlled: CTAs, active nav item, links, badges — cap accent colour usage at roughly 10-15% of any given screen. - Extended palette colors are assigned BY CATEGORY, not randomly — see the Colorful Enterprise Visual Upgrade Guide for the full category-to-color mapping (product categories, CRM lead sources, B2B tiers). Once a category is assigned a color, it keeps that color everywhere in the app — consistency is what makes this read as "colorful and considered" instead of "colorful and random." - Gradients are reserved for hero sections and CTA banners only — never on cards, buttons, or body content; overusing them undoes the enterprise-clean feel. - Never use pure black (#000) for text — use var(--color-graphite). - Never hardcode hex colours in component CSS — reference variables. ============================================================ */