/* ============================================================ DESIGN SYSTEM v2 - CyberGuardian Solutions Tactical tech aesthetic. Dark-dominant. Command-center inspired. MAINTAINER NOTES: - All brand colors live here. Change --brand-accent to rebrand. - Dark theme is default. Light theme overrides below. - Font imports are in HTML to avoid FOUT. ============================================================ */ :root { /* Brand Palette */ --brand-primary: #0a0f1a; --brand-deep: #060a12; --brand-surface: #0e1424; --brand-surface-raised: #131a2e; --brand-surface-hover: #182038; --brand-accent: #00d4ff; --brand-accent-dim: rgba(0, 212, 255, 0.12); --brand-accent-glow: rgba(0, 212, 255, 0.35); --brand-warm: #f0b429; --brand-warm-dim: rgba(240, 180, 41, 0.12); /* Surfaces */ --bg-body: #070b14; --bg-surface: var(--brand-surface); --bg-surface-alt: #0b1120; --bg-elevated: var(--brand-surface-raised); --bg-overlay: rgba(6, 10, 18, 0.92); /* Text */ --text-primary: #e8ecf4; --text-secondary: #8a94a8; --text-muted: #4d5770; --text-accent: var(--brand-accent); --text-warm: var(--brand-warm); /* Borders */ --border-default: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.03); --border-accent: rgba(0, 212, 255, 0.2); --border-focus: var(--brand-accent); /* Status */ --status-success: #10b981; --status-warning: #f59e0b; --status-error: #ef4444; /* Shadows & Glows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7); --glow-accent: 0 0 20px rgba(0, 212, 255, 0.15); --glow-accent-strong: 0 0 40px rgba(0, 212, 255, 0.25); /* Typography - Outfit (body), Playfair Display (display), IBM Plex Mono (code/labels) */ --font-body: 'Outfit', system-ui, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --font-mono: 'IBM Plex Mono', 'Fira Code', monospace; /* Type Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem; --text-6xl: 4.25rem; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing - 4px base grid */ --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; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Layout */ --container-xl: 1200px; /* Radius */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px; /* Transitions */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Z-index layers */ --z-base: 1; --z-sticky: 200; --z-overlay: 300; } /* --- Light Theme Override --- */ [data-theme="light"] { --bg-body: #f0f2f5; --bg-surface: #ffffff; --bg-surface-alt: #f7f8fa; --bg-elevated: #ffffff; --bg-overlay: rgba(255, 255, 255, 0.92); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-accent: #0369a1; --text-warm: #b45309; --brand-accent: #0284c7; --brand-accent-dim: rgba(2, 132, 199, 0.08); --brand-accent-glow: rgba(2, 132, 199, 0.2); --brand-warm: #b45309; --brand-warm-dim: rgba(180, 83, 9, 0.08); --brand-surface: #ffffff; --brand-surface-raised: #f8fafc; --brand-surface-hover: #f1f5f9; --border-default: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.04); --border-accent: rgba(2, 132, 199, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1); --glow-accent: 0 0 20px rgba(2, 132, 199, 0.08); --glow-accent-strong: 0 0 40px rgba(2, 132, 199, 0.12); } /* --- System Preference Fallback --- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-body: #f0f2f5; --bg-surface: #ffffff; --bg-surface-alt: #f7f8fa; --bg-elevated: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-accent: #0369a1; --brand-accent: #0284c7; --brand-accent-dim: rgba(2, 132, 199, 0.08); --brand-surface: #ffffff; --brand-surface-raised: #f8fafc; --brand-surface-hover: #f1f5f9; --border-default: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.04); --border-accent: rgba(2, 132, 199, 0.2); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --glow-accent: 0 0 20px rgba(2, 132, 199, 0.08); } }