/* Kymora — tokens de diseño compartidos.
   Un único archivo de variables que importan tanto app.css (panel/landing/auth)
   como vidriera.css (catálogo público) para no tener colores sueltos
   redefinidos pantalla por pantalla. Ver README, seccion "Rediseño visual"
   para el porque de cada valor. */

:root {
    /* Tinta y papel */
    --ink-900: #2B1832;
    --ink-600: #6B4D75;
    --paper-50: #FBF3E7;
    --paper-0: #FFFDFA;

    /* Acento unico fuerte: CTA primario, links, precios, marca puntual */
    --accent-600: #D6A339;
    --accent-700: #B4842A;
    --accent-100: color-mix(in srgb, var(--accent-600) 16%, var(--paper-0));

    /* Solo para alertas/estados negativos y positivos — nunca decorativo */
    --rose-500: #C85C72;
    --rose-100: color-mix(in srgb, var(--rose-500) 16%, var(--paper-0));
    /* Terracota apagado: marca suave de "cuidado" (Agotado, Borrar) sin el
       rojo saturado de un error. El 700 es para texto (contraste AA sobre el 100). */
    --terracota-700: #8E4331;
    --terracota-100: color-mix(in srgb, #B5654E 18%, var(--paper-0));
    --success-600: #4E7A5C;
    --success-100: color-mix(in srgb, var(--success-600) 16%, var(--paper-0));

    /* Linea fina tipo revista, para separar secciones en vez de sombra */
    --line: color-mix(in srgb, var(--ink-600) 28%, transparent);

    /* Sombra reservada para elementos flotantes reales (modal, dropdown) */
    --shadow-float: 0 16px 40px rgba(43, 24, 50, 0.20);

    /* Radios con criterio: chico para controles, mediano para superficies */
    --radius-sm: 6px;
    --radius-md: 14px;

    /* Tipografia */
    --font-display: 'Fraunces', Georgia, serif;
    --font-ui: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Sistema de ancho unico (ver README, "Sistema de ancho consistente").
       --ancho-pagina es el ancho TOTAL de .contenedor incluyendo su margen
       lateral: en desktop deja 1200 - 2*40 = 1120px de contenido util.
       --ancho-foco es el unico ancho menor permitido, solo para flujos de una
       sola tarea (login/registro, onboarding) via .contenedor--foco. */
    --ancho-pagina: 1200px;
    --ancho-foco: 640px;
    --margen-pagina: 20px;
}
@media (min-width: 768px) {
    :root { --margen-pagina: 32px; }
}
@media (min-width: 1200px) {
    :root { --margen-pagina: 40px; }
}