/* Design tokens for the CRM UI. Loaded before style.css. Variables only — no selectors beyond :root and the [data-bs-theme="..."] blocks below. Bootstrap 5.3 reads its own --bs-* custom properties for buttons, cards, modals, dropdowns, tables and form controls, so overriding those here reskins most of Bootstrap "for free"; style.css only needs to handle the genuinely custom bits (badges, timeline, sidebar, DataTables, etc). Theming: selects one of the three color blocks below. Everything else (typography, spacing, radius, the --bs-* overrides) is theme-agnostic and lives in :root; --bs-* values are expressed in terms of the color tokens via var(), so they repaint automatically when data-bs-theme changes — no need to duplicate them per theme. */ /* ========================================================================== Dark theme (default) ========================================================================== */ [data-bs-theme="dark"] { /* ---- Surface elevation (lighten-per-level; shadows barely read on dark bg) ---- */ --surface-0: #161a21; /* page background */ --surface-1: #1e232c; /* navbar, sidebar */ --surface-2: #252a33; /* cards, table headers */ --surface-3: #2f353f; /* modals, dropdowns, popovers */ --surface-4: #383f4a; /* hover state on surface-3, nested/raised panels */ /* ---- Borders ---- */ --border-subtle: #323844; --border-default: #3e4550; --border-strong: #505864; /* ---- Text hierarchy ---- */ --text-primary: #e6edf3; --text-secondary: #9da7b3; --text-tertiary: #6e7681; --text-disabled: #4b5158; /* ---- Accent (brand) ---- */ --accent: #3b82f6; --accent-hover: #5c96f8; --accent-active: #2f6bd1; --accent-subtle: rgba(59, 130, 246, 0.16); --accent-rgb: 59, 130, 246; /* ---- Semantic ---- */ --success: #3fb950; --success-subtle: rgba(63, 185, 80, 0.16); --success-rgb: 63, 185, 80; --warning: #d29922; --warning-subtle: rgba(210, 153, 34, 0.16); --warning-rgb: 210, 153, 34; --danger: #f85149; --danger-subtle: rgba(248, 81, 73, 0.16); --danger-rgb: 248, 81, 73; --info: #a371f7; --info-subtle: rgba(163, 113, 247, 0.16); --info-rgb: 163, 113, 247; --secondary: #7d8590; --secondary-subtle: rgba(125, 133, 144, 0.16); --secondary-rgb: 125, 133, 144; /* ---- FMCS identity colors ---- */ --fmcs-fello: #58a6ff; --fmcs-gti: #56d364; --fmcs-ppl: #e3b341; /* ---- Invoice view ---- */ --invoice-label-color: #d4af37; /* ---- Table row overlays (striping/hover tint over the surface color) ---- */ --table-stripe-overlay: rgba(255, 255, 255, 0.025); --table-hover-overlay: rgba(255, 255, 255, 0.045); } /* ========================================================================== Light theme ========================================================================== */ [data-bs-theme="light"] { /* ---- Surface elevation ---- */ --surface-0: #ffffff; /* page background */ --surface-1: #f6f8fa; /* navbar, sidebar */ --surface-2: #eaeef2; /* cards, table headers */ --surface-3: #ffffff; /* modals, dropdowns, popovers */ --surface-4: #eaeef2; /* hover state on surface-3, nested/raised panels */ /* ---- Borders ---- */ --border-subtle: #d8dee4; --border-default: #d0d7de; --border-strong: #afb8c1; /* ---- Text hierarchy ---- */ --text-primary: #1f2328; --text-secondary: #57606a; --text-tertiary: #6e7781; --text-disabled: #8c959f; /* ---- Accent (brand) ---- */ --accent: #0969da; --accent-hover: #218bff; --accent-active: #0757ba; --accent-subtle: rgba(9, 105, 218, 0.12); --accent-rgb: 9, 105, 218; /* ---- Semantic ---- */ --success: #1a7f37; --success-subtle: rgba(26, 127, 55, 0.12); --success-rgb: 26, 127, 55; --warning: #9a6700; --warning-subtle: rgba(154, 103, 0, 0.12); --warning-rgb: 154, 103, 0; --danger: #cf222e; --danger-subtle: rgba(207, 34, 46, 0.12); --danger-rgb: 207, 34, 46; --info: #8250df; --info-subtle: rgba(130, 80, 223, 0.12); --info-rgb: 130, 80, 223; --secondary: #6e7781; --secondary-subtle: rgba(110, 119, 129, 0.12); --secondary-rgb: 110, 119, 129; /* ---- FMCS identity colors ---- */ --fmcs-fello: #0969da; --fmcs-gti: #1a7f37; --fmcs-ppl: #9a6700; /* ---- Invoice view ---- */ --invoice-label-color: #9a6700; /* ---- Table row overlays (striping/hover tint over the surface color) ---- */ --table-stripe-overlay: rgba(0, 0, 0, 0.03); --table-hover-overlay: rgba(0, 0, 0, 0.05); } /* ========================================================================== Fun theme (Windows 11 / Fluent Mica) ========================================================================== */ [data-bs-theme="fun"] { /* ---- Surface elevation (Mica app background, WinUI card layers) ---- */ --surface-0: #f3f3f3; /* page background (Mica base) */ --surface-1: #f9f9f9; /* navbar, sidebar */ --surface-2: #ffffff; /* cards, table headers */ --surface-3: #ffffff; /* modals, dropdowns, popovers (flyouts) */ --surface-4: #f3f3f3; /* hover state on surface-3, nested/raised panels */ /* ---- Borders (Fluent CardStrokeColorDefault) ---- */ --border-subtle: #e5e5e5; --border-default: #d6d6d6; --border-strong: #b3b3b3; /* ---- Text hierarchy (Fluent TextFillColor tiers) ---- */ --text-primary: #1a1a1a; --text-secondary: #5d5d5d; --text-tertiary: #8a8886; --text-disabled: #b3b0ad; /* ---- Accent (Windows 11 default "Blue") ---- */ --accent: #0078d4; --accent-hover: #2b88d8; --accent-active: #005a9e; --accent-subtle: rgba(0, 120, 212, 0.12); --accent-rgb: 0, 120, 212; /* ---- Semantic (Fluent system fill colors) ---- */ --success: #0f7b0f; --success-subtle: rgba(15, 123, 15, 0.12); --success-rgb: 15, 123, 15; --warning: #9d5d00; --warning-subtle: rgba(157, 93, 0, 0.12); --warning-rgb: 157, 93, 0; --danger: #c42b1c; --danger-subtle: rgba(196, 43, 28, 0.12); --danger-rgb: 196, 43, 28; --info: #8764b8; --info-subtle: rgba(135, 100, 184, 0.12); --info-rgb: 135, 100, 184; --secondary: #5d5d5d; --secondary-subtle: rgba(93, 93, 93, 0.12); --secondary-rgb: 93, 93, 93; /* ---- FMCS identity colors ---- */ --fmcs-fello: #0078d4; --fmcs-gti: #0f7b0f; --fmcs-ppl: #9d5d00; /* ---- Invoice view ---- */ --invoice-label-color: #9d5d00; /* ---- Table row overlays (striping/hover tint over the surface color) ---- */ --table-stripe-overlay: rgba(0, 0, 0, 0.03); --table-hover-overlay: rgba(0, 0, 0, 0.05); } /* ========================================================================== Theme-agnostic tokens (typography, spacing, radius) + Bootstrap overrides ========================================================================== */ :root { /* ---- Typography ---- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Spacing (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-default); /* ---- Bootstrap 5.3 variable overrides ---- */ --bs-body-bg: var(--surface-0); --bs-body-color: var(--text-primary); --bs-body-font-family: var(--font-sans); --bs-border-color: var(--border-default); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-pill: var(--radius-pill); --bs-heading-color: var(--text-primary); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color-rgb: var(--accent-rgb); --bs-code-color: var(--info); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-primary-text-emphasis: var(--accent-hover); --bs-primary-bg-subtle: var(--accent-subtle); --bs-primary-border-subtle: var(--accent); --bs-success: var(--success); --bs-success-rgb: var(--success-rgb); --bs-success-bg-subtle: var(--success-subtle); --bs-warning: var(--warning); --bs-warning-rgb: var(--warning-rgb); --bs-warning-bg-subtle: var(--warning-subtle); --bs-danger: var(--danger); --bs-danger-rgb: var(--danger-rgb); --bs-danger-bg-subtle: var(--danger-subtle); --bs-info: var(--info); --bs-info-rgb: var(--info-rgb); --bs-info-bg-subtle: var(--info-subtle); --bs-secondary: var(--secondary); --bs-secondary-rgb: var(--secondary-rgb); --bs-tertiary-bg: var(--surface-1); --bs-secondary-bg: var(--surface-2); --bs-emphasis-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-tertiary); --bs-card-bg: var(--surface-2); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: var(--surface-2); --bs-card-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-striped-bg: var(--table-stripe-overlay); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: var(--table-hover-overlay); --bs-table-hover-color: var(--text-primary); --bs-table-border-color: var(--border-subtle); --bs-modal-bg: var(--surface-3); --bs-modal-color: var(--text-primary); --bs-modal-header-border-color: var(--border-subtle); --bs-modal-footer-border-color: var(--border-subtle); --bs-dropdown-bg: var(--surface-3); --bs-dropdown-color: var(--text-primary); --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-bg: var(--surface-4); --bs-dropdown-link-hover-color: var(--text-primary); --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-border-color: var(--border-default); --bs-form-control-bg: var(--surface-1); --bs-form-control-color: var(--text-primary); --bs-focus-ring-color: var(--accent-subtle); }