/* ==========================================================================
   SOUL MALLS | RGD WEB — DESIGN TOKENS
   ==========================================================================
   Tokens fundamentais do sistema de design: Cores, Tipografia, Espaçamentos,
   Bordas, Sombras e Dimensões globais.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     TIPOGRAFIA
     ========================================================================== */
  --font-main: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-title: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Escala Tipográfica */
  --text-2xs: 0.65rem;   /* 10.4px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */

  /* Pesos de Fonte */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ==========================================================================
     PALETA CORPORATIVA PRINCIPAL (SOUL MALLS / RGD WEB)
     ========================================================================== */
  /* Azul Institucional / Sidebar */
  --ink: #102d42;
  --ink-light: #173d59;
  --ink-dark: #0a1e2d;

  /* Primária Soul Malls (Azul Petróleo) */
  --green: #285a7b;
  --green-hover: #1d4866;
  --green-active: #153850;
  --green-light: #eaf1f6;
  --green2: #eaf1f6;

  /* Superfícies & Fundos */
  --white: #ffffff;
  --bg-app: #f3f5f7;          /* Fundo geral neutro */
  --cream: #f8fafc;           /* Fundo secundário suave */
  --line: #e2e8f0;            /* Bordas e divisores */
  --line-strong: #cbd5e1;     /* Linhas de maior contraste */

  /* Textos & Neutros */
  --muted: #64748b;           /* Texto secundário */
  --muted-light: #94a3b8;     /* Texto terciário / placeholders */
  --text-dark: #0f172a;       /* Texto escuro de alto contraste */

  /* ==========================================================================
     CORES SEMÂNTICAS & STATUS
     ========================================================================== */
  /* Sucesso / Positivo */
  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text: #047857;

  /* Alerta / Atenção */
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #b45309;

  /* Perigo / Erro / Negativo */
  --color-danger: #ef4444;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fca5a5;
  --color-danger-text: #b91c1c;

  /* Info / Informativo */
  --color-info: #3b82f6;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-text: #1d4ed8;

  /* ==========================================================================
     CORES DE DEPARTAMENTOS (SOUL MALLS)
     ========================================================================== */
  /* Financeiro (Azul) */
  --dept-financeiro: #3b82f6;
  --dept-financeiro-bg: #eff6ff;
  --dept-financeiro-border: #bfdbfe;
  --dept-financeiro-text: #1d4ed8;

  /* Marketing (Roxo) */
  --dept-marketing: #7c3aed;
  --dept-marketing-bg: #faf5ff;
  --dept-marketing-border: #e9d5ff;
  --dept-marketing-text: #6d28d9;

  /* Comercial (Laranja) */
  --dept-comercial: #f97316;
  --dept-comercial-bg: #fff7ed;
  --dept-comercial-border: #ffedd5;
  --dept-comercial-text: #c2410c;

  /* Operações (Ciano) */
  --dept-operacoes: #06b6d4;
  --dept-operacoes-bg: #ecfeff;
  --dept-operacoes-border: #a5f3fc;
  --dept-operacoes-text: #0e7490;

  /* ==========================================================================
     SOMBRAS & ELEVAÇÕES
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(16, 45, 66, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 45, 66, 0.05);
  --shadow-card: 0 1px 3px rgba(23, 61, 89, 0.04), 0 8px 24px rgba(23, 61, 89, 0.06);
  --shadow-hover: 0 4px 14px rgba(23, 61, 89, 0.08), 0 12px 28px rgba(23, 61, 89, 0.05);
  --shadow-dropdown: 0 16px 36px -6px rgba(15, 23, 42, 0.16);
  --shadow-modal: 0 20px 60px rgba(15, 40, 58, 0.25);

  /* ==========================================================================
     DIMENSÕES E BORDAS
     ========================================================================== */
  --header-height: 66px;
  --sidebar-collapsed: 62px;
  --sidebar-expanded: 240px;

  --border-radius-xs: 4px;
  --border-radius-sm: 6px;
  --border-radius: 10px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-pill: 9999px;

  /* Transições Padrão */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}