/* ============================================================= Enaulix Design System · tokens.css El "contrato" de diseño del ecosistema. Dos niveles: 1) GLOBAL (solo desarrolladores): neutros, estados, forma, tipografía, movimiento. 2) POR INSTITUCIÓN (white-label): color de marca. Default = estilo reservas. Cambia SOLO el bloque de institución para tematizar cada colegio. ============================================================= */ :root { /* ---------- GLOBAL · Neutros (familia slate) ---------- */ --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --ink: #1e293b; --ink-soft: #475569; --muted: #6b7280; --faint: #94a3b8; --line: #e2e8f0; --line-soft: #eef2f6; /* ---------- GLOBAL · Estados (editables en config global dev) ---------- */ --ok: #15803d; --ok-bg: #e4f3e9; --warn: #b7791f; --warn-bg: #fbefd7; --info: #1453b8; --info-bg: #e5edfb; --danger: #c0392b; --danger-bg: #fae7e4; /* ---------- GLOBAL · Forma ---------- */ --r-sm: 8px; --r: 10px; /* inputs, botones */ --r-lg: 16px; /* tarjetas y formularios (rounded-2xl) */ --r-xl: 22px; /* modales */ --r-full: 9999px; /* ---------- GLOBAL · Sombras (suaves, tinte azulado) ---------- */ --sh-sm: 0 1px 2px rgba(16,30,66,.06), 0 1px 3px rgba(16,30,66,.05); --sh: 0 4px 14px rgba(16,30,66,.08); --sh-lg: 0 18px 48px rgba(10,25,70,.18); /* ---------- GLOBAL · Tipografía (Inter, con fallback a fuentes del sistema) ---------- */ --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---------- GLOBAL · Movimiento ---------- */ --ease: cubic-bezier(.2,.8,.3,1.1); --dur: .16s; /* ---------- GLOBAL · Colores funcionales (NO de marca) ---------- Paleta DEFAULT / preset para datos categóricos (salas, etiquetas, tipos de evento, estados de calendario, etc.). NO son fijos: cada sistema permite editarlos en su propia configuración. El color real se guarda por entidad (p. ej. cada sala) y se aplica en línea; estas variables son solo el punto de partida y los swatches sugeridos del color-picker. */ --c-rose: #e11d48; --c-amber: #d97706; --c-emerald: #059669; --c-teal: #0d9488; --c-sky: #0284c7; --c-indigo: #4f46e5; --c-violet: #7c3aed; --c-slate: #475569; /* ========================================================= POR INSTITUCIÓN (white-label) · DEFAULT = estilo reservas (indigo/violet) El control de configuración generará este bloque por colegio. ========================================================= */ --brand: #6366f1; /* indigo */ --brand-strong: #4f46e5; --brand-soft: #eef2ff; --brand-ink: #ffffff; /* texto sobre fondo de marca */ --brand-ring: rgba(99,102,241,.30); --brand-gradient: linear-gradient(135deg, var(--brand) 0%, #8b5cf6 100%); } /* ============================================================= Temas por sistema Aplica añadiendo class="theme-X" al . ============================================================= */ .theme-mariano { --brand: #1e3a6e; --brand-strong: #152d56; --brand-soft: #eff6ff; --brand-ring: rgba(30,58,110,.28); --brand-gradient: linear-gradient(135deg, #1e3a6e 0%, #4a7fcb 100%); } /* Solicitudes de compra y reembolso · esmeralda */ .theme-solicitudes { --brand: #10b981; --brand-strong: #059669; --brand-soft: #ecfdf5; --brand-ring: rgba(16,185,129,.28); --brand-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%); } /* Incorporaciones · azul */ .theme-incorporaciones { --brand: #3b82f6; --brand-strong: #2563eb; --brand-soft: #eff6ff; --brand-ring: rgba(59,130,246,.28); --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }