/*
 * Sena UI · tokens de diseño
 *
 * --sena-brand, --sena-accent y los radios llegan de la configuración (estilo en línea
 * generado en View/SenaUI/Macros.html.twig); aquí solo hay valores por defecto.
 * Las variables --sena-* se mapean sobre las --bs-* de Bootstrap 5.3: así cualquier
 * pantalla o plugin que use Bootstrap hereda el tema sin reglas específicas.
 * Todo cuelga de html.sena-ui: si el plugin se desactiva, no queda ningún estilo aplicado.
 */

@font-face {
    font-family: 'Sena Inter';
    src: url('../../Fonts/SenaUI/inter-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html.sena-ui {
    /* marca (sobrescrito por la configuración) */
    --sena-brand: #1D75A7;
    --sena-brand-rgb: 29, 117, 167;
    --sena-accent: #09BFAB;
    --sena-accent-rgb: 9, 191, 171;
    --sena-radius-sm: 6px;
    --sena-radius-md: 10px;
    --sena-radius-lg: 14px;

    /* colores derivados */
    --sena-primary: var(--sena-brand);
    --sena-primary-hover: color-mix(in srgb, var(--sena-brand) 86%, #000);
    --sena-primary-active: color-mix(in srgb, var(--sena-brand) 76%, #000);
    --sena-primary-subtle: color-mix(in srgb, var(--sena-brand) 10%, var(--sena-surface));
    --sena-primary-border: color-mix(in srgb, var(--sena-brand) 30%, var(--sena-surface));
    --sena-accent-strong: color-mix(in srgb, var(--sena-accent) 62%, #000);

    /* superficies y texto (tema claro) */
    --sena-bg: #F4F7FB;
    --sena-bg-rgb: 244, 247, 251;
    --sena-surface: #FFFFFF;
    --sena-surface-rgb: 255, 255, 255;
    --sena-surface-2: #F1F5F9;
    --sena-text: #263445;
    --sena-text-rgb: 38, 52, 69;
    --sena-muted: #5B6B7F;
    --sena-border: #E2E8F0;
    --sena-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
    --sena-shadow-md: 0 6px 16px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
    --sena-shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);

    /* tipografía y medidas */
    --sena-font: 'Sena Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sena-header-height: 60px;
    --sena-transition: .15s ease;
    --sena-focus-ring: 0 0 0 .2rem rgba(var(--sena-brand-rgb), .3);

    /* mapeo sobre Bootstrap 5.3 */
    --bs-primary: var(--sena-primary);
    --bs-primary-rgb: var(--sena-brand-rgb);
    --bs-primary-text-emphasis: var(--sena-primary-active);
    --bs-primary-bg-subtle: var(--sena-primary-subtle);
    --bs-primary-border-subtle: var(--sena-primary-border);
    --bs-link-color: var(--sena-primary);
    --bs-link-color-rgb: var(--sena-brand-rgb);
    --bs-link-hover-color: var(--sena-primary-hover);
    --bs-body-font-family: var(--sena-font);
    --bs-body-bg: var(--sena-bg);
    --bs-body-bg-rgb: var(--sena-bg-rgb);
    --bs-body-color: var(--sena-text);
    --bs-body-color-rgb: var(--sena-text-rgb);
    --bs-secondary-color: var(--sena-muted);
    --bs-emphasis-color: var(--sena-text);
    --bs-tertiary-bg: var(--sena-surface-2);
    --bs-border-color: var(--sena-border);
    --bs-border-radius: var(--sena-radius-sm);
    --bs-border-radius-sm: calc(var(--sena-radius-sm) - 2px);
    --bs-border-radius-lg: var(--sena-radius-md);
    --bs-border-radius-xl: var(--sena-radius-lg);
    --bs-focus-ring-color: rgba(var(--sena-brand-rgb), .3);
}