/* TOKENS DE MARCA * * Este es el único archivo que se toca para rebrandear la app a un cliente. * Los valores por defecto son el tema demo (carbón + latón, código visual * estándar de barbería premium). El config.json de cada cliente sobrescribe * estas variables en runtime — ver core/js/theme.js. */ :root { /* --- Superficies --- */ --bg: #0e0f12; --surface: #16181d; --surface-2: #1e2128; --surface-3: #272b34; --border: #2c313b; --border-fuerte: #3d434f; /* --- Texto --- */ --texto: #f3f4f6; --texto-suave: #a8afbd; --texto-tenue: #6f7787; /* --- Marca --- */ --acento: #c8a24a; --acento-hover: #d9b661; --acento-suave: rgba(200, 162, 74, 0.14); --acento-borde: rgba(200, 162, 74, 0.4); --sobre-acento: #14161a; /* --- Estados --- */ --ok: #43b581; --ok-suave: rgba(67, 181, 129, 0.14); --alerta: #d9a441; --alerta-suave: rgba(217, 164, 65, 0.14); --error: #e1574f; --error-suave: rgba(225, 87, 79, 0.14); --info: #5b9dd9; /* --- Tipografía --- */ --fuente-titulo: 'Sora', system-ui, -apple-system, sans-serif; --fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif; /* --- Forma --- */ --radio-sm: 8px; --radio: 12px; --radio-lg: 18px; --radio-full: 999px; /* --- Profundidad (soft UI: sombras suaves, no neumorfismo) --- */ --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra: 0 4px 16px rgba(0, 0, 0, 0.35); --sombra-lg: 0 12px 36px rgba(0, 0, 0, 0.45); /* --- Movimiento --- */ --trans: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Capas --- */ --z-sticky: 10; --z-overlay: 20; --z-modal: 30; --z-toast: 50; } /* Tema claro. Se activa con , configurable por cliente: varias barberías con identidad clara lo van a preferir. */ :root[data-tema='claro'] { --bg: #f7f6f3; --surface: #ffffff; --surface-2: #f1efea; --surface-3: #e7e4dd; --border: #dedad1; --border-fuerte: #c5bfb2; --texto: #16171a; --texto-suave: #4b5160; --texto-tenue: #767d8c; --acento: #8a6c1f; --acento-hover: #755b17; --acento-suave: rgba(138, 108, 31, 0.1); --acento-borde: rgba(138, 108, 31, 0.35); --sobre-acento: #ffffff; --ok: #1e7a52; --ok-suave: rgba(30, 122, 82, 0.1); --alerta: #8a6414; --alerta-suave: rgba(138, 100, 20, 0.1); --error: #b3312a; --error-suave: rgba(179, 49, 42, 0.1); --sombra-sm: 0 1px 2px rgba(20, 18, 12, 0.06); --sombra: 0 4px 16px rgba(20, 18, 12, 0.08); --sombra-lg: 0 12px 36px rgba(20, 18, 12, 0.12); }