/* ============================================= FLBI Dashboard Style System — Design Tokens First Legal · Business Innovation v1.0.0 ============================================= */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap'); /* ── Default: Dark (Blue) Theme ── Loaded as :root so every dashboard ships dark-first. The signature look is a near-black navy base with a saturated electric-blue primary and a teal secondary. Light theme is opt-in via [data-theme='light'] (see below). */ :root, [data-theme='dark'] { /* Typography */ --font-body: 'Satoshi', 'Helvetica Neue', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* 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; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-pill: 999px; /* Motion */ --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --sidebar-w: 220px; --topbar-h: 56px; /* Surfaces (3-tier near-black navy) */ --color-bg: #0e1116; --color-surface: #151a22; --color-surface-2: #1c222c; --color-surface-offset: #1f2630; --color-border: #242c38; --color-divider: #1c222c; /* Text */ --color-text: #e6edf3; --color-text-muted: #8a94a6; --color-text-faint: #5a6273; /* Brand & accents */ --color-primary: #5b8cff; /* Saturated electric blue */ --color-primary-hover: #2563eb; --color-primary-hl: rgba(91, 140, 255, 0.15); --color-secondary: #49d1a4; /* Teal */ --color-secondary-hl: rgba(73, 209, 164, 0.15); --color-purple: #ba68c8; /* Reserved for charting variety */ --color-purple-hl: rgba(186, 104, 200, 0.15); /* Semantic */ --color-success: #34d399; --color-success-hl: rgba(52, 211, 153, 0.15); --color-warning: #ffb454; --color-warning-hl: rgba(255, 180, 84, 0.15); --color-error: #ff6b6b; --color-error-hl: rgba(255, 107, 107, 0.15); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.50); } /* ── Light Theme (alternate) ── Inherits the same primary/secondary identity so brand stays consistent when a user toggles. Sandy-tan neutrals for warmth. */ [data-theme='light'] { --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #f3f0ec; --color-border: #d4d1ca; --color-divider: #dcd9d5; --color-text: #28251d; --color-text-muted: #7a7974; --color-text-faint: #bab9b4; --color-primary: #175895; --color-primary-hover: #0e3d6b; --color-primary-hl: rgba(23, 88, 149, 0.12); --color-secondary: #2a7a22; --color-secondary-hl: rgba(42, 122, 34, 0.12); --color-purple: #7b3ea8; --color-purple-hl: rgba(123, 62, 168, 0.12); --color-success: #2a7a22; --color-success-hl: rgba(42, 122, 34, 0.12); --color-warning: #964219; --color-warning-hl: rgba(150, 66, 25, 0.12); --color-error: #c23b3b; --color-error-hl: rgba(194, 59, 59, 0.12); --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06); --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08); --shadow-lg: 0 20px 60px oklch(0.2 0.01 80 / 0.18); } /* ── System-preference fallback ── If no [data-theme] is set on , honor the OS preference. The :root block above is already dark, so we only need to flip when the OS asks for light. Keeps dark as the true default. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #f3f0ec; --color-border: #d4d1ca; --color-divider: #dcd9d5; --color-text: #28251d; --color-text-muted: #7a7974; --color-text-faint: #bab9b4; --color-primary: #175895; --color-primary-hover: #0e3d6b; --color-primary-hl: rgba(23, 88, 149, 0.12); --color-secondary: #2a7a22; --color-secondary-hl: rgba(42, 122, 34, 0.12); --color-purple: #7b3ea8; --color-purple-hl: rgba(123, 62, 168, 0.12); --color-success: #2a7a22; --color-success-hl: rgba(42, 122, 34, 0.12); --color-warning: #964219; --color-warning-hl: rgba(150, 66, 25, 0.12); --color-error: #c23b3b; --color-error-hl: rgba(194, 59, 59, 0.12); --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06); --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08); --shadow-lg: 0 20px 60px oklch(0.2 0.01 80 / 0.18); } }