/**
 * variables.css
 * Design tokens: cores e tipografia do design system.
 * Ajuste os valores aqui para refletir em todo o projeto.
 *
 * Paleta "WH Empréstimos" (somente dark mode): fundo azul-marinho,
 * amarelo como cor da marca e status em verde / laranja / vermelho / azul-claro.
 */

:root {
  /* ---------- Fundos e superfícies (do mais escuro ao mais claro) ---------- */
  --bg-app: #061633;            /* fundo geral */
  --bg-sidebar: #0A1F4A;        /* sidebar, topbar e rodapé */
  --bg-surface: #0a204a;        /* cards, painéis, tabelas */
  --bg-surface-hover: #133470;  /* hover de linhas, fundo de inputs */
  --bg-elevated: #173B7A;       /* modais, dropdowns, tooltips */
  --border: #162f5e;            /* bordas e divisores */
  --border-strong: #2A4F8F;     /* borda de input em foco/hover */

  /* ---------- Marca ---------- */
  --primary: #F5B800;
  --primary-hover: #FFC929;
  --primary-gradient: linear-gradient(90deg, #F5B800, #F59E0B); /* só CTAs de alto impacto */
  --primary-soft: rgba(245, 184, 0, 0.12);
  --secondary: #2D6BD8;

  /* ---------- Texto ---------- */
  --text-primary: #FFFFFF;      /* títulos, números, nomes */
  --text-body: #C9D4EA;         /* texto corrido */
  --text-muted: #8A9BBF;        /* labels, legendas, placeholders */
  --text-disabled: #5B6E96;
  --text-on-primary: #0A1F4A;   /* texto sobre amarelo (nunca branco) */

  /* ---------- Status ---------- */
  --success: #2ECC8F;
  --warning: #FF8A3D;
  --danger: #F2545B;
  --info: #38BDF8;

  /* Fundos de badges/alertas: cor do status em 14% */
  --success-soft: rgba(46, 204, 143, 0.14);
  --warning-soft: rgba(255, 138, 61, 0.14);
  --danger-soft: rgba(242, 84, 91, 0.14);
  --info-soft: rgba(56, 189, 248, 0.14);

  /* ---------- Gráficos ---------- */
  --chart-1: #F5B800;
  --chart-2: #2D6BD8;
  --chart-3: #2ECC8F;
  --chart-4: #A78BFA;
  --chart-5: #FB7185;
  --chart-6: #38BDF8;
  --chart-grid: #1C3A73;
  --chart-label: #8A9BBF;

  /* ---------- Apelidos legados (usados pelos CSS existentes) ---------- */
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-hover);
  --color-primary-light: var(--primary-soft);

  --color-base: var(--bg-sidebar);
  --color-text-secondary: var(--text-muted);

  --color-bg: var(--bg-app);
  --color-white: var(--bg-surface);
  --color-border: var(--border);

  --color-success: var(--success);
  --color-success-light: var(--success-soft);
  --color-danger: var(--danger);
  --color-danger-light: var(--danger-soft);
  --color-warning: var(--warning);
  --color-warning-light: var(--warning-soft);
  --color-info: var(--info);
  --color-info-light: var(--info-soft);

  --color-text: var(--text-body);
  --color-text-muted: var(--text-muted);
  --color-text-on-dark: var(--text-primary);

  /* Tipografia */
  --font-heading: 'Geist', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Escala tipografica */
  --fs-h1: 32px;        /* 32px */
  --fs-h2: 24px;        /* 24px */
  --fs-h3: 20px;        /* 20px */
  --fs-h4: 18px;        /* 18px */
  --fs-h5: 16px;        /* 16px */
  --fs-h6: 14px;        /* 14px */
  --fs-body: 14px;      /* 14px - tamanho padrao */

  /* Bootstrap usa este token como tamanho base */
  --bs-body-font-size: var(--fs-body);
  --fs-small: 13px;     /* 13px */
  --fs-xs: 12px;        /* 12px */

  --lh-heading: 1.3;
  --lh-body: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Layout */
  --topbar-height: 52px;
  --navbar-height: 48px;
  --header-total-height: calc(var(--topbar-height) + var(--navbar-height));
  --sidebar-width: 250px;

  /* Bordas e sombras */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

/* ---------- Bootstrap 5.3 (data-bs-theme="dark") com a paleta do projeto ---------- */
:root,
[data-bs-theme="dark"] {
  color-scheme: dark;

  --bs-body-bg: var(--bg-app);
  --bs-body-bg-rgb: 6, 22, 51;
  --bs-body-color: var(--text-body);
  --bs-body-color-rgb: 201, 212, 234;
  --bs-emphasis-color: var(--text-primary);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-disabled);
  --bs-secondary-bg: var(--bg-surface-hover);
  --bs-tertiary-bg: var(--bg-surface);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(42, 79, 143, 0.6);

  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 245, 184, 0;
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-hover-color-rgb: 255, 201, 41;

  --bs-primary: var(--primary);
  --bs-primary-rgb: 245, 184, 0;
  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: 45, 107, 216;
  --bs-success: var(--success);
  --bs-success-rgb: 46, 204, 143;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 255, 138, 61;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 242, 84, 91;
  --bs-info: var(--info);
  --bs-info-rgb: 56, 189, 248;

  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
}