/* Elara Academy Design System — shared tokens. Ported from the Claude Design project (elara-academy-design-system-b49ccdbc...). Fonts load via Google Fonts in each page's (Nunito/Comfortaa) rather than self-hosted @font-face here, matching how this site already loads fonts elsewhere. */ :root { --color-brand-elara: #8B5CF6; --color-brand-academy: #FF7A2E; --color-bg: #F8F6FC; --color-surface: #FFFFFF; --color-surface-alt: #F1ECFB; --color-chip-bg: #F1ECFB; --color-nav-bg: #FFFFFF; --color-on-surface: #211D30; --color-on-surface-variant: #6E6683; --color-primary: #7C4DFF; --color-primary-container: #EEE7FF; --color-on-primary: #FFFFFF; --color-secondary: #FF7A2E; --color-secondary-container: #FFE9D8; --color-on-secondary: #FFFFFF; --color-error: #FF3B3B; --color-error-container: #FF3B3B1A; --color-border: rgba(33, 22, 54, 0.07); --color-shadow: rgba(41, 25, 74, 0.08); --gradient-brand: linear-gradient(135deg, #7C5CFC 0%, #A76CFB 45%, #FF8A5B 100%); --gradient-brand-shadow: 0 14px 30px rgba(124, 77, 255, 0.28); --gradient-logo: linear-gradient(135deg, #3B0764 0%, #6D28D9 40%, #EA580C 72%, #F97316 100%); --font-family-base: 'Nunito', system-ui, -apple-system, sans-serif; --font-family-comfortaa: 'Comfortaa', system-ui, -apple-system, sans-serif; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --text-display: 900 30px/1.15 var(--font-family-base); --text-title: 800 22px/1.25 var(--font-family-base); --text-subtitle: 800 16px/1.3 var(--font-family-base); --text-body: 600 14.5px/1.45 var(--font-family-base); --text-body-strong: 700 14.5px/1.4 var(--font-family-base); --text-caption: 700 12.5px/1.35 var(--font-family-base); --text-label: 800 11px/1.2 var(--font-family-base); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --radius-pill: 999px; --shadow-card: 0 10px 26px var(--color-shadow); --shadow-float: 0 16px 40px rgba(124, 77, 255, 0.28); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 150ms; --duration-medium: 250ms; /* Profundidades extra para el chrome de los editores (rail / panel lateral / inputs) - ds-tokens solo definia 4 niveles (bg/surface/surface-alt/nav-bg), insuficiente para el layout tipo IDE de Lesson/Form/Rubrica/etc. Valores dark = los hex que ya estaban hardcodeados en esas paginas (cero cambio visual en dark); light = derivados nuevos, sin auditoria de contraste. */ --color-surface-rail: #ECE6F8; --color-surface-sunken: #F3EFFA; --color-border-strong: #D8D0EC; --color-border-soft: #E4DEF3; } [data-theme="dark"] { --color-bg: #131022; --color-surface: #1E1A31; --color-surface-alt: #262040; --color-chip-bg: #262040; --color-nav-bg: #1A1729; --color-on-surface: #F4F1FB; --color-on-surface-variant: #B3A9CE; --color-primary: #B79CFF; --color-primary-container: #2C2650; --color-on-primary: #1A1030; --color-secondary: #FFB27A; --color-secondary-container: #3B2A20; --color-on-secondary: #2A1608; --color-error: #FF6B6B; --color-error-container: #3A1414; --color-border: rgba(255, 255, 255, 0.08); --color-shadow: transparent; --gradient-brand: linear-gradient(135deg, #5B3EBF 0%, #8B5CF6 45%, #E8703F 100%); --gradient-brand-shadow: none; --shadow-card: none; --shadow-float: none; --color-surface-rail: #161325; --color-surface-sunken: #201c30; --color-border-strong: #423c5c; --color-border-soft: #322d47; }