/* ===================================================== tokens.css — Variables de diseño (Design Tokens) ===================================================== SISTEMA DE TEMAS: OSCURO (default) + CLARO El tema se controla con el atributo data-theme="dark|light" en el elemento . Cambiar con el botón en el nav. ===================================================== */ /* ══════════════════════════════════════════════ TEMA OSCURO (defecto — igual al original) ══════════════════════════════════════════════ */ :root, [data-theme="dark"] { --theme-name: "dark"; /* ── Fondos ─────────────────────────────── */ --bg: #070910; --bg-2: #0B0E17; --bg-3: #10141F; --bg-4: #161C2C; /* ── Bordes ─────────────────────────────── */ --line: rgba(255,255,255,0.07); --line-b: rgba(30,144,255,0.28); --line-c: rgba(0,198,255,0.28); /* ── Azul Eléctrico ─────────────────────── */ --blue: #1E90FF; --blue-d: #0A6FD8; --blue-l: #5BB3FF; --blue-xl: #A8D8FF; --glow: rgba(30,144,255,0.32); --soft: rgba(30,144,255,0.09); /* ── Cian (Unlock) ───────────────────────── */ --cyan: #00C6FF; --cyan-d: #0099CC; --c-glow: rgba(0,198,255,0.32); --c-soft: rgba(0,198,255,0.09); /* ── Texto ───────────────────────────────── */ --white: #FFFFFF; --silver: #C8D8EC; --muted: #7A8FA8; --dim: #2A3240; /* ── Semánticos ─────────────────────────── */ --green: #00E676; --amber: #FFB300; --violet: #7C5CFC; --red: #FF4444; /* ── Tema switch ─────────────────────────── */ --theme-icon-moon: block; --theme-icon-sun: none; --nav-scrolled-bg: rgba(7,9,16,.94); --mobile-menu-bg: rgba(7,9,16,.97); --overlay-svc: linear-gradient(145deg,#071428,#091C3A); --overlay-svc-h: linear-gradient(145deg,#091C3A,#0B2250); --stat-border: var(--line); --hero-outline-clr: transparent; --hero-outline-stk: var(--white); } /* ══════════════════════════════════════════════ TEMA CLARO ══════════════════════════════════════════════ */ [data-theme="light"] { --theme-name: "light"; /* ── Fondos ─────────────────────────────── */ --bg: #F0F4FA; --bg-2: #FFFFFF; --bg-3: #E8EEF7; --bg-4: #D8E3F0; /* ── Bordes ─────────────────────────────── */ --line: rgba(0,0,0,0.09); --line-b: rgba(30,144,255,0.30); --line-c: rgba(0,150,200,0.30); /* ── Azul Eléctrico ─────────────────────── */ --blue: #0A6FD8; --blue-d: #0558B0; --blue-l: #1E90FF; --blue-xl: #5BB3FF; --glow: rgba(10,111,216,0.22); --soft: rgba(10,111,216,0.08); /* ── Cian (Unlock) ───────────────────────── */ --cyan: #0099CC; --cyan-d: #007AA3; --c-glow: rgba(0,153,204,0.22); --c-soft: rgba(0,153,204,0.08); /* ── Texto ───────────────────────────────── */ --white: #0D1117; --silver: #2A3A55; --muted: #5A6E8A; --dim: #CBD8E8; /* ── Semánticos ─────────────────────────── */ --green: #00A854; --amber: #D48000; --violet: #5C3FC4; --red: #D42020; /* ── Tema switch ─────────────────────────── */ --theme-icon-moon: none; --theme-icon-sun: block; --nav-scrolled-bg: rgba(240,244,250,.96); --mobile-menu-bg: rgba(240,244,250,.98); --overlay-svc: linear-gradient(145deg,#E8F0FC,#F0F6FF); --overlay-svc-h: linear-gradient(145deg,#DCE8F8,#E8F2FF); --stat-border: rgba(0,0,0,0.07); --hero-outline-clr: transparent; --hero-outline-stk: var(--white); } /* ── Fuentes (invariantes) ─────────────────── */ :root { --font-display: 'Rajdhani', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ── Tamaños de fuente ───────────────────── */ --fs-xs: 0.85rem; --fs-sm: 0.975rem; --fs-base: 1.125rem; --fs-md: 1.2rem; --fs-lg: 1.35rem; --fs-xl: 1.6rem; --fs-2xl: 2rem; --fs-3xl: 2.6rem; --fs-hero: clamp(3.8rem, 9.5vw, 7.8rem); /* ── Interlineado ────────────────────────── */ --lh-tight: 1.1; --lh-snug: 1.35; --lh-base: 1.75; --lh-loose: 1.9; /* ── Radios ──────────────────────────────── */ --r-xs: 3px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 34px; --r-full: 9999px; /* ── Espaciado ───────────────────────────── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 2.75rem; --space-xl: 4rem; --space-2xl: 6rem; /* ── Layout ──────────────────────────────── */ --max-w: 1160px; --pad-x: 1.75rem; --nav-h: 70px; --touch: 52px; /* ── Animaciones ─────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); } /* ══════════════════════════════════════════════ AJUSTES LIGHT: componentes con colores hardcoded ══════════════════════════════════════════════ */ [data-theme="light"] body::before { background-image: radial-gradient(ellipse at 15% 85%, rgba(10,111,216,.04) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(92,63,196,.03) 0%, transparent 55%); } [data-theme="light"] .nav.scrolled { background: var(--nav-scrolled-bg) !important; border-color: var(--line); } [data-theme="light"] .mobile-menu { background: var(--mobile-menu-bg) !important; } [data-theme="light"] .hero__grid { opacity: 0.3; } [data-theme="light"] .hero__glow, [data-theme="light"] .hero__glow-2 { opacity: 0.4; } [data-theme="light"] .svc--unlock { background: linear-gradient(145deg, #0A1A3A, #0D2050) !important; border-left-color: rgba(0,198,255,.5); } [data-theme="light"] .svc--unlock:hover { background: linear-gradient(145deg, #0D2050, #102460) !important; } [data-theme="light"] .svc--unlock .svc__name, [data-theme="light"] .svc--unlock .svc__desc, [data-theme="light"] .svc--unlock .unlock-sub-item__name, [data-theme="light"] .svc--unlock .unlock-sub-item__detail { color: #C8D8EC !important; } [data-theme="light"] .unlock-hero { background: linear-gradient(135deg, #040D1A 0%, #071428 40%, #091C3A 100%) !important; border-color: rgba(0,198,255,.4); } [data-theme="light"] .unlock-hero .unlock-desc, [data-theme="light"] .unlock-hero .unlock-feat span, [data-theme="light"] .unlock-hero .unlock-sub-item__name, [data-theme="light"] .unlock-hero .unlock-sub-item__detail { color: #C8D8EC !important; } [data-theme="light"] .unlock-hero .unlock-price-ref { background: rgba(0,198,255,.1); border-color: rgba(0,198,255,.3); } [data-theme="light"] .unlock-hero .unlock-price-ref__label, [data-theme="light"] .unlock-hero .unlock-price-ref__note { color: #7AAABB !important; } [data-theme="light"] .unlock-hero .mdm-tag { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #A8D8FF; } [data-theme="light"] .stat { border-color: var(--stat-border); } [data-theme="light"] .rcard, [data-theme="light"] .lcard, [data-theme="light"] .pay-card, [data-theme="light"] .process-card, [data-theme="light"] .tracker-widget, [data-theme="light"] .vip-box { background: var(--bg-2); border-color: var(--line); } [data-theme="light"] .footer { background: #1A2340; } [data-theme="light"] .footer, [data-theme="light"] .footer a, [data-theme="light"] .foot-copy, [data-theme="light"] .foot-about, [data-theme="light"] .foot-col-title, [data-theme="light"] .foot-list li, [data-theme="light"] .foot-list a, [data-theme="light"] .foot-name, [data-theme="light"] .foot-sub { color: #C8D8EC; } [data-theme="light"] .foot-list a:hover { color: #ffffff; } [data-theme="light"] .bottom-nav { background: rgba(240,244,250,.97); border-top: 1px solid var(--line); } [data-theme="light"] .t-outline { -webkit-text-stroke: 2px var(--white); color: transparent; } /* Botón de tema — íconos */ .theme-icon-moon { display: var(--theme-icon-moon, block); } .theme-icon-sun { display: var(--theme-icon-sun, none); } /* ── V11: Variables de border-radius ─────────────────────── */ :root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* Color muted mejorado: ratio ~5.1:1 sobre #0D1117 (cumple WCAG AA) */ --muted-accessible: #9DB2D4; }