/**
 * CSS Variables - Design System
 * Todas as variáveis globais do sistema Tenkla CRM
 */

:root {
    /* ===== CORES PRIMÁRIAS ===== */
    /* Azul da marca Tenkla. Os temas em assets/css/themes/ sobrescrevem estes
       valores; aqui fica o padrão de fábrica, para nenhuma tela ficar sem cor
       caso o tema não carregue. */
    --primary: #1f6fe0;
    --primary-rgb: 31, 111, 224;
    --primary-dark: #0b4fa8;
    --primary-light: #599ef9;

    --secondary: #599ef9;
    /* Conta Digital — cor de destaque do menu. Fica fixa e NÃO usa --primary
       porque o tenant pode trocar a cor do tema, e o cartão precisa manter a
       identidade do produto financeiro. */
    --pay-gold: #c8911f;  --pay-gold-rgb: 200, 145, 31;
    --pay-blue: #1f6fe0;  --pay-blue-rgb: 31, 111, 224;
    --success: #10b981;  --success-rgb: 16, 185, 129;
    --warning: #f59e0b;  --warning-rgb: 245, 158, 11;
    --danger:  #ef4444;  --danger-rgb:  239, 68, 68;
    --info:    #3b82f6;  --info-rgb:    59, 130, 246;

    /* ===== BACKGROUNDS ===== */
    --bg-body: #1e1e1e;
    --bg-card: #252525;
    --bg-header: #1a1a1a;
    --bg-hover: #333333;
    --bg-input: rgba(255, 255, 255, 0.05);

    /* ===== TEXTOS ===== */
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-heading: #ffffff;

    /* ===== BORDAS ===== */
    --border: rgba(255, 255, 255, 0.1);
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;

    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);

    /* ===== ESPAÇAMENTOS ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* ===== TIPOGRAFIA ===== */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;

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

    /* ===== TIPOGRAFIA COMPLEMENTAR ===== */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* ===== TAMANHOS DE COMPONENTES ===== */
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 1.25rem;
    --btn-padding-y-sm: 0.375rem;
    --btn-padding-x-sm: 0.875rem;
    --btn-font-size: var(--font-size-base);
    --btn-border-radius: var(--border-radius);

    --badge-padding-y: 0.25rem;
    --badge-padding-x: 0.75rem;
    --badge-border-radius: 20px;
    --badge-font-size: var(--font-size-xs);

    --input-padding-y: 8px;
    --input-padding-x: 12px;
    --table-cell-padding: 12px;
    --card-padding: 14px;
    --card-border-radius: var(--border-radius-lg);

    --navbar-padding-y: 1rem;
    --navbar-padding-x: 2rem;
    --container-padding: 2rem;

    /* ===== MODAL & OVERLAY ===== */
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    --modal-overlay-bg: rgba(0, 0, 0, 0.65);
    --modal-padding: var(--spacing-lg);
    --modal-header-padding: var(--spacing-md) var(--spacing-lg);
    --modal-blur: blur(3px);
    --modal-max-width: 800px;
    --modal-width: 95%;

    /* ===== ALERT ===== */
    --alert-padding-y: 1rem;
    --alert-padding-x: 1.5rem;
    --alert-border-radius: var(--border-radius);

    /* ===== CONFIRM MODAL ===== */
    --confirm-overlay-bg: rgba(0, 0, 0, 0.7);
    --confirm-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    --confirm-min-width: 400px;

    /* ===== LAYOUT ===== */
    /* Largura padrão de TODA página do sistema. Fixo (não 90vw): antes o clamp
       fazia a largura variar com o monitor (ex.: histórico saía 1264px em vez de 1280). */
    --container-max-width: 1280px;
    /* Exceção declarada, só para telas de tabela densa (.container-wide).
       Não usar como padrão: em monitor de 1440px o conteúdo encosta nas bordas. */
    --container-max-width-wide: 1440px;

    /* ===== SEMANTIC ALIASES ===== */
    --input-bg: var(--bg-input);
    --input-border: var(--border);
    --input-radius: 8px;
    --input-height: 45px;
    --input-padding: 0.75rem;

    --select-bg: var(--bg-input);
    --select-border: var(--border);

    --dropdown-bg: var(--bg-card);
    --dropdown-shadow: var(--shadow-lg);

    --modal-bg: var(--bg-card);
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-radius: 12px;

    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-drawer-overlay: 1090;
    --z-drawer: 1095;

    /* ===== BREAKPOINTS (documentação — media query não aceita var()) =====
       Use SEMPRE estes valores literais nos @media de todo o projeto:
         - Mobile  : max-width 639px   (< 640)
         - Tablet  : 640px a 1024px    (640 ≤ w ≤ 1024)
         - Desktop : min-width 1025px  (> 1024)
       Drawer (navbar hambúrguer) ativa em: max-width 1024px            */
    --bp-mobile: 640px;   /* referência (não usar em @media) */
    --bp-tablet: 1024px;  /* referência (não usar em @media) */
    --bp-desktop: 1280px; /* referência (não usar em @media) */

    /* ===== TOUCH (acessibilidade de toque) ===== */
    --touch-min: 44px;            /* alvo mínimo de toque (Apple/Material) */
    --container-padding-mobile: 1rem;  /* sobrescreve --container-padding no mobile */
}

/* Tema Light - Sobrescreve variáveis para tema claro */
[data-theme="light"] {
    --bg-body: #f5f5f5;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-input: #ffffff;

    --text: #1a1a1a;
    --text-muted: rgba(0, 0, 0, 0.5);
    --text-heading: #000000;

    --border: rgba(0, 0, 0, 0.1);

    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    --modal-overlay-bg: rgba(0, 0, 0, 0.45);
    --confirm-overlay-bg: rgba(0, 0, 0, 0.4);
    --confirm-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}