/*
 * Tokens de identidad visual — NÚCLEO, compartido por todas las plantillas.
 *
 * Estas variables son el contrato entre el motor y la capa visual: el layout
 * las sobrescribe con la identidad de la plantilla o de la landing
 * (PageService::resolveVisualIdentity -> `ui`), y la hoja de cada plantilla
 * las consume.
 *
 * Vive fuera de la plantilla porque una plantilla que no cargue este fichero
 * se queda sin valores por defecto: su puente de variables —por ejemplo
 * `--accent-color: var(--primary)`— no encontraría nada.
 *
 * Se carga SIEMPRE y ANTES que la hoja de la plantilla.
 *
 * Los tonos derivados (--primary-dark, --primary-light, --accent-dark,
 * --dark-2) salen por color-mix del color base, para que un cambio de marca
 * los arrastre en vez de dejarlos descoordinados.
 */

        :root {
            /* --primary, --accent, --dark, --radius*, --section-py y las dos
               fuentes los puede sobrescribir el layout con la identidad de la
               plantilla o de la landing (ver layout.html.twig). El resto de
               tonos se derivan aquí para que un cambio de marca los arrastre
               en vez de dejarlos descoordinados. */
            --primary: #1a56db;
            --primary-dark: color-mix(in srgb, var(--primary) 82%, #000);
            --primary-light: color-mix(in srgb, var(--primary) 12%, #fff);
            --accent: #f59e0b;
            --accent-dark: color-mix(in srgb, var(--accent) 84%, #000);
            /* Texto legible sobre la marca. El layout los sobrescribe con el
               valor que PageService calcula por luminancia del color elegido;
               estos son los de los colores de arriba. */
            --on-primary: #ffffff;
            --on-accent: #ffffff;
            --dark: #0f172a;
            --dark-2: color-mix(in srgb, var(--dark) 88%, #fff);
            --gray: #64748b;
            --gray-light: #94a3b8;
            --border: #e2e8f0;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --radius-sm: 6px;
            --radius: 12px;
            --radius-lg: 20px;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
            --shadow: 0 4px 16px rgba(0, 0, 0, .1);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, .15);
            --transition: .3s ease;
            --section-py: 96px;
            --font-body: 'Inter', sans-serif;
            --font-heading: 'Playfair Display', serif;
        }