/* ═══════════════════════════════════════════════════════════════════════════
   TEMA DEL SITIO PÚBLICO: todas las variables --color-* (lo que ven los
   visitantes de la pyme). El tema del CMS está aparte, en themes/cms.css.

   Colores base: los inyecta base.html para cada tema ([data-theme="light"] y
   [data-theme="dark"]) desde Apariencia (public_theme.py):
     --color-primary, --color-secondary, --color-bg,
     --color-header-bg, --color-footer-bg
     --color-text, --color-header-text, --color-footer-text, --color-button-text
       (los textos se calculan para que se lean, salvo que se fijen en Avanzado)
   Aquí solo se deriva el resto a partir de esos colores.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Textos secundarios y superficies: mezclas del texto y el fondo del tema activo */
    --color-text-2: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
    --color-text-3: color-mix(in srgb, var(--color-text) 52%, var(--color-bg));
    --color-surface: color-mix(in srgb, var(--color-bg) 94%, var(--color-text));
    --color-surface-2: color-mix(in srgb, var(--color-bg) 89%, var(--color-text));
    --color-surface-3: color-mix(in srgb, var(--color-bg) 84%, var(--color-text));
    --color-border: color-mix(in srgb, var(--color-text) 14%, transparent);

    /* Botones: usan el color principal */
    --color-btn-bg: var(--color-primary);
    --color-btn-bg-hover: color-mix(in srgb, var(--color-primary) 85%, black);
    --color-btn-text: var(--color-button-text);
    --color-btn-text-hover: var(--color-button-text);

    /* "Acento" de la paleta del editor: los nodos que ya lo usan siguen al secundario */
    --color-accent: var(--color-secondary);

    /* Errores de formulario (components/forms.css): rojo, mezclado con el texto para que se lea en claro y oscuro */
    --color-error: color-mix(in srgb, #dc2626 85%, var(--color-text));

    /* Medidas */
    --flash-msg-height: 20px;
    --flash-msg-duration: 5000ms;
    --header-height: 85px;
    --radius: 7px;

    /* Anchos de los bloques (align--narrow/normal/wide, base-node.css) */
    --width-narrow: 820px;
    --width-content: 1200px;
    --width-wide: 1440px;
}