/*! WiFiFlow Design System — Single Source of Truth * All colors, typography, spacing, and component tokens. * Every page (dashboard, standalone, captive portal) imports this file. */ :root { /* ── Brand Colors ── */ --wf-primary: #1e3a8a; --wf-primary-hover: #1e40af; --wf-primary-light: #3b82f6; --wf-primary-bg: #e0f2fe; /* Header chrome (separate from interactive primary) */ --wf-header-bg: #1e3a8a; --wf-header-fg: #ffffff; --wf-accent: #14b8a6; --wf-accent-hover: #0d9488; --wf-accent-light: #99f6e4; --wf-accent-bg: #f0fdfa; /* ── Semantic Colors ── */ --wf-success: #10b981; --wf-success-bg: #ecfdf5; --wf-success-text: #065f46; --wf-warning: #f59e0b; --wf-warning-bg: #fffbeb; --wf-warning-text: #92400e; --wf-danger: #ef4444; --wf-danger-bg: #fef2f2; --wf-danger-text: #991b1b; --wf-info: #3b82f6; --wf-info-bg: #eff6ff; --wf-info-text: #1e40af; /* ── Neutrals ── */ --wf-text: #1f2937; --wf-text-secondary: #4b5563; --wf-text-muted: #596370; --wf-text-light: #737b8b; --wf-bg: #f8fafc; --wf-bg-alt: #f1f5f9; --wf-surface: #ffffff; --wf-border: #e5e7eb; --wf-border-light: #f3f4f6; /* ── Charts ── */ --wf-chart-grid: rgba(0, 0, 0, 0.08); --wf-chart-text: #4b5563; --wf-chart-muted: #9ca3af; --wf-chart-palette-1: #3b82f6; --wf-chart-palette-2: #14b8a6; --wf-chart-palette-3: #f59e0b; --wf-chart-palette-4: #ef4444; --wf-chart-palette-5: #8b5cf6; /* ── Typography ── */ --wf-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --wf-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --wf-font-size-xs: 0.8125rem; --wf-font-size-sm: 0.875rem; --wf-font-size-base: 1rem; --wf-font-size-lg: 1.125rem; --wf-font-size-xl: 1.25rem; --wf-font-size-2xl: 1.5rem; --wf-font-size-3xl: 1.875rem; --wf-font-size-4xl: 2.25rem; --wf-line-height: 1.6; --wf-heading-weight: 700; /* ── Spacing ── */ --wf-space-xs: 0.25rem; --wf-space-sm: 0.5rem; --wf-space-md: 1rem; --wf-space-lg: 1.5rem; --wf-space-xl: 2rem; --wf-space-2xl: 3rem; /* ── Borders & Radius ── */ --wf-radius-sm: 0.375rem; --wf-radius-md: 0.5rem; --wf-radius-lg: 0.75rem; --wf-radius-xl: 1rem; --wf-radius-full: 9999px; /* ── Shadows ── */ --wf-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --wf-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); --wf-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* ── Transitions ── */ --wf-transition: 0.2s ease; --wf-transition-slow: 0.3s ease; /* ── Layout ── */ --wf-sidebar-width: 260px; --wf-sidebar-mini-width: 80px; --wf-header-height: 64px; --wf-footer-height: 56px; } /* ── Dark theme (toggle via data-theme / data-bs-theme on ) ── */ [data-theme="dark"], [data-bs-theme="dark"] { --wf-primary: #60a5fa; --wf-primary-hover: #93c5fd; --wf-primary-light: #bfdbfe; --wf-primary-bg: rgba(59, 130, 246, 0.16); /* Header chrome: slate, not interactive sky-blue primary */ --wf-header-bg: #0f172a; --wf-header-fg: #f8fafc; --wf-accent: #2dd4bf; --wf-accent-hover: #5eead4; --wf-accent-light: #99f6e4; --wf-accent-bg: rgba(45, 212, 191, 0.12); --wf-success: #34d399; --wf-success-bg: rgba(16, 185, 129, 0.14); --wf-success-text: #6ee7b7; --wf-warning: #fbbf24; --wf-warning-bg: rgba(245, 158, 11, 0.14); --wf-warning-text: #fcd34d; --wf-danger: #f87171; --wf-danger-bg: rgba(239, 68, 68, 0.14); --wf-danger-text: #fca5a5; --wf-info: #60a5fa; --wf-info-bg: rgba(59, 130, 246, 0.14); --wf-info-text: #93c5fd; --wf-text: #f1f5f9; --wf-text-secondary: #cbd5e1; --wf-text-muted: #a8b6c8; --wf-text-light: #94a3b8; --wf-bg: #0f172a; --wf-bg-alt: #1e293b; --wf-surface: #1e293b; --wf-border: #334155; --wf-border-light: #293548; --wf-chart-grid: rgba(255, 255, 255, 0.08); --wf-chart-text: #cbd5e1; --wf-chart-muted: #94a3b8; --wf-chart-palette-1: #60a5fa; --wf-chart-palette-2: #2dd4bf; --wf-chart-palette-3: #fbbf24; --wf-chart-palette-4: #f87171; --wf-chart-palette-5: #a78bfa; --wf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35); --wf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35); --wf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.35); --wf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.4); color-scheme: dark; }