/* * report-theme.css * Brand / theme CSS custom properties. * Override these to white-label the tool for any client. * ───────────────────────────────────────────────────── */ :root { /* ── Brand colours ──────────────────────────────────────────── */ --brand-primary: #2563EB; /* main accent — CTA buttons, active states */ --brand-primary-dark: #1D4ED8; /* hover / pressed */ --brand-primary-light: #DBEAFE; /* tinted backgrounds */ --brand-secondary: #7C3AED; /* secondary accent — charts, highlights */ --brand-secondary-light: #EDE9FE; --brand-success: #16A34A; --brand-warning: #D97706; --brand-danger: #DC2626; /* ── Neutrals ───────────────────────────────────────────────── */ --neutral-900: #111827; --neutral-800: #1F2937; --neutral-700: #374151; --neutral-600: #4B5563; --neutral-500: #6B7280; --neutral-400: #9CA3AF; --neutral-300: #D1D5DB; --neutral-200: #E5E7EB; --neutral-100: #F3F4F6; --neutral-50: #F9FAFB; /* ── Typography ─────────────────────────────────────────────── */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --font-normal: 400; --font-medium: 500; --font-semi: 600; --font-bold: 700; /* ── Spacing ────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ── Borders & shadows ──────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05); /* ── App shell dimensions ───────────────────────────────────── */ --header-height: 64px; --sidebar-width: 0px; /* no sidebar yet — reserved for phase 3 */ --content-max-w: 1100px; /* ── Report page (used by renderer) ────────────────────────── */ --report-bg: #ffffff; --report-text: var(--neutral-800); --report-heading: var(--neutral-900); --report-accent: var(--brand-primary); --report-border: var(--neutral-200); --report-page-w: 210mm; /* A4 */ --report-page-h: 297mm; --report-gutter: 20mm; /* ── Chart palette (12-colour cycle) ───────────────────────── */ --chart-1: #2563EB; --chart-2: #7C3AED; --chart-3: #DB2777; --chart-4: #EA580C; --chart-5: #CA8A04; --chart-6: #16A34A; --chart-7: #0891B2; --chart-8: #4F46E5; --chart-9: #BE185D; --chart-10: #B45309; --chart-11: #15803D; --chart-12: #0E7490; } /* Dark-mode overrides (opt-in via class on ) */ html.dark { --neutral-900: #F9FAFB; --neutral-800: #F3F4F6; --neutral-700: #E5E7EB; --neutral-600: #D1D5DB; --neutral-500: #9CA3AF; --neutral-400: #6B7280; --neutral-300: #4B5563; --neutral-200: #374151; --neutral-100: #1F2937; --neutral-50: #111827; --report-bg: #1e2029; --report-text: #E5E7EB; }