/* ==========================================================================
KRONTIA — TOKENS DE DISEÑO (sistema del panel del TENANT)
--------------------------------------------------------------------------
Se carga como hoja estática desde el layout del tenant:
y el tema se elige con .
El acento POR TENANT es dinámico: Blade lo inyecta inline en el layout
(--accent-primary / --accent-secondary) DESPUÉS de este archivo, así que
gana sobre el violeta por defecto de aquí abajo.
NOTA: las reglas de componentes (body, .glass-card, nav, etc.) y la fuente
Outfit () siguen viviendo en el layout — aquí solo van TOKENS.
========================================================================== */
:root {
/* ---- Acento de marca (POR DEFECTO: Violeta; Blade lo sobreescribe) ---- */
--accent-primary: #7c3aed;
--accent-secondary: #06b6d4;
--accent-primary-hover: color-mix(in srgb, var(--accent-primary) 82%, #000);
--accent-secondary-hover: color-mix(in srgb, var(--accent-secondary) 82%, #000);
/* ---- Colores semánticos (fijos en todas las paletas) ------------------- */
--accent-success: #10b981;
--accent-error: #f43f5e;
--accent-warning: #f59e0b;
--accent-danger: #f43f5e; /* alias usado en algunas vistas */
/* ---- Rampa neutra (slate) ---------------------------------------------- */
--slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
--slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
--slate-800:#1e293b; --slate-900:#0f172a;
/* ====================== TEMA CLARO (por defecto) ====================== */
--bg-base: #f8fafc;
--bg-surface: #ffffff;
--bg-card: #ffffff; /* alias */
--bg-surface-glass: rgba(255, 255, 255, 0.70);
--bg-inset: rgba(15, 23, 42, 0.05);
--bg-input: rgba(255, 255, 255, 0.85);
--bg-input-strong: #ffffff;
--bg-overlay: rgba(248, 250, 252, 0.97);
--border-glass: rgba(15, 23, 42, 0.08);
--border-strong: #cbd5e1;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--text-on-accent: #ffffff;
--accent-primary-text: color-mix(in srgb, var(--accent-primary) 78%, #0f172a);
--accent-secondary-text: color-mix(in srgb, var(--accent-secondary) 58%, #0f172a);
/* Tintes suaves (badges, hover) */
--tint-primary: color-mix(in srgb, var(--accent-primary) 10%, transparent);
--tint-secondary: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
--tint-success: color-mix(in srgb, var(--accent-success) 10%, transparent);
--tint-error: color-mix(in srgb, var(--accent-error) 10%, transparent);
--tint-warning: color-mix(in srgb, var(--accent-warning) 10%, transparent);
/* Fondo de luces ambientales y degradado de marca */
--bg-ambient:
radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent-primary) 8%, transparent) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--accent-secondary) 8%, transparent) 0%, transparent 40%);
--gradient-brand: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
/* ---- Radios / sombras / movimiento ------------------------------------- */
--radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-pill:9999px;
--shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
--shadow-premium: 0 20px 40px -15px rgba(0,0,0,.08);
--shadow-glow-primary: 0 8px 20px -6px color-mix(in srgb, var(--accent-primary) 60%, transparent);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================== TEMA OSCURO ==========================
Se activa con . */
[data-theme="dark"] {
--bg-base: #0f172a;
--bg-surface: #1e293b;
--bg-card: #1e293b;
--bg-surface-glass: rgba(30, 41, 59, 0.75);
--bg-inset: rgba(15, 23, 42, 0.30);
--bg-input: rgba(15, 23, 42, 0.45);
--bg-input-strong: rgba(15, 23, 42, 0.65);
--bg-overlay: rgba(15, 23, 42, 0.92);
--border-glass: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--accent-primary-text: color-mix(in srgb, var(--accent-primary) 72%, #f8fafc);
--accent-secondary-text: color-mix(in srgb, var(--accent-secondary) 78%, #f8fafc);
--shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, 0.50);
}