/* ============================================
   CST Design System - Design Tokens
   Sistema de tokens visuais para o modulo CST
   ============================================ */

:root {
    /* === PALETA PRIMARIA === */
    --cst-primary: #377D7D;
    --cst-primary-light: #4db6ac;
    --cst-primary-dark: #2d5656;
    --cst-primary-darker: #1f4040;
    --cst-primary-darkest: #1a3a3a;
    --cst-primary-alpha-04: rgba(55, 125, 125, 0.04);
    --cst-primary-alpha-5: rgba(55, 125, 125, 0.05);
    --cst-primary-alpha-08: rgba(55, 125, 125, 0.08);
    --cst-primary-alpha-15: rgba(55, 125, 125, 0.15);
    --cst-primary-alpha-20: rgba(55, 125, 125, 0.20);

    /* === WHITE/OVERLAY ALPHA === */
    --cst-white-alpha-10: rgba(255, 255, 255, 0.1);
    --cst-white-alpha-20: rgba(255, 255, 255, 0.2);
    --cst-white-alpha-30: rgba(255, 255, 255, 0.3);
    --cst-white-alpha-40: rgba(255, 255, 255, 0.4);
    --cst-white-alpha-50: rgba(255, 255, 255, 0.5);
    --cst-white-alpha-70: rgba(255, 255, 255, 0.7);
    --cst-white-alpha-85: rgba(255, 255, 255, 0.85);
    --cst-white-alpha-90: rgba(255, 255, 255, 0.9);

    /* === MEDALHAS/RANKING === */
    --cst-medal-gold: #ffc107;
    --cst-medal-gold-dark: #ff9800;
    --cst-medal-gold-bg: #fffde7;
    --cst-medal-gold-bg-gradient: linear-gradient(135deg, #fffde7 0%, white 50%);
    --cst-medal-gold-badge: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    --cst-medal-gold-gradient: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);

    --cst-medal-silver: #9e9e9e;
    --cst-medal-silver-dark: #757575;
    --cst-medal-silver-bg: #fafafa;
    --cst-medal-silver-bg-gradient: linear-gradient(135deg, #fafafa 0%, white 50%);
    --cst-medal-silver-badge: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    --cst-medal-silver-gradient: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);

    --cst-medal-bronze: #cd7f32;
    --cst-medal-bronze-dark: #8d5524;
    --cst-medal-bronze-bg: #fff3e0;
    --cst-medal-bronze-bg-gradient: linear-gradient(135deg, #fff3e0 0%, white 50%);
    --cst-medal-bronze-badge: linear-gradient(135deg, #cd7f32 0%, #8d5524 100%);
    --cst-medal-bronze-gradient: linear-gradient(135deg, #cd7f32 0%, #8d5524 100%);

    /* === STATUS === */
    --cst-success: #4caf50;
    --cst-success-light: #81c784;
    --cst-success-dark: #2e7d32;
    --cst-success-darker: #1b5e20;
    --cst-success-bg: #e8f5e9;
    --cst-success-alpha-05: rgba(76, 175, 80, 0.05);
    --cst-success-alpha-10: rgba(76, 175, 80, 0.1);
    --cst-success-alpha-12: rgba(76, 175, 80, 0.12);
    --cst-success-alpha-15: rgba(76, 175, 80, 0.15);
    --cst-success-alpha-20: rgba(76, 175, 80, 0.2);
    --cst-success-alpha-30: rgba(76, 175, 80, 0.3);
    --cst-success-gradient: linear-gradient(135deg, #10b981, #059669);
    --cst-success-gradient-alt: linear-gradient(135deg, #4caf50, #81c784);

    --cst-warning: #ff9800;
    --cst-warning-light: #ffb74d;
    --cst-warning-dark: #e65100;
    --cst-warning-bg: #fff3e0;
    --cst-warning-alpha-08: rgba(255, 152, 0, 0.08);
    --cst-warning-alpha-10: rgba(255, 152, 0, 0.1);
    --cst-warning-alpha-15: rgba(255, 152, 0, 0.15);
    --cst-warning-alpha-20: rgba(255, 235, 59, 0.2);
    --cst-warning-gradient: linear-gradient(135deg, #f59e0b, #d97706);

    --cst-danger: #f44336;
    --cst-danger-light: #ef9a9a;
    --cst-danger-dark: #c62828;
    --cst-danger-bg: #ffebee;
    --cst-danger-alpha-10: rgba(244, 67, 54, 0.1);
    --cst-danger-alpha-12: rgba(244, 67, 54, 0.12);
    --cst-danger-alpha-20: rgba(244, 67, 54, 0.2);
    --cst-danger-alpha-30: rgba(244, 67, 54, 0.3);
    --cst-danger-gradient: linear-gradient(135deg, #ef4444, #dc2626);

    --cst-neutral-alpha-03: rgba(0, 0, 0, 0.03);
    --cst-neutral-alpha-06: rgba(0, 0, 0, 0.06);
    --cst-neutral-alpha-08: rgba(0, 0, 0, 0.08);
    --cst-neutral-alpha-10: rgba(158, 158, 158, 0.1);

    /* === INFO (Estoque/Azul) === */
    --cst-info: #2196f3;
    --cst-info-light: #64b5f6;
    --cst-info-dark: #1976d2;
    --cst-info-bg: #e3f2fd;
    --cst-info-bg-light: #bbdefb;
    --cst-info-border: #bbdefb;
    --cst-info-header-gradient: linear-gradient(135deg, #5c9dc4 0%, #4a8db4 100%);

    /* === SECONDARY (Financeiro/Laranja) === */
    --cst-secondary: #ff9800;
    --cst-secondary-light: #ffb74d;
    --cst-secondary-dark: #f57c00;
    --cst-secondary-bg: #fff3e0;
    --cst-secondary-bg-light: #ffe0b2;
    --cst-secondary-border: #ffe0b2;
    --cst-secondary-header-gradient: linear-gradient(135deg, #d98b5f 0%, #c97d52 100%);

    /* === HEATMAP === */
    --cst-heatmap-low: #e8f5e9;
    --cst-heatmap-medium: #fff3e0;
    --cst-heatmap-high: #ffccbc;
    --cst-heatmap-critical: #ef9a9a;

    /* === TIPOS DE CUSTO === */
    --cst-custo-fixo: #377D7D;
    --cst-custo-variavel: #00838f;
    --cst-custo-grm: #2e7d32;
    --cst-custo-combustivel: #ff9800;
    --cst-custo-lubrificante: #9c27b0;
    --cst-custo-pecas: #2196f3;
    --cst-custo-pneus: #607d8b;
    --cst-custo-insumos: #4caf50;
    --cst-custo-epi: #3f51b5;
    --cst-custo-depreciacao: #795548;
    --cst-custo-financeiro: #f44336;
    --cst-custo-outros: #9e9e9e;

    /* === CATEGORIAS DE CUSTO (alias para compatibilidade) === */
    --cst-cat-combustivel: var(--cst-custo-combustivel);
    --cst-cat-lubrificante: var(--cst-custo-lubrificante);
    --cst-cat-pecas: var(--cst-custo-pecas);
    --cst-cat-pneus: var(--cst-custo-pneus);
    --cst-cat-insumos: var(--cst-custo-insumos);
    --cst-cat-epi: var(--cst-custo-epi);
    --cst-cat-depreciacao: var(--cst-custo-depreciacao);
    --cst-cat-financeiro: var(--cst-custo-financeiro);

    /* === CORES ADICIONAIS PARA GRAFICOS === */
    --cst-purple: #9c27b0;
    --cst-purple-light: #ce93d8;
    --cst-cyan: #00bcd4;
    --cst-teal: #009688;
    --cst-brown-light: #bcaaa4;
    --cst-pink-light: #f8bbd9;

    /* === BACKGROUNDS E SUPERFICIES === */
    --cst-surface: #ffffff;
    --cst-white: #ffffff;
    --cst-primary-bg: rgba(55, 125, 125, 0.08);
    --cst-primary-hover: rgba(55, 125, 125, 0.12);
    --cst-primary-muted: rgba(55, 125, 125, 0.6);
    --cst-primary-alpha-10: rgba(55, 125, 125, 0.10);
    --cst-text-on-dark: rgba(255, 255, 255, 0.95);

    /* === TOTAIS E DESTAQUE === */
    --cst-total-bg-light: var(--cst-neutral-100);
    --cst-total-bg-medium: var(--cst-neutral-200);
    --cst-total-bg-high: var(--cst-neutral-300);
    --cst-total-bg-intense: var(--cst-primary-alpha-15);
    --cst-total-text: var(--cst-neutral-700);
    --cst-total-text-dark: var(--cst-neutral-900);

    /* === MEDALHAS VARIACOES === */
    --cst-medal-silver-light: #e0e0e0;
    --cst-medal-bronze-light: #d7ccc8;

    /* === INFO VARIACOES === */
    --cst-info-200: #90caf9;

    /* === PALETA NEUTRA === */
    --cst-neutral-50: #fafafa;
    --cst-neutral-100: #f5f5f5;
    --cst-neutral-150: #f0f0f0;
    --cst-neutral-200: #e0e0e0;
    --cst-neutral-300: #bdbdbd;
    --cst-neutral-400: #9e9e9e;
    --cst-neutral-500: #757575;
    --cst-neutral-500-alpha-10: rgba(117, 117, 117, 0.1);
    --cst-neutral-600: #616161;
    --cst-neutral-700: #424242;
    --cst-neutral-800: #263238;
    --cst-neutral-900: #212121;

    /* === ESPACAMENTOS === */
    --cst-spacing-xs: 4px;
    --cst-spacing-sm: 8px;
    --cst-spacing-md: 12px;
    --cst-spacing-lg: 16px;
    --cst-spacing-xl: 20px;
    --cst-spacing-2xl: 24px;
    --cst-spacing-3xl: 32px;

    /* === BORDER RADIUS === */
    --cst-radius-xs: 4px;
    --cst-radius-sm: 6px;
    --cst-radius-md: 8px;
    --cst-radius-lg: 12px;
    --cst-radius-xl: 16px;
    --cst-radius-full: 50%;

    /* === SOMBRAS === */
    --cst-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --cst-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --cst-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --cst-shadow-intense: 0 2px 8px rgba(0, 0, 0, 0.2);
    --cst-shadow-top: 0 -4px 12px rgba(0, 0, 0, 0.15);
    --cst-shadow-primary: 0 8px 24px rgba(55, 125, 125, 0.15);
    --cst-shadow-hover: 0 4px 12px rgba(55, 125, 125, 0.1);
    --cst-shadow-medal-gold: 0 2px 8px rgba(255, 193, 7, 0.4);
    --cst-shadow-medal-silver: 0 2px 8px rgba(158, 158, 158, 0.4);
    --cst-shadow-medal-bronze: 0 2px 8px rgba(205, 127, 50, 0.4);

    /* === GRADIENTES HERO === */
    --cst-hero-gradient: linear-gradient(135deg, #377D7D 0%, #2d5656 50%, #1f4040 100%);
    --cst-hero-gradient-dark: linear-gradient(135deg, #1a3a3a 0%, #2d5a5a 50%, #377D7D 100%);
    --cst-hero-gradient-light: linear-gradient(135deg, #4db6ac 0%, #377D7D 50%, #2d5656 100%);

    /* === GRADIENTES TOOLTIP === */
    --cst-tooltip-dark-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

    /* === GRADIENTES BARRA PROGRESSO === */
    --cst-progress-gradient: linear-gradient(90deg, #377D7D, #4db6ac);
    --cst-progress-gradient-success: linear-gradient(90deg, #66bb6a, #81c784);
    --cst-progress-gradient-danger: linear-gradient(90deg, #ef5350, #e57373);
    --cst-progress-gradient-warning: linear-gradient(90deg, #ffb74d, #ffc107);

    /* === GRADIENTES SKELETON/LOADING === */
    --cst-skeleton-gradient: linear-gradient(90deg, var(--cst-neutral-150) 25%, var(--cst-neutral-200) 50%, var(--cst-neutral-150) 75%);

    /* === GRADIENTES RANKING ITEM BACKGROUND === */
    --cst-ranking-item-gold-bg: linear-gradient(135deg, #fff8e1 0%, var(--cst-medal-gold-bg) 100%);
    --cst-ranking-item-silver-bg: linear-gradient(135deg, var(--cst-neutral-50) 0%, var(--cst-neutral-100) 100%);
    --cst-ranking-item-bronze-bg: linear-gradient(135deg, var(--cst-medal-bronze-bg) 0%, var(--cst-secondary-bg-light) 100%);

    /* === TRANSICOES === */
    --cst-transition-fast: 0.15s ease;
    --cst-transition-normal: 0.2s ease;
    --cst-transition-slow: 0.3s ease;
    --cst-transition-slower: 0.4s ease-out;

    /* === TIPOGRAFIA === */
    --cst-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --cst-font-size-xs: 10px;
    --cst-font-size-sm: 12px;
    --cst-font-size-md: 14px;
    --cst-font-size-lg: 16px;
    --cst-font-size-xl: 20px;
    --cst-font-size-2xl: 24px;
    --cst-font-size-3xl: 32px;
    --cst-font-weight-normal: 400;
    --cst-font-weight-medium: 500;
    --cst-font-weight-semibold: 600;
    --cst-font-weight-bold: 700;

    /* === Z-INDEX === */
    --cst-z-dropdown: 100;
    --cst-z-sticky: 200;
    --cst-z-fixed: 300;
    --cst-z-modal: 400;
    --cst-z-tooltip: 500;
    --cst-z-fab: 1000;

    /* === DELAY ANIMACAO ESCALONADA === */
    --cst-anim-delay-step: 80ms;
}

/* === CLASSES UTILITARIAS DE COR === */
.cst-text-primary { color: var(--cst-primary) !important; }
.cst-text-success { color: var(--cst-success) !important; }
.cst-text-warning { color: var(--cst-warning) !important; }
.cst-text-danger { color: var(--cst-danger) !important; }
.cst-text-muted { color: var(--cst-neutral-500) !important; }

.cst-bg-primary { background-color: var(--cst-primary) !important; }
.cst-bg-success { background-color: var(--cst-success-bg) !important; }
.cst-bg-warning { background-color: var(--cst-warning-bg) !important; }
.cst-bg-danger { background-color: var(--cst-danger-bg) !important; }

.cst-border-primary { border-color: var(--cst-primary) !important; }
.cst-border-success { border-color: var(--cst-success) !important; }
.cst-border-warning { border-color: var(--cst-warning) !important; }
.cst-border-danger { border-color: var(--cst-danger) !important; }

/* === CLASSES DE LAYOUT === */
.cst-card {
    background: white;
    border-radius: var(--cst-radius-lg);
    border: 1px solid var(--cst-neutral-200);
    transition: all var(--cst-transition-normal);
}

.cst-card:hover {
    box-shadow: var(--cst-shadow-hover);
}

.cst-paper {
    background: var(--cst-neutral-50);
    border-radius: var(--cst-radius-md);
    padding: var(--cst-spacing-lg);
}

/* === STATUS INDICATORS === */
.cst-indicator-success {
    border-left: 4px solid var(--cst-success);
}

.cst-indicator-warning {
    border-left: 4px solid var(--cst-warning);
}

.cst-indicator-danger {
    border-left: 4px solid var(--cst-danger);
}

.cst-indicator-primary {
    border-left: 4px solid var(--cst-primary);
}