/* ===================================================================== EVera — Design tokens Tres temas: oscuro (principal) / claro / cyberpunk Cambian via [data-theme] en , persistido en localStorage. ===================================================================== */ :root { /* Tipografia */ --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Escala espacial */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radios */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px; /* Tipos */ --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 34px; /* Transiciones */ --ease: cubic-bezier(.4,0,.2,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; /* --- Tema OSCURO (por defecto) --- */ --bg: #0a1420; --surface: #0f1d2b; --surface-2: #142739; --surface-3: #1b3247; --border: #223b52; --border-strong: #2d4d68; --text: #eef4f9; --text-muted: #9fb7c9; --text-faint: #6d8399; --primary-700: #23628f; --primary-600: #2f7fc1; --primary-500: #3f97dd; --primary-400: #6bb3e8; --primary-tint: rgba(63,151,221,0.14); --accent: #ff8a3d; --accent-dim: #cc6b2a; --accent-tint: rgba(255,138,61,0.16); --success: #2fd980; --success-tint: rgba(47,217,128,0.14); --warning: #ffc94d; --warning-tint: rgba(255,201,77,0.14); --danger: #ff5470; --danger-tint: rgba(255,84,112,0.14); --focus-ring: #5aa8e0; --overlay: rgba(4,9,15,0.62); --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55); --shadow-lg: 0 20px 50px -16px rgba(0,0,0,0.65); } /* --- Tema CLARO --- */ :root[data-theme="claro"] { --bg: #eef2f6; --surface: #ffffff; --surface-2: #f5f8fb; --surface-3: #e9eff5; --border: #d7e1ea; --border-strong: #c0d0dd; --text: #101c28; --text-muted: #4f6474; --text-faint: #7c8fa0; --primary-700: #123f5c; --primary-600: #1c5f8f; --primary-500: #2874ac; --primary-400: #4993c6; --primary-tint: rgba(28,95,143,0.1); --accent: #d9691f; --accent-dim: #b5551a; --accent-tint: rgba(217,105,31,0.12); --success: #1f9d5c; --success-tint: rgba(31,157,92,0.12); --warning: #a86a00; --warning-tint: rgba(168,106,0,0.12); --danger: #c8324a; --danger-tint: rgba(200,50,74,0.1); --focus-ring: #2874ac; --overlay: rgba(16,28,40,0.45); --shadow-sm: 0 1px 2px rgba(20,35,50,0.06); --shadow-md: 0 8px 24px -10px rgba(20,35,50,0.18); --shadow-lg: 0 20px 46px -14px rgba(20,35,50,0.24); } /* --- Tema CYBERPUNK --- */ :root[data-theme="cyberpunk"] { --bg: #08050f; --surface: #0f0a1e; --surface-2: #160f2c; --surface-3: #1f1640; --border: #34215c; --border-strong: #472c7d; --text: #f3ecff; --text-muted: #b39ddb; --text-faint: #7d669e; --primary-700: #0092ab; --primary-600: #00b6d4; --primary-500: #29e0ff; --primary-400: #7deeff; --primary-tint: rgba(41,224,255,0.14); --accent: #ff2e88; --accent-dim: #cc2570; --accent-tint: rgba(255,46,136,0.18); --success: #39ff8c; --success-tint: rgba(57,255,140,0.14); --warning: #ffe93b; --warning-tint: rgba(255,233,59,0.14); --danger: #ff3b5c; --danger-tint: rgba(255,59,92,0.16); --focus-ring: #29e0ff; --overlay: rgba(5,3,12,0.72); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 0 1px rgba(41,224,255,0.4), 0 10px 28px -10px rgba(255,46,136,0.25); --shadow-lg: 0 0 1px rgba(41,224,255,0.5), 0 24px 60px -18px rgba(255,46,136,0.35); }