/* === Expert-Suite Theme — SEC Design System === */ /* Referenced by index.html — loaded before React mounts */ /* Mirrors src/styles/global.css tokens for pre-hydration styling */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Plus+Jakarta+Sans:wght@500;900&display=swap'); :root { /* Brand */ --sec-coral: #EB5E55; --sec-coral-hover: #d14a40; --sec-on-coral: #FFFFFF; --sec-midnight: #121633; --sec-on-midnight: #FFFFFF; --sec-obsidian: #0F0F12; --sec-on-obsidian: #CBD5E1; --sec-accent: #5E5CE6; --sec-success: #047857; --sec-warning: #92400c; --sec-error: #EF4444; --sec-border: #1E293B; --sec-text-muted: #94A3B8; --sec-text-dim: #64748B; --sec-hover: #1E293B; --sec-input-bg: #0F0F12; /* Typography */ --sec-font-display: 'Montserrat', system-ui, sans-serif; --sec-font-interface: 'Plus Jakarta Sans', system-ui, sans-serif; --sec-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Shapes */ --sec-radius-sm: 8px; --sec-radius-md: 12px; --sec-radius-lg: 24px; --sec-radius-xl: 32px; --sec-radius-full: 9999px; /* Spacing (8px grid) */ --sec-space-xs: 4px; --sec-space-sm: 8px; --sec-space-md: 16px; --sec-space-lg: 24px; --sec-space-xl: 32px; --sec-space-xxl: 48px; --sec-space-xxxl: 64px; /* Shadows */ --sec-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3); --sec-shadow-dialog: 0 20px 40px rgba(0, 0, 0, 0.4); --sec-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); /* Glassmorphism */ --sec-glass-bg: rgba(15, 15, 18, 0.6); --sec-glass-blur: 12px; --sec-glass-border: 1px solid rgba(255, 255, 255, 0.08); } /* ============================================================ LIGHT MODE OVERRIDES — [data-theme="light"] on ============================================================ */ [data-theme="light"] { --sec-midnight: #FFFFFF; --sec-on-midnight: #1a202c; --sec-obsidian: #FAFAF9; --sec-on-obsidian: #4a5568; --sec-border: #E2E8F0; --sec-hover: #F1F5F9; --sec-input-bg: #FFFFFF; --sec-text-muted: #64748B; --sec-text-dim: #94A3B8; --sec-warning-bg: #FEF3C7; --sec-warning: #92400C; --sec-shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.08); --sec-shadow-dialog: 0 12px 32px rgba(0, 0, 0, 0.12); --sec-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06); --sec-glass-bg: rgba(255, 255, 255, 0.72); --sec-glass-border: 1px solid rgba(0, 0, 0, 0.06); } body { margin: 0; padding: 0; background: var(--sec-midnight); color: var(--sec-on-midnight); font-family: var(--sec-font-interface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent FOUC — hide root until React hydrates */ #root:empty { opacity: 0; } #root:not(:empty) { opacity: 1; transition: opacity 0.15s; }