/* ========================================================================== variables.css Tokens de diseño de cubs25.com — cambia aquí y se propaga a todo el sitio ========================================================================== */ :root { /* ---- Color: superficie ---- */ --clr-bg: #0a0a0a; --clr-bg-elevated: #121212; --clr-bg-card: #141414; --clr-border: #262626; --clr-border-hover: #3a3a3a; /* ---- Color: texto ---- */ --clr-text-primary: #e8e8e6; --clr-text-secondary: #8c8c8c; --clr-text-muted: #5c5c5c; /* ---- Color: acento (definido por el usuario — no tocar) ---- */ --clr-accent: #ACC0C6; --clr-accent-dim: #004C54; --clr-accent-glow: #046A38; /* ---- Tipografía ---- */ --font-display: "Space Grotesk", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.5rem; /* 24px */ --fs-xl: 2rem; /* 32px */ --fs-2xl: 2.75rem; /* 44px */ --fs-3xl: 3.75rem; /* 60px */ --lh-tight: 1.1; --lh-normal: 1.5; --lh-relaxed: 1.7; /* ---- Espaciado (escala 4px) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; /* ---- Layout ---- */ --sidebar-width: 26rem; --content-max-width: 42rem; --header-height-mobile: 4.5rem; /* ---- Transiciones ---- */ --transition-fast: 150ms ease; --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1); /* ---- Z-index ---- */ --z-nav: 100; --z-mobile-toggle: 110; --z-overlay: 90; } /* ========================================================================== MODO CLARO Se activa agregando data-theme="light" en (lo maneja theme.js). ========================================================================== */ :root[data-theme="light"] { --clr-bg: #fafafa; --clr-bg-elevated: #f1f1f1; --clr-bg-card: #ffffff; --clr-border: #e2e2e2; --clr-border-hover: #cfcfcf; --clr-text-primary: #111111; --clr-text-secondary: #4d4d4d; --clr-text-muted: #8a8a8a; /* En fondo blanco, el acento plateado se ve muy pálido/verdoso lavado — usamos el verde águila (el mismo del scrollbar) para mejor contraste */ --clr-accent: #046A38; }