/* ==============================================
   DESIGN TOKENS — CloudTracking
   Paleta oficial da marca. NUNCA use cores
   hardcoded fora deste arquivo.
   ============================================== */

:root {
    /* ===== PALETA DA MARCA ===== */
    --ink:      #0A0E1A;   /* Superfície principal · fundo dark */
    --navy:     #0F1B3D;   /* Marca profunda · painéis */
    --navy-2:   #142450;   /* Painéis elevados */
    --blue:     #3B82F6;   /* Marca primária · CTA */
    --blue-2:   #2563EB;   /* Hover · pressionado */
    --cyan:     #60E2FF;   /* Acento · pulso · destaque */
    --grey:     #8B95A7;   /* Corpo secundário */
    --grey-2:   #C8CFDB;   /* Bordas · divisores */
    --paper:    #F6F8FB;   /* Superfície clara · fundo light */
    --white:    #FFFFFF;   /* Superfície · texto sobre dark */

    /* Gradiente da marca (símbolo, CTAs premium) */
    --gradient-brand: linear-gradient(135deg, #60E2FF 0%, #3B82F6 100%);
    --gradient-brand-deep: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);

    /* ===== MAPEAMENTO SEMÂNTICO ===== */

    /* Cor primária = Blue */
    --primary-color:  var(--blue);
    --primary-dark:   var(--blue-2);
    --primary-light:  #93C5FD;   /* blue-300 para estados leves */

    /* Acento = Cyan */
    --accent-color:   var(--cyan);

    /* Fundos */
    --background-color: var(--paper);
    --card-bg:          var(--white);
    --input-bg:         var(--paper);

    /* Sidebar (light) */
    --sidebar-bg:       var(--white);
    --sidebar-hover:    #f3f4f6;
    --sidebar-active-from: #667eea;
    --sidebar-active-to:   #764ba2;
    --sidebar-text:     var(--grey);
    --sidebar-text-active: var(--white);
    --sidebar-label:    var(--grey);

    /* Texto */
    --text-primary:   var(--ink);
    --text-secondary: var(--grey);
    --text-muted:     var(--grey-2);
    --text-disabled:  #D1D5DB;

    /* Bordas */
    --border-color:   var(--grey-2);
    --border-light:   #EEF2F7;
    --border-dark:    var(--grey);

    /* Gradiente legado (alias) */
    --gradient-primary: var(--gradient-brand);

    /* ===== CORES DE ESTADO ===== */
    --success-color:  #10B981;
    --success-bg:     #D1FAE5;
    --success-border: #6EE7B7;

    --warning-color:  #F59E0B;
    --warning-bg:     #FEF3C7;
    --warning-border: #FDE68A;

    --error-color:    #EF4444;
    --error-bg:       #FEE2E2;
    --error-border:   #FECACA;

    --info-color:     var(--blue);
    --info-bg:        #DBEAFE;
    --info-border:    #BFDBFE;

    /* ===== SOMBRAS ===== */
    --shadow-xs:  0 1px 2px rgba(10,14,26,0.05);
    --shadow-sm:  0 1px 3px rgba(10,14,26,0.10), 0 1px 2px rgba(10,14,26,0.06);
    --shadow-md:  0 4px 6px -1px rgba(10,14,26,0.10), 0 2px 4px -1px rgba(10,14,26,0.06);
    --shadow-lg:  0 10px 15px -3px rgba(10,14,26,0.10), 0 4px 6px -2px rgba(10,14,26,0.05);
    --shadow-xl:  0 20px 25px -5px rgba(10,14,26,0.10), 0 10px 10px -5px rgba(10,14,26,0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(10,14,26,0.25);

    /* Sombra primária com cor da marca */
    --shadow-primary:    0 4px 12px rgba(59,130,246,0.30);
    --shadow-primary-lg: 0 6px 20px rgba(59,130,246,0.40);
    --shadow-cyan:       0 4px 16px rgba(96,226,255,0.25);

    /* ===== DIMENSÕES LAYOUT ===== */
    --sidebar-width:     80px;
    --sidebar-collapsed: 80px;
    --header-height:     70px;

    /* ===== ESPAÇAMENTOS ===== */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  0.75rem;
    --spacing-lg:  1rem;
    --spacing-xl:  1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;

    /* ===== BORDER RADIUS (Neo-Brutalist Sharp Edge) ===== */
    --radius-sm:   0px;
    --radius-md:   2px;
    --radius-lg:   2px;
    --radius-xl:   4px;
    --radius-2xl:  4px;
    --radius-full: 9999px;

    /* ===== TRANSIÇÕES ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== TIPOGRAFIA ===== */
    --font-family-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-mono:    'Courier New', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 0.9375rem;
    --text-lg:   1rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;

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

    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    /* ===== Z-INDEX ===== */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  500;
    --z-modal:    1000;
    --z-toast:    2000;
    --z-tooltip:  3000;
}

/* Removido overrides de Dark Mode */

/* ===== UTILITÁRIOS DE ESPAÇAMENTO ===== */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ===== UTILITÁRIOS DE COR DA MARCA ===== */
.text-brand    { color: var(--blue); }
.text-accent   { color: var(--cyan); }
.text-ink      { color: var(--ink); }
.text-grey     { color: var(--grey); }
.bg-navy       { background: var(--navy); }
.bg-paper      { background: var(--paper); }
.bg-brand      { background: var(--blue); color: var(--white); }
.bg-accent     { background: var(--cyan); color: var(--ink); }
.border-brand  { border-color: var(--blue); }
.border-accent { border-color: var(--cyan); }