/** * Design System — Educatea Campus * Paleta oficial Manual de Marca EducaTEA: * Azul Índigo #4149B6 · Violeta #9400FD · Amarillo #EFE40A · Ámbar #FCA200 · Oscuro #342F2A * Tipografía: Poppins (headings/UI) + Inter (cuerpo) * * @package Educatea Campus * @version 2.0.0 */ /* ─── Google Fonts ──────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap'); /* ─── Design Tokens ─────────────────────────────────────────────────────────── */ :root { /* ─── Paleta Oficial EducaTEA (Manual de Marca) ─── */ --ec-indigo: #4149B6; /* Azul Índigo primario */ --ec-indigo-dark: #3139a0; /* Hover/dark del índigo */ --ec-indigo-mid: #4d56c8; /* Índigo intermedio */ --ec-indigo-light: #eaebf9; /* Fondo/surface índigo suave */ --ec-violet: #9400FD; /* Violeta secundario — CTAs */ --ec-violet-dark: #7a00d4; /* Hover del violeta */ --ec-violet-light: #f5e0ff; /* Fondo violeta suave */ --ec-amber: #FCA200; /* Ámbar — acento cálido */ --ec-amber-dark: #e09100; /* Hover del ámbar */ --ec-amber-light: #fff4d6; /* Fondo ámbar suave */ --ec-yellow: #EFE40A; /* Amarillo vibrante — highlights */ --ec-yellow-dark: #d4c900; /* Hover del amarillo */ --ec-dark: #342F2A; /* Casi negro — texto base ofical */ /* ─── Aliases semánticos (compatibilidad con templates existentes) ─── */ --ec-navy: var(--ec-indigo); --ec-navy-dark: #111827; /* Fondos dark, header, footer */ --ec-navy-mid: var(--ec-indigo-mid); --ec-magenta: var(--ec-violet); --ec-magenta-dark: var(--ec-violet-dark); --ec-magenta-light: var(--ec-violet-light); --ec-yellow-vivid: var(--ec-yellow); /* ─── Neutros ─── */ --ec-bg: #F8F9FB; /* Fondo global claro */ --ec-surface: #FFFFFF; /* Superficie de cards */ --ec-white: #ffffff; --ec-surface-alt: #F0F2F8; /* Fondo alternativo leve */ --ec-border: #E2E8F0; /* Bordes suaves */ --ec-text: #1a1a2e; /* Texto base */ --ec-text-muted: #64748B; /* Texto secundario */ --ec-text-light: #F1F5F9; /* Texto sobre fondos oscuros */ /* ─── Transparencias sobre oscuro ─── */ --ec-on-dark: rgba(241, 245, 249, 0.95); --ec-on-dark-85: rgba(241, 245, 249, 0.85); --ec-on-dark-80: rgba(241, 245, 249, 0.8); --ec-on-dark-75: rgba(241, 245, 249, 0.75); --ec-on-dark-70: rgba(241, 245, 249, 0.7); --ec-on-dark-60: rgba(241, 245, 249, 0.6); --ec-on-dark-55: rgba(241, 245, 249, 0.55); --ec-on-dark-40: rgba(241, 245, 249, 0.4); --ec-on-dark-35: rgba(241, 245, 249, 0.35); --ec-on-dark-30: rgba(241, 245, 249, 0.3); --ec-border-on-dark: rgba(255, 255, 255, 0.08); --ec-border-on-dark-subtle: rgba(255, 255, 255, 0.06); --ec-border-on-dark-mid: rgba(255, 255, 255, 0.5); --ec-bg-on-dark: rgba(255, 255, 255, 0.12); --ec-bg-on-dark-hover: rgba(255, 255, 255, 0.08); --ec-bg-on-dark-active: rgba(255, 255, 255, 0.07); /* ─── Estados ─── */ --ec-success: #10b981; --ec-success-dark: #065f46; --ec-success-bg: rgba(16, 185, 129, 0.08); --ec-error: #ef4444; --ec-error-dark: #991b1b; --ec-error-bg: rgba(239, 68, 68, 0.08); /* ─── Transparencias del color primario (violeta) ─── */ --ec-magenta-alpha-35: rgba(148, 0, 253, 0.35); --ec-magenta-alpha-40: rgba(148, 0, 253, 0.4); --ec-magenta-alpha-25: rgba(148, 0, 253, 0.25); --ec-magenta-alpha-20: rgba(148, 0, 253, 0.2); --ec-magenta-alpha-15: rgba(148, 0, 253, 0.15); --ec-magenta-alpha-12: rgba(148, 0, 253, 0.12); --ec-magenta-alpha-08: rgba(148, 0, 253, 0.08); /* ─── Transparencias índigo (navy) ─── */ --ec-navy-alpha-35: rgba(65, 73, 182, 0.35); --ec-navy-alpha-20: rgba(65, 73, 182, 0.2); /* ─── Tipografía ─── */ --ec-font-primary: 'Poppins', sans-serif; /* Headings, botones, UI */ --ec-font-secondary: 'Inter', sans-serif; /* Cuerpo de texto largo */ --ec-text-xs: 0.75rem; /* 12px */ --ec-text-sm: 0.875rem; /* 14px */ --ec-text-base: 1rem; /* 16px */ --ec-text-lg: 1.125rem; /* 18px */ --ec-text-xl: 1.25rem; /* 20px */ --ec-text-2xl: 1.5rem; /* 24px */ --ec-text-3xl: 1.875rem; /* 30px */ --ec-text-4xl: 2.25rem; /* 36px */ --ec-text-5xl: 3rem; /* 48px */ --ec-text-6xl: 3.75rem; /* 60px */ --ec-text-7xl: 4.5rem; /* 72px */ /* ─── Pesos ─── */ --ec-font-light: 300; --ec-font-regular: 400; --ec-font-medium: 500; --ec-font-semibold: 600; --ec-font-bold: 700; --ec-font-extrabold: 800; /* ─── Espaciados ─── */ --ec-space-1: 0.25rem; /* 4px */ --ec-space-2: 0.5rem; /* 8px */ --ec-space-3: 0.75rem; /* 12px */ --ec-space-4: 1rem; /* 16px */ --ec-space-5: 1.25rem; /* 20px */ --ec-space-6: 1.5rem; /* 24px */ --ec-space-8: 2rem; /* 32px */ --ec-space-10: 2.5rem; /* 40px */ --ec-space-12: 3rem; /* 48px */ --ec-space-16: 4rem; /* 64px */ --ec-space-20: 5rem; /* 80px */ --ec-space-24: 6rem; /* 96px */ --ec-space-32: 8rem; /* 128px */ /* ─── Radios ─── */ --ec-radius-sm: 0.375rem; /* 6px */ --ec-radius: 0.75rem; /* 12px */ --ec-radius-md: 1rem; /* 16px */ --ec-radius-lg: 1.5rem; /* 24px */ --ec-radius-xl: 2rem; /* 32px */ --ec-radius-full: 9999px; /* ─── Sombras ─── */ --ec-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04); --ec-shadow: 0 4px 16px rgba(65, 73, 182, .10), 0 2px 6px rgba(65, 73, 182, .06); --ec-shadow-md: 0 8px 32px rgba(65, 73, 182, .14), 0 4px 12px rgba(65, 73, 182, .08); --ec-shadow-lg: 0 16px 48px rgba(65, 73, 182, .18), 0 8px 24px rgba(65, 73, 182, .10); --ec-shadow-glow: 0 0 30px rgba(148, 0, 253, .25); /* ─── Transiciones ─── */ --ec-transition: all .25s ease; --ec-transition-slow: all .4s ease; /* ─── Layout ─── */ --ec-container-max: 1200px; --ec-header-height: 76px; }