/* ============================================================ Goodfellow — Risk & Compliance Suite — DESIGN TOKENS The SINGLE source of truth for colors, spacing, radius, shadows, and motion. Every component file and every page MUST reference these tokens — no hex literals downstream. Goodfellow Finance brand palette: primary green #1a5928 · bright green #28a745 · gold #e8b800 · dark green #0d2818 ============================================================ */ :root { /* ---------------------------------------------------------- Brand — Goodfellow Finance ---------------------------------------------------------- */ --brand-blue: #1a5928; /* historical token name; now Goodfellow primary green */ --brand-orange: #28a745; /* historical token name; now canonical accent (Goodfellow bright green) */ --brand-orange-rgb: 40, 167, 69; --brand-green: #1a5928; --brand-gold: #e8b800; /* ---------------------------------------------------------- Primary / accent ramps (Goodfellow green on white surfaces) ---------------------------------------------------------- */ --primary-color: #1a5928; --primary-light: #28a745; --primary-dark: #0d2818; --accent-color: var(--brand-orange); --accent-light: #4ade80; --accent-dark: #1a5928; --success-color: #16a34a; /* status green (kept distinct from brand primary) */ --warning-color: #f59e0b; /* amber (not gold) for status */ --danger-color: #dc2626; --info-color: #0ea5e9; /* ---------------------------------------------------------- Surfaces & text ---------------------------------------------------------- */ --bg-white: #ffffff; /* modals, dropdowns, action buttons (need to stand above the page) */ --bg-page: #F2F1ED; /* the page-level canvas (body, .main-wrapper, .main-content) — warm off-white */ --bg-light: #f9fafb; /* secondary surface tint — card header gradients, hover states */ --bg-muted: #f3f4f6; /* tertiary surface — input-group-text, progress track */ /* Unified "panel" surface — cards, stat cards, data-table cards, and table headers all share the page canvas so the dashboard reads as one continuous surface (TOR §"clean decision-grade view"). Buttons, modals, and form controls deliberately stay --bg-white above this. */ --surface-bg: var(--bg-page); --text-primary: #000000; /* pure black — uniform body text across every page (esp. data tables) */ --text-secondary: #4b5563; /* mid-grey for labels, helper text */ --text-light: #9ca3af; /* placeholder / disabled */ --text-inverse: #ffffff; /* text on dark or accent bg (sidebar, hovered buttons) */ --border-color: #e5e7eb; --border-strong: #d1d5db; /* Greyscale ramp (kept for any utility usage) */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* ---------------------------------------------------------- Sidebar (PRESERVED — do not override anywhere else) ---------------------------------------------------------- */ --sidebar-bg-start: #1a5928; /* Goodfellow primary green */ --sidebar-bg-end: #0d2818; /* Goodfellow dark green */ --sidebar-bg: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%); --sidebar-text: rgba(255,255,255,0.85); --sidebar-text-hover: #ffffff; --sidebar-color: #1a5928; /* legacy alias — DO NOT REDEFINE in page CSS */ /* ---------------------------------------------------------- Brand gradients (use ONLY the ones below — never invent new) ---------------------------------------------------------- */ --primary-gradient: linear-gradient(135deg, #1a5928 0%, #28a745 100%); --accent-gradient: linear-gradient(135deg, #28a745 0%, #1a5928 100%); --success-gradient: linear-gradient(135deg, #16a34a 0%, #4ade80 100%); --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --danger-gradient: linear-gradient(135deg, #dc2626 0%, #f87171 100%); --info-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); /* Hover token used by per-page CSS that calls var(--orange-hover) */ --orange-hover: #1a5928; /* ---------------------------------------------------------- Spacing scale (4px grid) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* ---------------------------------------------------------- Radius ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ---------------------------------------------------------- Shadow scale ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 10px 30px rgba(0,0,0,0.10); --shadow-xl: 0 20px 40px rgba(0,0,0,0.15); --card-shadow: var(--shadow-sm); --card-hover-shadow: var(--shadow-md); /* ---------------------------------------------------------- Motion ---------------------------------------------------------- */ --transition-fast: all 0.15s ease; --transition-base: all 0.25s ease; --transition-slow: all 0.4s ease; /* ---------------------------------------------------------- Typography ---------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.875rem; /* 14 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 1.75rem; /* 28 */ --fs-3xl: 2rem; /* 32 */ /* ---------------------------------------------------------- Legacy aliases (kept so standalone auth / landing / tour templates continue to render). All resolve to canonical brand tokens — do NOT re-introduce off-brand colours here. ---------------------------------------------------------- */ --navy: var(--primary-color); --brand-navy: var(--primary-color); --primary: var(--primary-color); --accent: var(--accent-color); --success: var(--success-color); --info: var(--info-color); --warning: var(--warning-color); --danger: var(--danger-color); --bg: var(--bg-white); --bg-alt: var(--bg-light); --border: var(--border-color); --brand: var(--accent-color); /* Soft tinted backgrounds for inline status callouts */ --success-bg: rgba(22,163,74,0.10); --info-bg: rgba(14,165,233,0.10); --warning-bg: rgba(245,158,11,0.12); --danger-bg: rgba(220,38,38,0.10); /* Public/landing variants */ --faint: var(--gray-200); --line: var(--border-color); --gap: var(--danger-color); --gap-bg: var(--danger-bg); --cfg: var(--success-color); --cfg-bg: var(--success-bg); --beyond: var(--accent-color); --beyond-bg: rgba(var(--brand-orange-rgb), 0.10); } /* ------------------------------------------------------------ Page canvas default — warm off-white (#F2F1ED) applied at the html/body level so EVERY page that loads variables.css (including standalone auth, landing, error templates that don't extend base.html) gets the same page background. ------------------------------------------------------------ */ html, body { background: var(--bg-page) !important; background-color: var(--bg-page) !important; color: var(--text-primary) !important; font-family: var(--font-sans); min-height: 100vh; }