/* ============================================================ Inglés 360 — Design Tokens Fuente de verdad de diseño. NO inventar valores fuera de aquí. Importado por marketing-site y por wordpress/themes/ingles360-theme-v6. ============================================================ */ :root { /* ---------- Color · Navy / Blue (primarios) ---------- */ --i360-navy-900: #0A1340; /* fondo base hero / sidebar */ --i360-navy-800: #0F1B5E; --i360-navy-700: #1A2A8A; --i360-blue-600: #2E46D9; /* accent primario en light */ --i360-blue-500: #4A6BFF; /* hover / glow */ /* ---------- Color · Neón signature ---------- */ --i360-cyan-400: #2BE6E0; --i360-cyan-300: #5EF2C8; --i360-magenta-500: #B14CFF; --i360-magenta-400: #D072FF; --i360-pink-400: #FF5FA8; /* ---------- Gradiente signature (firma visual) ---------- Aparece en CTAs, texto destacado, logo border, anillo hero. ÚNICO elemento visual rescatado del sitio v5. */ --i360-grad: linear-gradient(120deg, #2BE6E0 0%, #4A6BFF 45%, #B14CFF 100%); /* ---------- Color · Neutrals (Ink) ---------- */ --i360-ink-900: #0A0E1F; /* texto principal */ --i360-ink-700: #2A2F4A; --i360-ink-500: #595F7E; /* muted / secundario */ --i360-ink-400: #8388A6; --i360-ink-300: #B6BACE; --i360-ink-200: #D9DCEA; /* borders */ --i360-ink-100: #ECEEF6; --i360-paper: #F7F8FC; /* fondo página light */ /* ---------- Color · Semánticos ---------- */ --i360-success: #1FBF7B; /* hábito completado */ --i360-warn: #FFB020; /* misión pendiente */ --i360-error: #FF5C6E; --i360-info: #4A6BFF; /* ---------- Glows (sobre fondos oscuros) ---------- */ --glow-cyan: 0 0 24px rgba(43,230,224,.55), 0 0 56px rgba(43,230,224,.25); --glow-blue: 0 0 24px rgba(74,107,255,.55), 0 0 56px rgba(74,107,255,.25); --glow-magenta: 0 0 24px rgba(177,76,255,.55), 0 0 56px rgba(177,76,255,.25); /* ---------- Sombras ---------- */ --shadow-1: 0 1px 2px rgba(10,19,64,.06), 0 1px 3px rgba(10,19,64,.05); /* resting */ --shadow-2: 0 4px 12px rgba(10,19,64,.08), 0 2px 4px rgba(10,19,64,.06); /* card */ --shadow-3: 0 12px 32px rgba(10,19,64,.12), 0 4px 8px rgba(10,19,64,.06); /* hover */ --shadow-4: 0 24px 64px rgba(10,19,64,.18), 0 8px 16px rgba(10,19,64,.08); /* modal */ /* ---------- Radios de borde ---------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ---------- Espaciado (escala 4px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* ---------- Tipografía · Familias ---------- */ --font-display: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-hand: 'Caveat', 'Brush Script MT', cursive; /* ---------- Tipografía · Tamaños y line-heights ---------- */ --fs-h1: 64px; --lh-h1: 1.05; --tracking-h1: -0.02em; --fs-h2: 40px; --lh-h2: 1.15; --tracking-h2: -0.02em; --fs-h3: 26px; --lh-h3: 1.2; --fs-h4: 18px; --lh-h4: 1.3; --fs-eyebrow: 11px; --tracking-eyebrow: 0.12em; --fs-lead: 19px; --lh-lead: 1.6; --fs-body: 16px; --lh-body: 1.5; --fs-small: 14px; --lh-small: 1.5; --fs-meta: 12px; --tracking-meta: 0.04em; --fs-hand: 38px; /* ---------- Motion ---------- */ --ease-brand: cubic-bezier(.16,.84,.3,1); --transition-fast: all .14s var(--ease-brand); --transition-base: all .24s var(--ease-brand); } /* ============================================================ Dark mode token overrides Aplicado via [data-theme="dark"] en . Componentes que usan estos tokens se actualizan automáticamente. Comunidad y Footer mantienen sus colores fijos en ambos modos. ============================================================ */ [data-theme="dark"] { --i360-paper: #0A0E1F; --i360-ink-900: #F0F2FF; --i360-ink-700: #C8CCEE; --i360-ink-500: #8388A6; --i360-ink-200: #1E2444; --i360-ink-100: #161A36; }