/**
 * Variaveis CSS Globais - Dashboard AeF Pop
 * GoodData-inspired design system
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Cores Primarias */
  --color-primary: #303F9F;
  --color-primary-dark: #1A237E;
  --color-primary-light: #5C6BC0;

  /* Cores de Status */
  --color-success: #2E7D32;
  --color-success-light: #4CAF50;
  --color-warning: #EF6C00;
  --color-warning-light: #FB8C00;
  --color-danger: #C62828;
  --color-danger-light: #EF5350;
  --color-info: #0277BD;
  --color-info-light: #039BE5;

  /* Cores Neutras - GoodData palette */
  --color-white: #ffffff;
  --color-gray-50: #FAFBFC;
  --color-gray-100: #F4F6F8;
  --color-gray-200: #E8ECF0;
  --color-gray-300: #D5DAE0;
  --color-gray-400: #A0AAB4;
  --color-gray-500: #6D7680;
  --color-gray-600: #4A5568;
  --color-gray-700: #2D3748;
  --color-gray-800: #1A202C;
  --color-gray-900: #0D1117;
  --color-black: #000000;

  /* Cores de Background */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);

  /* Cores de Texto */
  --text-primary: var(--color-gray-800);
  --text-secondary: var(--color-gray-500);
  --text-tertiary: var(--color-gray-400);
  --text-inverse: var(--color-white);

  /* Cores de Borda */
  --border-color: var(--color-gray-200);
  --border-color-dark: var(--color-gray-300);

  /* Sombras - GoodData style: soft and diffuse */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 32px 0 rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 40px 0 rgba(0, 0, 0, 0.10);
  --shadow-card: 0 2px 32px 0 rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 8px 40px 0 rgba(0, 0, 0, 0.10);

  /* Espacamentos - more generous */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* Tipografia - Inter (GoodData-like) */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.8125rem; /* 13px */
  --font-size-base: 0.875rem;/* 14px */
  --font-size-lg: 1rem;      /* 16px */
  --font-size-xl: 1.125rem;  /* 18px */
  --font-size-2xl: 1.375rem; /* 22px */
  --font-size-3xl: 1.75rem;  /* 28px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Border Radius - rounder like GoodData */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-full: 9999px;

  /* Transicoes */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms 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;

  /* Larguras do Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;

  /* Header */
  --header-height: 64px;
}

/* Temas por Dashboard */
[data-theme="principal"] {
  --theme-primary: #303F9F;
  --theme-secondary: #1A237E;
  --theme-accent: #5C6BC0;
}

[data-theme="alma-vendas"] {
  --theme-primary: #2E7D32;
  --theme-secondary: #1B5E20;
  --theme-accent: #4CAF50;
}

[data-theme="bora-vender"] {
  --theme-primary: #C62828;
  --theme-secondary: #B71C1C;
  --theme-accent: #EF5350;
}

[data-theme="marketing"] {
  --theme-primary: #1565C0;
  --theme-secondary: #0D47A1;
  --theme-accent: #42A5F5;
}

[data-theme="sdrs"] {
  --theme-primary: #6A1B9A;
  --theme-secondary: #4A148C;
  --theme-accent: #AB47BC;
}

[data-theme="funil"] {
  --theme-primary: #E65100;
  --theme-secondary: #BF360C;
  --theme-accent: #FF9800;
}

[data-theme="coordenadores"] {
  --theme-primary: #00695C;
  --theme-secondary: #004D40;
  --theme-accent: #26A69A;
}

[data-theme="funcionarios"] {
  --theme-primary: #37474F;
  --theme-secondary: #263238;
  --theme-accent: #607D8B;
}

[data-theme="esquadrao-vendas"] {
  --theme-primary: #6A1B9A;
  --theme-secondary: #4A148C;
  --theme-accent: #AB47BC;
}

[data-theme="house"] {
  --theme-primary: #0277BD;
  --theme-secondary: #01579B;
  --theme-accent: #039BE5;
}

/* Gradientes por Dashboard - refined, less saturated */
.gradient-principal {
  background: linear-gradient(135deg, #303F9F 0%, #1A237E 100%);
}

.gradient-alma-vendas {
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
}

.gradient-bora-vender {
  background: linear-gradient(135deg, #C62828 0%, #B71C1C 100%);
}

.gradient-marketing {
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
}

.gradient-cpl,
.metric-card.gradient-cpl {
  background: linear-gradient(135deg, #00897B 0%, #26A69A 100%) !important;
}

.gradient-cpm,
.metric-card.gradient-cpm {
  background: linear-gradient(135deg, #D84315 0%, #F4511E 100%) !important;
}

.gradient-cpc,
.metric-card.gradient-cpc {
  background: linear-gradient(135deg, #303F9F 0%, #7E57C2 100%) !important;
}

.gradient-success {
  background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
}

.gradient-warning {
  background: linear-gradient(135deg, #EF6C00 0%, #FB8C00 100%);
}

.gradient-danger {
  background: linear-gradient(135deg, #C62828 0%, #EF5350 100%);
}

/* Dark Mode (opcional) */
@media (prefers-color-scheme: dark) {
  :root.auto-dark {
    --bg-primary: var(--color-gray-900);
    --bg-secondary: var(--color-gray-800);
    --bg-tertiary: var(--color-gray-700);
    --text-primary: var(--color-gray-100);
    --text-secondary: var(--color-gray-400);
    --border-color: var(--color-gray-700);
  }
}