/* 
 * Variveis CSS de Cores - Sistema de Frete
 * Contm o sistema de cores base usado por todos os temas
 * Baseado no padro do backoffice-front
 */

:root {
    /* ==========================================================================
       SISTEMA DE CORES BASE
       ========================================================================== */
    
    /* Cores neutras (grays) */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-black: #000000;

    /* Cores semnticas base */
    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-primary-light: rgba(13, 110, 253, 0.1);
    --color-primary-dark: #0a58ca;
    --color-primary-border: #b3d7ff;

    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;
    --color-secondary-light: rgba(108, 117, 125, 0.1);
    --color-secondary-dark: #545b62;
    --color-secondary-border: #d6d8db;

    --color-success: #198754;
    --color-success-hover: #157347;
    --color-success-light: rgba(25, 135, 84, 0.1);
    --color-success-dark: #146c43;
    --color-success-border: #badbcc;

    --color-info: #0dcaf0;
    --color-info-hover: #0aa2c0;
    --color-info-light: rgba(13, 202, 240, 0.1);
    --color-info-dark: #087990;
    --color-info-border: #bee5eb;

    --color-warning: #f9cb7c;
    --color-warning-hover: #e0a800;
    --color-warning-light: rgba(255, 193, 7, 0.1);
    --color-warning-dark: var(--color-warning);
    --color-warning-border: #fce5bd;

    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;
    --color-danger-light: rgba(220, 53, 69, 0.1);
    --color-danger-dark: #b02a37;
    --color-danger-border: #f5c2c7;

    /* Cores de estado */
    --color-focus: var(--color-primary);
    --color-focus-ring: rgba(13, 110, 253, 0.25);
    --color-disabled: var(--color-gray-400);
    --color-disabled-bg: var(--color-gray-100);

    /* Cores de texto */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-500);
    --text-disabled: var(--color-gray-400);
    --text-inverse: var(--color-white);

    /* Cores de fundo */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* Cores de borda */
    --border-color: var(--color-gray-300);
    --border-color-light: var(--color-gray-200);
    --border-color-dark: var(--color-gray-400);

    /* Cores de tabela */
    --table-border-color: var(--color-gray-200);
    --table-striped-bg: var(--color-gray-50);
    --table-hover-bg: var(--color-gray-100);

    /* Cores de formulrio */
    --form-control-border-color: var(--color-gray-300);
    --form-control-border-color-focus: var(--color-primary);
    --form-control-bg: var(--color-white);
    --form-control-bg-disabled: var(--color-gray-100);
    --form-control-text: var(--color-gray-700);
    --form-control-text-disabled: var(--color-gray-500);
    --form-control-border-radius: 3.2px;

    /* Cores de botes */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-border: var(--color-primary);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover-bg: var(--color-primary-hover);
    --btn-primary-hover-border: var(--color-primary-hover);

    --btn-secondary-bg: var(--color-secondary);
    --btn-secondary-border: var(--color-secondary);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover-bg: var(--color-secondary-hover);
    --btn-secondary-hover-border: var(--color-secondary-hover);

    /* Cores de alertas */
    --alert-primary-bg: var(--color-primary-light);
    --alert-primary-border: var(--color-primary-border);
    --alert-primary-text: var(--color-primary-dark);

    --alert-secondary-bg: var(--color-secondary-light);
    --alert-secondary-border: var(--color-secondary-border);
    --alert-secondary-text: var(--text-primary);

    --alert-info-bg: var(--color-info-light);
    --alert-info-border: var(--color-info-border);
    --alert-info-text: var(--color-info-dark);

    --alert-success-bg: var(--color-success-light);
    --alert-success-border: var(--color-success-border);
    --alert-success-text: var(--color-success-dark);

    --alert-warning-bg: var(--color-warning-light);
    --alert-warning-border: var(--color-warning-border);
    --alert-warning-text: var(--color-warning-dark);

    --alert-danger-bg: var(--color-danger-light);
    --alert-danger-border: var(--color-danger-border);
    --alert-danger-text: var(--color-danger-dark);
}
