/*
 * BahíaProde — identidad visual real (tomada del logo y el flyer de marca).
 *
 * ÚNICO archivo con colores/tipografía de marca. Para un rebrand futuro
 * alcanza con reemplazar este archivo: layout.css y components.css solo
 * consumen estas variables y nunca hardcodean un color.
 *
 * Paleta:
 *   Azul marino  #0B1B2E  — fondo del escudo, títulos
 *   Azul brillante #1478DC — color de acción (botones, activos, acentos)
 *   Celeste      #4FA8E0  — franjas del escudo, detalles
 *   Dorado       #E0AC46  — laurel del escudo, premios y podio
 */
:root {
    /* Marca */
    --color-primary: #1478DC;
    --color-primary-dark: #0B1B2E;
    --color-primary-light: #E7F1FC;
    --color-accent: #4FA8E0;
    --color-gold: #E0AC46;
    --color-silver: #A9B4C0;
    --color-bronze: #C9873F;

    /* Estado */
    --color-success: #17A45B;
    --color-danger: #E0453F;
    --color-warning: #E0AC46;

    /* Neutros */
    --color-bg: #F2F6FB;
    --color-surface: #FFFFFF;
    --color-border: #E1E8F2;
    --color-text: #0B1B2E;
    --color-text-muted: #64748B;
    --color-text-on-primary: #FFFFFF;

    /* Tipografía */
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;
    --fs-xxl: 2rem;

    /* Layout */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(11, 27, 46, .07);
    --shadow-md: 0 8px 24px rgba(11, 27, 46, .10);
    --sidebar-width: 240px;
    --topbar-height: 68px;
}