/* ============================================
   VARIÁVEIS CSS GLOBAIS
   Arquivo: wwwroot/css-novo/variables.css
   ============================================ */

:root {
    /* Breakpoints de referência */
    --screen-xl: 1600px;
    --screen-lg: 1366px;
    --screen-md: 1024px;
    --screen-sm: 768px;

    /* Tamanhos de fonte base */
    --font-size-xl: 16px;
    --font-size-lg: 15px;
    --font-size-md: 14px;
    --font-size-sm: 13px;
    --font-size-xs: 12px;

    /* Espaçamentos */
    --spacing-xl: 24px;
    --spacing-lg: 20px;
    --spacing-md: 16px;
    --spacing-sm: 12px;
    --spacing-xs: 8px;

    /* Grid - largura mínima para scroll */
    --grid-min-width: 1000px;

    /* Componentes */
    --input-min-height: 38px;
    --button-min-height: 42px;
    --card-padding: 20px;
}

/* ============================================
   AJUSTES PROGRESSIVOS POR TAMANHO DE TELA
   ============================================ */

/* Telas até 1600px - Ajustes LEVES */
@media (max-width: 1600px) {
    :root {
        --font-size-xl: 15px;
        --font-size-lg: 14px;
        --font-size-md: 13px;
        --spacing-xl: 20px;
        --spacing-lg: 18px;
        --grid-min-width: 950px;
        --input-min-height: 36px;
        --button-min-height: 40px;
        --card-padding: 18px;
    }
}

/* Telas até 1366px - NOTEBOOK PADRÃO */
@media (max-width: 1366px) {
    :root {
        --font-size-xl: 14px;
        --font-size-lg: 13px;
        --font-size-md: 12px;
        --font-size-sm: 12px;
        --spacing-xl: 18px;
        --spacing-lg: 16px;
        --spacing-md: 14px;
        --spacing-sm: 10px;
        --grid-min-width: 850px;
        --input-min-height: 34px;
        --button-min-height: 38px;
        --card-padding: 16px;
    }
}

/* Telas até 1024px - TABLETS/NOTEBOOKS PEQUENOS */
@media (max-width: 1024px) {
    :root {
        --font-size-xl: 13px;
        --font-size-lg: 12px;
        --font-size-md: 11px;
        --font-size-sm: 11px;
        --spacing-xl: 16px;
        --spacing-lg: 14px;
        --spacing-md: 12px;
        --spacing-sm: 8px;
        --grid-min-width: 750px;
        --input-min-height: 32px;
        --button-min-height: 36px;
        --card-padding: 12px;
    }
}

/* Telas até 768px - TABLETS PEQUENOS */
@media (max-width: 768px) {
    :root {
        --font-size-lg: 11px;
        --font-size-md: 10px;
        --font-size-sm: 10px;
        --spacing-lg: 12px;
        --spacing-md: 10px;
        --spacing-sm: 6px;
        --grid-min-width: 650px;
        --input-min-height: 30px;
        --button-min-height: 34px;
        --card-padding: 10px;
    }
}