/* ============================================
   Design System - Variáveis CSS
   ============================================
   Sistema de cores, espaçamentos e tipografia
   baseado no padrão visual estabelecido no Laravel
*/

:root {
    /* ============================================
     Cores Primárias da Marca
     ============================================ */
    --brand-primary: #27132e;
    --brand-secondary: #e3402d;
    --brand-primary-dark: #1a0d1f;
    --brand-primary-darker: #0f0812;
    --brand-primary-light: #3d1f47;
    --brand-primary-lighter: #532b5f;
    --brand-secondary-dark: #c73625;
    --brand-secondary-darker: #ab2d1e;
    --brand-secondary-light: #f05a4a;
    --brand-secondary-lighter: #f37466;

    /* Cores de Texto sobre Fundo da Marca */
    --brand-text-on-primary: #ffffff;
    --brand-text-on-secondary: #ffffff;

    /* Cores de Hover/Estados */
    --brand-primary-hover: #2e1635;
    --brand-secondary-hover: #e94a3a;

    /* Cores de Background/Overlay */
    --brand-primary-overlay: rgba(39, 19, 46, 0.9);
    --brand-secondary-overlay: rgba(227, 64, 45, 0.9);

    /* ============================================
     Cores Primárias por Módulo
     Todas mapeadas para as cores do tema
     ============================================ */

    /* Dashboard/Financeiro */
    --dashboard-primary: var(--brand-primary);
    --dashboard-primary-dark: var(--brand-primary-dark);

    /* Usuários */
    --usuarios-primary: var(--brand-primary);
    --usuarios-primary-dark: var(--brand-primary-dark);

    /* Agentes */
    --agentes-primary: var(--brand-primary);
    --agentes-primary-dark: var(--brand-primary-dark);

    /* Contratos */
    --contratos-primary: var(--brand-primary);
    --contratos-primary-dark: var(--brand-primary-dark);

    /* Equipes */
    --equipes-primary: var(--brand-primary);
    --equipes-primary-dark: var(--brand-primary-dark);

    /* Conciliação */
    --conciliacao-primary: var(--brand-primary);
    --conciliacao-primary-dark: var(--brand-primary-dark);

    /* Auditoria */
    --auditoria-primary: var(--brand-primary);
    --auditoria-primary-dark: var(--brand-primary-dark);

    /* Configurações */
    --configuracoes-primary: var(--brand-primary);
    --configuracoes-primary-dark: var(--brand-primary-dark);

    /* Projetos */
    --projetos-primary: var(--brand-primary);
    --projetos-primary-dark: var(--brand-primary-dark);

    /* Requisitos */
    --requisitos-primary: var(--brand-primary);
    --requisitos-primary-dark: var(--brand-primary-dark);

    /* Desenvolvimento */
    --desenvolvimento-primary: var(--brand-primary);
    --desenvolvimento-primary-dark: var(--brand-primary-dark);

    /* QA */
    --qa-primary: var(--brand-primary);
    --qa-primary-dark: var(--brand-primary-dark);

    /* CRM */
    --crm-primary: var(--brand-primary);
    --crm-primary-dark: var(--brand-primary-dark);

    /* Sistema */
    --sistema-primary: var(--brand-primary);
    --sistema-primary-dark: var(--brand-primary-dark);

    /* Vendas */
    --vendas-primary: var(--brand-primary);
    --vendas-primary-dark: var(--brand-primary-dark);

    /* Customer Success */
    --customer-success-primary: var(--brand-primary);
    --customer-success-primary-dark: var(--brand-primary-dark);

    /* Administração */
    --admin-primary: var(--brand-primary);
    --admin-primary-dark: var(--brand-primary-dark);

    /* Variável genérica para uso dinâmico */
    --modulo-primary: var(--dashboard-primary);
    --modulo-primary-dark: var(--dashboard-primary-dark);

    /* Variáveis Material Design (usando cores da marca) */
    --md-primary: var(--brand-primary);
    --md-primary-dark: var(--brand-primary-dark);
    --md-primary-light: var(--brand-primary-light);

    /* ============================================
     Cores de Feedback e Ações
     ============================================ */
    --success: var(--color-success);
    --success-light: #d5f4e6;
    --success-dark: #1e8449;
    --warning: var(--color-warning);
    --warning-light: #fef5e7;
    --warning-dark: #d68910;
    --danger: var(--color-error);
    --danger-light: #fadbd8;
    --danger-dark: #c73625;
    --info: var(--color-info);
    --info-light: #f0e8f2;
    --info-dark: #1a0d1f;

    /* Cores de Ação (usando cor secundária da marca) */
    --action-primary: var(--brand-secondary);
    --action-primary-dark: var(--brand-secondary-dark);
    --action-primary-light: var(--brand-secondary-light);

    /* ============================================
     Cores Neutras
     ============================================ */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #95a5a6;
    --text-muted: #95a5a6;

    --border: #e9ecef;
    --border-light: #f0f0f0;
    --border-dark: #dee2e6;

    --background: #f8f9fa;
    --background-light: #ffffff;
    --background-medium: #ecf0f1;
    --background-dark: #95a5a6;
    --background-secondary: #f8f9fa;
    --background-tertiary: #f5f7fb;

    /* Cores de Gray (compatibilidade Bootstrap) */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* ============================================
     Espaçamentos
     ============================================ */
    /* Gap */
    --gap-xs: 5px;
    --gap-sm: 10px;
    --gap-md: 15px;
    --gap-lg: 20px;
    --gap-xl: 25px;
    --gap-xxl: 30px;
    --gap-xxxl: 35px;

    /* Escala de gap para grids (RESP-014): usar em MetricsGrid, CardsGrid, ListCardsGrid */
    /* desktop: --gap-lg (20px) | tablet ≤992: --gap-md (15px) | mobile ≤768: --gap-md (15px) | ≤430px: --gap-sm (10px) | ≤320px: --gap-grid-xs (8px) */
    --gap-grid-xs: 8px;

    /* Padding */
    --padding-xs: 8px;
    --padding-sm: 12px;
    --padding-md: 15px;
    --padding-lg: 20px;
    --padding-xl: 25px;
    --padding-xxl: 30px;

    /* Margin */
    --margin-xs: 8px;
    --margin-sm: 12px;
    --margin-md: 15px;
    --margin-lg: 20px;
    --margin-xl: 25px;
    --margin-xxl: 30px;
    --margin-xxxl: 35px;

    /* ============================================
     Tipografia
     ============================================ */
    /* Tamanhos fixos (UI crítica: botões, labels, componentes) */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 20px;
    --font-size-xxxl: 22px;
    --font-size-h3: 18px;
    --font-size-h2: 22px;
    --font-size-h1: 28px;

    /* Tipografia fluida (RESP-009): escala entre ~320px e 1440px; legibilidade mantida */
    --font-size-h1-fluid: clamp(1.25rem, 2.5vw + 1rem, 1.75rem);   /* 20px–28px */
    --font-size-h2-fluid: clamp(1.125rem, 2vw + 0.75rem, 1.375rem); /* 18px–22px */
    --font-size-h3-fluid: clamp(1rem, 1.5vw + 0.75rem, 1.125rem);   /* 16px–18px */

    /* Título de página em mobile (RESP-012): ≤430px; usar em PageHeader / PageHeaderPagina */
    --font-size-page-title-mobile: 1.25rem;

    /* ============================================
     Mobile shell (MDS) — clearance, toque, densidade
     Alinhado a mixins em styles/_breakpoints.scss
     ============================================ */
    --mobile-touch-target: 44px;
    --mobile-page-padding-x: var(--padding-md);
    --mobile-page-padding-y: var(--padding-sm);
    --mobile-card-padding-x: 14px;
    --mobile-card-padding-y: 12px;
    --mobile-card-radius: 10px;
    --mobile-card-gap: 10px;
    --mobile-sheet-radius: 16px;
    /* Conteúdo acima de MobilePageActionBar / tab bar projeto */
    --mobile-bottom-bar-clearance: max(72px, calc(60px + env(safe-area-inset-bottom, 0px)));
    /* FAB acima da barra fixa */
    --mobile-fab-clearance: max(88px, calc(76px + env(safe-area-inset-bottom, 0px)));
    /* Só tab bar (sem action bar) */
    --mobile-tab-bar-clearance: max(56px, calc(48px + env(safe-area-inset-bottom, 0px)));
    --mobile-header-compact-min-height: 48px;
    --z-mobile-chrome: 850;
    --z-mobile-sheet: 1100;
    --z-mobile-toast-above: 1200;

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

    /* Tipografia base (override via aparência / biblioteca de fontes) */
    --font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

    /* ============================================
     Border Radius
     ============================================ */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 20px;

    /* ============================================
     Box Shadows (Modernos e Suaves)
     ============================================ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);

    /* ============================================
     Transições (Suaves e Modernas)
     ============================================ */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
     Z-Index
     ============================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ============================================
     Tokens semânticos (superfície / texto / foco)
     — alinhados ao ThemeContext: classe .dark no <html>
     — feedback: fallbacks antes do JS (ThemeContext sobrescreve marca)
     ============================================ */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #e3402d;
    --color-info: #1890ff;

    --surface-muted: var(--background);
    --surface: var(--background-light);
    --surface-elevated: var(--background-light);
    --text-default: var(--text-primary);
    --text-subtle: var(--text-secondary);
    --border-default: var(--border);
    --primary: var(--brand-primary);
}

