/* ============================================================ ROOT.CSS — Design System Foundation SaaS Espejos Panel v2.0 | Mobile-First | Dark/Light Ready ============================================================ */ :root { /* --- Brand Palette --- */ --brand-primary: #6366F1; /* Indigo vibrante — acción principal */ --brand-primary-dim: #4F46E5; /* Hover / pressed */ --brand-accent: #22D3EE; /* Cyan eléctrico — highlights */ --brand-success: #10B981; /* Verde esmeralda */ --brand-warning: #F59E0B; /* Ámbar */ --brand-danger: #EF4444; /* Rojo limpio */ /* --- Dark Mode (Default) --- */ --bg: #0A0A0F; /* Negro profundo — fondo base */ --bg-2: #111118; /* Fondo de sidebar / paneles */ --surface: #16161F; /* Cards y modales */ --surface-2: #1E1E2A; /* Surface elevado */ --surface-3: #252535; /* Hover states */ --border: #2A2A3D; /* Bordes sutiles */ --border-dim: #1F1F30; /* Bordes mínimos */ /* --- Typography --- */ --text: #F0F0FF; /* Texto principal */ --text-2: #9090A8; /* Texto secundario */ --text-3: #5A5A72; /* Placeholder / disabled */ --text-inv: #0A0A0F; /* Texto sobre fondo claro */ /* --- Font Stack --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* --- Type Scale (rem) --- */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1.0625rem; /* 17px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ /* --- Font Weights --- */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- Spacing Scale --- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ /* --- Border Radius --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* --- Elevation / Shadows --- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.25); --shadow-xl: 0 20px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.3); --shadow-glow: 0 0 20px rgba(99,102,241,0.25); /* Glow brand */ /* --- Layout --- */ --sidebar-w: 240px; --sidebar-w-mobile: 280px; --header-h: 60px; --content-max: 1280px; /* --- Transitions --- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Z-Index Scale --- */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-top: 400; } /* ============================================================ LIGHT MODE OVERRIDE Toggle con: ============================================================ */ [data-theme="light"] { --bg: #F4F4F8; --bg-2: #EBEBF0; --surface: #FFFFFF; --surface-2: #F8F8FC; --surface-3: #EEEEF5; --border: #DCDCE8; --border-dim:#E8E8F0; --text: #0F0F1A; --text-2: #5C5C78; --text-3: #9898B0; --text-inv: #F0F0FF; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.07); --shadow-xl: 0 20px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.08); --shadow-glow: 0 0 20px rgba(99,102,241,0.15); } /* ============================================================ BASE RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: 1.6; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: rgba(99,102,241,0.3); color: var(--text); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }