/* ========================================================================== Nivel UP · Tokens de marca Lienzo azul claro + un color propio por categoría de actividad. ========================================================================== */ :root { /* --- Anclas de marca --- */ --azul: #2e6bf0; /* azul de marca, vivo */ --azul-deep: #0b43a7; /* azul royal (navy/acento fuerte) */ --azul-ink: #102a5c; /* azul muy oscuro para texto fuerte/footer */ --verde: #4fa828; /* verde Nivel UP */ --verde-deep: #3c861f; /* --- Acentos de apoyo --- */ --coral: #2fa84f; /* acento de acción (CTA) */ --coral-deep: #23913f; --ambar: #84b72e; /* lima/verde claro */ --rosa: #e94c7a; /* toque cálido: da variedad a las categorías */ --teal: #0e9488; /* --- Lienzo azulado (tema LIGHT por defecto) --- */ --cream: #bcd3f1; /* fondo principal, azul medio claro */ --cream-2: #a8c4ea; /* secciones alternas, azul algo más marcado */ --white: #d2e2f8; /* secciones "blancas": azul un poco más claro */ --paper: #d2e2f8; /* --- Texto (navy oscuro, nunca negro puro) --- */ --ink: #142849; /* titulares / texto fuerte */ --body: #3f4f6b; /* cuerpo */ --muted: #647597; /* secundario */ /* --- Líneas --- */ --line: #a6c1e7; /* bordes azules sobre el lienzo */ --line-soft: rgba(21, 41, 78, 0.08); /* --- Colores por categoría (color + fondo lavado + tinta) --- */ --c-academia: #2e6bf0; --c-academia-bg: #e7efff; --c-arte: #14a7b0; --c-arte-bg: #e0f4f6; --c-teatro: #e94c7a; --c-teatro-bg: #fde7ef; --c-musica: #84b72e; --c-musica-bg: #f0f6dd; --c-deportes: #4fa828; --c-deportes-bg: #e8f5de; --c-estrategia: #0e9488; --c-estrategia-bg: #def3f0; --c-valores: #16a085; --c-valores-bg: #def3ee; /* --- Forma (suave, redondeada) --- */ --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; /* --- Sombras (suaves, teñidas) --- */ --sh-soft: 0 14px 30px -16px rgba(22, 36, 63, 0.18); --sh-card: 0 22px 44px -24px rgba(22, 36, 63, 0.22); --sh-coral: 0 16px 30px -14px rgba(47, 168, 79, 0.42); --sh-azul: 0 16px 30px -14px rgba(46, 107, 240, 0.4); /* --- Tipografía --- */ --font-display: "Outfit", "Helvetica Neue", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-hand: "Caveat", "Comic Sans MS", cursive; /* --- Superficie de tarjetas (claro = blanco) --- */ --surface: #ffffff; /* --- Layout / motion --- */ --maxw: 1200px; --gutter: 22px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ========================================================================== TEMA OSCURO (navy profundo) — se activa con [data-theme="dark"] en . Sobrescribe los tokens; los componentes que fijan #fff se ajustan en main.css. ========================================================================== */ :root[data-theme="dark"] { /* Lienzo: navys profundos, secciones alternas más azules */ --cream: #0a1830; --cream-2: #0e2350; --white: #0c1d3e; --paper: #0c1d3e; --surface: #14254f; /* tarjetas (un punto más claras que la sección) */ /* Texto */ --ink: #eaf1ff; --body: #b6c5e8; --muted: #8595bd; /* Líneas */ --line: #27396b; --line-soft: rgba(255, 255, 255, 0.08); /* Acentos: azul más brillante para destacar sobre el fondo oscuro */ --azul: #4d84ff; --azul-deep: #2e6bf0; /* Fondos lavados de categoría → translúcidos sobre oscuro */ --c-academia-bg: rgba(77, 132, 255, 0.16); --c-arte-bg: rgba(20, 167, 176, 0.18); --c-teatro-bg: rgba(233, 76, 122, 0.16); --c-musica-bg: rgba(132, 183, 46, 0.16); --c-deportes-bg: rgba(79, 168, 40, 0.16); --c-estrategia-bg: rgba(14, 148, 136, 0.18); --c-valores-bg: rgba(22, 160, 133, 0.16); /* Sombras más profundas */ --sh-soft: 0 14px 30px -16px rgba(0, 0, 0, 0.6); --sh-card: 0 22px 44px -24px rgba(0, 0, 0, 0.7); }