/**
 * BR Distribuidora - Design Tokens
 * @font-face + CSS Variables
 */

/* ── Galano Grotesque ── */
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesqueRegular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesqueMedium.otf') format('opentype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesqueSemiBold.otf') format('opentype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesqueBold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ── CSS Variables ── */
:root {
    /* Paleta (BRIEFING.md) */
    --brd-azul-escuro:  #183357;
    --brd-azul-claro:   #206BB3;
    --brd-preto:        #0D0D0D;
    --brd-off-white:    #F4EED7;

    /* Auxiliares */
    --brd-cinza:        #2A2A2A;
    --brd-cinza-claro:  #3D3D3D;
    --brd-sucesso:      #28A745;
    --brd-erro:         #DC3545;
    --brd-alerta:       #FFC107;

    /* Tipografia */
    --brd-font-family:    'Galano Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
    --brd-font-size-base: 16px;
    --brd-font-size-sm:   14px;
    --brd-font-size-lg:   18px;
    --brd-font-size-xl:   24px;
    --brd-font-size-2xl:  32px;
    --brd-font-size-3xl:  48px;

    /* Espaçamentos */
    --brd-spacing-xs:  4px;
    --brd-spacing-sm:  8px;
    --brd-spacing-md:  16px;
    --brd-spacing-lg:  24px;
    --brd-spacing-xl:  32px;
    --brd-spacing-2xl: 48px;

    /* Bordas e transições */
    --brd-border-radius:    4px;
    --brd-border-radius-lg: 8px;
    --brd-transition:       0.3s ease;

    /* Header */
    --brd-header-h:    110px;
    --brd-header-h-sm: 60px;
}

@media (max-width: 768px) {
    :root {
        --brd-font-size-3xl: 32px;
        --brd-font-size-2xl: 24px;
        --brd-font-size-xl:  20px;
    }
}

@media (max-width: 480px) {
    :root {
        --brd-font-size-3xl: 28px;
        --brd-font-size-2xl: 22px;
    }
}