/**
 * ========================================
 * VARIÁVEIS CSS GLOBAIS - SISTEMA FINANCA
 * ========================================
 *
 * Arquivo centralizado com todas as variáveis CSS para padronização
 * e facilitar manutenção futura do sistema.
 *
 * Como usar:
 * 1. Incluir este arquivo ANTES dos outros CSS nas páginas HTML
 * 2. Usar as variáveis com var(--nome-da-variavel)
 *
 * Exemplo:
 * <link rel="stylesheet" href="../css/base-variables.css?v=<?= ASSET_VERSION ?>">
 * <link rel="stylesheet" href="../css/cssdashboard.css?v=<?= ASSET_VERSION ?>">
 *
 * Data de criação: 2026-01-28
 * Última atualização: 2026-01-28
 */

:root {
  /* ==================== */
  /* BREAKPOINTS          */
  /* ==================== */

  /**
   * Breakpoints padronizados para media queries
   * Estes valores foram definidos após análise de 42 arquivos CSS
   */
  --breakpoint-tablet: 767px;
  --breakpoint-mobile: 575px;
  --breakpoint-mobile-small: 479px;

  /* ==================== */
  /* CORES PRINCIPAIS     */
  /* ==================== */

  /**
   * Paleta de cores do sistema
   */
  --color-primary: #007f95;
  --color-primary-rgb: 0, 127, 149;
  --color-primary-light: #4ac9e2;
  --color-primary-dark: #1f505a;
  --color-primary-darker: #3a93a3;

  --color-sidebar-1: #69abac;
  --color-sidebar-2: #307576;
  --color-sidebar-3: #d7ecec;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-background: #eeeeee;
  --color-background-light: #f0f0f0;
  --color-background-gradient-1: #f4d4a4;
  --color-background-gradient-2: #ffffff;

  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-muted: #999999;

  --color-border: #dee2e6;
  --color-border-light: #ddd;

  /* ==================== */
  /* SPACING              */
  /* ==================== */

  /**
   * Valores de padding padronizados para containers
   * Aplicados em @media queries para responsividade
   */
  --container-padding-desktop: 20px;
  --container-padding-tablet: 15px;
  --container-padding-mobile: 12px;

  /**
   * Header banner padding
   */
  --header-padding-desktop: 40px 20px;
  --header-padding-tablet: 30px 15px;
  --header-padding-mobile: 20px 10px;

  /**
   * Spacing geral
   */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;

  /* ==================== */
  /* TIPOGRAFIA           */
  /* ==================== */

  /**
   * Tamanhos de fonte padronizados
   * Desktop (base)
   */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.1rem;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;

  /**
   * Tablet (≤767px)
   * Redução de 15-20%
   */
  --font-size-h1-tablet: 1.8rem;
  --font-size-h2-tablet: 1.6rem;
  --font-size-h3-tablet: 1.3rem;
  --font-size-h4-tablet: 1.1rem;
  --font-size-h5-tablet: 1rem;

  /**
   * Mobile (≤575px)
   * Redução de 25-30%
   */
  --font-size-h1-mobile: 1.5rem;
  --font-size-h2-mobile: 1.4rem;
  --font-size-h3-mobile: 1.1rem;
  --font-size-h4-mobile: 1rem;
  --font-size-h5-mobile: 0.95rem;

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

  /**
   * Font family
   */
  --font-family-primary: "Poppins", sans-serif;

  /* ==================== */
  /* BORDERS & RADIUS     */
  /* ==================== */

  --border-width: 2px;
  --border-radius-sm: 5px;
  --border-radius-md: 8px;
  --border-radius: 10px;
  --border-radius-lg: 12px;
  --border-radius-xl: 15px;

  /* ==================== */
  /* SHADOWS              */
  /* ==================== */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);

  --shadow-primary: 0 4px 8px rgba(41, 115, 123, 0.3);
  --shadow-primary-lg: 0 8px 16px rgba(41, 115, 123, 0.4);

  /* ==================== */
  /* TRANSITIONS          */
  /* ==================== */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ==================== */
  /* Z-INDEX              */
  /* ==================== */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-loading: 9999;

  /* ==================== */
  /* SIDEBAR              */
  /* ==================== */

  --sidebar-width: 220px;
  --sidebar-padding: 20px;

  /* ==================== */
  /* BUTTONS              */
  /* ==================== */

  --button-padding: 8px 12px;
  --button-font-size: 14px;
  --button-min-height: 44px;
  /* Touch-friendly */
  --button-min-width: 44px;
  /* Touch-friendly */

  /* ==================== */
  /* FORMS                */
  /* ==================== */

  --input-padding: 10px;
  --input-border-width: 2px;
  --input-border-radius: 5px;

  /* ==================== */
  /* MODALS               */
  /* ==================== */

  --modal-max-width-lg: 800px;
  --modal-padding: 20px;
  --modal-padding-mobile: 15px;
  --modal-title-font-size: 1.25rem;
  --modal-title-font-size-mobile: 1.1rem;

  /* ==================== */
  /* TABLES               */
  /* ==================== */

  --table-padding-desktop: 12px;
  --table-padding-mobile: 8px;
  --table-font-size-mobile: 14px;
}

/**
 * ========================================
 * MEDIA QUERIES COM VARIÁVEIS
 * ========================================
 *
 * IMPORTANTE: CSS custom properties (variáveis) NÃO funcionam
 * em media queries. Estes são valores de referência.
 *
 * Use diretamente nas media queries:
 * @media (max-width: 767px) { ... }
 * @media (max-width: 575px) { ... }
 */

/**
 * ========================================
 * PADRÕES DE USO
 * ========================================
 *
 * CONTAINER PADDING:
 * ==================
 * .container {
 *   padding: var(--container-padding-desktop);
 * }
 *
 * @media (max-width: 767px) {
 *   .container {
 *     padding: var(--container-padding-tablet);
 *   }
 * }
 *
 * @media (max-width: 575px) {
 *   .container {
 *     padding: var(--container-padding-mobile);
 *   }
 * }
 *
 *
 * HEADER BANNER:
 * ==============
 * .header-banner {
 *   padding: var(--header-padding-desktop);
 *   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
 * }
 *
 * @media (max-width: 767px) {
 *   .header-banner {
 *     padding: var(--header-padding-tablet);
 *   }
 * }
 *
 *
 * TIPOGRAFIA:
 * ===========
 * h1 {
 *   font-size: var(--font-size-h1);
 *   font-weight: var(--font-weight-bold);
 * }
 *
 * @media (max-width: 767px) {
 *   h1 {
 *     font-size: var(--font-size-h1-tablet);
 *   }
 * }
 *
 *
 * CORES:
 * ======
 * .btn-primary {
 *   background-color: var(--color-primary);
 *   color: var(--color-white);
 * }
 *
 * .btn-primary:hover {
 *   background-color: var(--color-primary-dark);
 * }
 */

/**
 * ========================================
 * CHANGELOG
 * ========================================
 *
 * 2026-01-28 - v1.0.0
 * - Criação inicial do arquivo
 * - Definição de breakpoints padronizados (767px, 575px)
 * - Valores de spacing padronizados (container, header)
 * - Paleta de cores do sistema
 * - Tipografia responsiva
 * - Shadows, transitions, z-index
 * - Documentação de uso
 */