/*
 * Modo escuro: document.documentElement.classList.add('dark') em ThemeContext.
 * Superfícies em cinza neutro (sem cast azulado/slate) — alinhado ao Ant Design dark (#141414 / #1f1f1f).
 */
html.dark {
    --surface-muted: #0a0a0a;
    --surface: #141414;
    --surface-elevated: #1f1f1f;

    --text-primary: #e5e5e5;
    --text-secondary: #a3a3a3;
    --text-light: #8c8c8c;
    --text-muted: #8c8c8c;

    --border: #303030;
    --border-light: #262626;
    --border-dark: #434343;

    --background: var(--surface-muted);
    --background-light: var(--surface-elevated);
    --background-medium: #262626;
    --background-dark: #595959;
    --background-secondary: #121212;
    --background-tertiary: #171717;

    --gray-50: #141414;
    --gray-100: #1a1a1a;
    --gray-200: #262626;
    --gray-300: #303030;
    --gray-400: #434343;
    --gray-500: #737373;
    --gray-600: #a3a3a3;
    --gray-700: #d4d4d4;
    --gray-800: #e5e5e5;
    --gray-900: #f5f5f5;

    --success-light: #143d2a;
    --warning-light: #3d3208;
    --danger-light: #3d1818;
    --info-light: #1a1a1a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 10px 28px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
    --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.35);

    --text-default: var(--text-primary);
    --text-subtle: var(--text-secondary);
    --border-default: var(--border);
    --primary: var(--brand-primary-light);
}

