/**
 * ============================================================================
 * POSTOS FLORENSE - CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 * ============================================================================
 * Arquivo: public/assets/css/variables.css
 * Descrição: Variáveis CSS centralizadas - paleta Florense
 */

:root {
    /* ====== PALETA OFICIAL POSTOS FLORENSE ====== */
    --color-primary:      #003399;  /* Azul - Brand Principal */
    --color-accent:       #FF6600;  /* Laranja - Destaque / CTA */
    --color-dark:         #000000;  /* Preto - Textos / Backgrounds escuros */
    --color-light:        #FFFFFF;  /* Branco - Backgrounds claros */

    /* ====== VARIAÇÕES PRIMÁRIAS ====== */
    --color-primary-light: #1a4db3;
    --color-primary-dark:  #001F66;
    --color-primary-hover: #002277;
    --color-primary-10:    rgba(0, 51, 153, 0.10);
    --color-primary-20:    rgba(0, 51, 153, 0.20);

    /* ====== VARIAÇÕES ACCENT ====== */
    --color-accent-light:  #FF8533;
    --color-accent-dark:   #CC5200;
    --color-accent-hover:  #e65c00;
    --color-accent-10:     rgba(255, 102, 0, 0.10);

    /* ====== NEUTROS ====== */
    --color-gray-50:   #FAFAFA;
    --color-gray-100:  #F5F5F5;
    --color-gray-200:  #EEEEEE;
    --color-gray-300:  #E0E0E0;
    --color-gray-400:  #BDBDBD;
    --color-gray-500:  #9E9E9E;
    --color-gray-600:  #757575;
    --color-gray-700:  #616161;
    --color-gray-800:  #424242;
    --color-gray-900:  #212121;

    /* ====== STATUS ====== */
    --color-success:       #28A745;
    --color-success-light: #d4edda;
    --color-warning:       #FFC107;
    --color-warning-light: #fff3cd;
    --color-error:         #DC3545;
    --color-error-light:   #f8d7da;
    --color-info:          #17A2B8;
    --color-info-light:    #d1ecf1;

    /* ====== TIPOGRAFIA ====== */
    --font-primary:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    --font-mono:      'Courier New', Courier, monospace;

    --font-size-xs:   11px;
    --font-size-sm:   13px;
    --font-size-base: 15px;
    --font-size-md:   17px;
    --font-size-lg:   20px;
    --font-size-xl:   24px;
    --font-size-2xl:  30px;
    --font-size-3xl:  38px;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-loose:  1.75;

    /* ====== ESPAÇAMENTO ====== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ====== BORDAS ====== */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 999px;

    --border-width: 1px;
    --border-color: var(--color-gray-300);

    /* ====== SOMBRAS ====== */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.12);
    --shadow-xl:  0 16px 48px rgba(0,0,0,.16);
    --shadow-primary: 0 4px 16px rgba(0, 51, 153, .25);
    --shadow-accent:  0 4px 16px rgba(255, 102, 0, .25);

    /* ====== TRANSIÇÕES ====== */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ====== Z-INDEX ====== */
    --z-below:   -1;
    --z-base:     0;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ====== BREAKPOINTS (referência - usar em @media) ====== */
    /* --bp-sm: 640px  */
    /* --bp-md: 768px  */
    /* --bp-lg: 1024px */
    /* --bp-xl: 1280px */
}