/* ============================================
   Classes Utilitárias para Cores de Módulo
   ============================================
   Permite aplicar cores de módulo dinamicamente
*/

.modulo-dashboard {
    --modulo-primary: var(--dashboard-primary);
    --modulo-primary-dark: var(--dashboard-primary-dark);
}

.modulo-usuarios {
    --modulo-primary: var(--usuarios-primary);
    --modulo-primary-dark: var(--usuarios-primary-dark);
}

.modulo-agentes {
    --modulo-primary: var(--agentes-primary);
    --modulo-primary-dark: var(--agentes-primary-dark);
}

.modulo-contratos {
    --modulo-primary: var(--contratos-primary);
    --modulo-primary-dark: var(--contratos-primary-dark);
}

.modulo-equipes {
    --modulo-primary: var(--equipes-primary);
    --modulo-primary-dark: var(--equipes-primary-dark);
}

.modulo-conciliacao {
    --modulo-primary: var(--conciliacao-primary);
    --modulo-primary-dark: var(--conciliacao-primary-dark);
}

.modulo-auditoria {
    --modulo-primary: var(--auditoria-primary);
    --modulo-primary-dark: var(--auditoria-primary-dark);
}

.modulo-configuracoes {
    --modulo-primary: var(--configuracoes-primary);
    --modulo-primary-dark: var(--configuracoes-primary-dark);
}

.modulo-projetos {
    --modulo-primary: var(--projetos-primary);
    --modulo-primary-dark: var(--projetos-primary-dark);
}

.modulo-requisitos {
    --modulo-primary: var(--requisitos-primary);
    --modulo-primary-dark: var(--requisitos-primary-dark);
}

.modulo-desenvolvimento {
    --modulo-primary: var(--desenvolvimento-primary);
    --modulo-primary-dark: var(--desenvolvimento-primary-dark);
}

.modulo-qa {
    --modulo-primary: var(--qa-primary);
    --modulo-primary-dark: var(--qa-primary-dark);
}

.modulo-crm {
    --modulo-primary: var(--crm-primary);
    --modulo-primary-dark: var(--crm-primary-dark);
}

.modulo-sistema {
    --modulo-primary: var(--sistema-primary);
    --modulo-primary-dark: var(--sistema-primary-dark);
}

.modulo-vendas {
    --modulo-primary: var(--vendas-primary);
    --modulo-primary-dark: var(--vendas-primary-dark);
}

.modulo-customer-success {
    --modulo-primary: var(--customer-success-primary);
    --modulo-primary-dark: var(--customer-success-primary-dark);
}

.modulo-admin {
    --modulo-primary: var(--admin-primary);
    --modulo-primary-dark: var(--admin-primary-dark);
}