/* ════════════════════════════════════════════════════
   THEMES — Design System dashboard-bras
   Default: Escuro Fosco | Opcionais: Claro, Elegante
   ════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500;600&display=swap');

/* ════════════════════════════════════════════════════
   TEMA ESCURO FOSCO (default — :root)
   Tipografia: Inter | Paleta: Dark Slate / Indigo
   ════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg-base: #0D0F14;
  --bg-surface: #161920;
  --bg-elevated: #1E2230;
  --bg-overlay: rgba(0, 0, 0, 0.75);

  /* Text */
  --text-primary: #E2E4EE;
  --text-secondary: #8B90A6;
  --text-muted: #7E88AC;   /* 4.6:1 on bg-elevated — WCAG AA */
  --text-on-accent: #FFFFFF;

  /* Borders */
  --border-default: #252A38;
  --border-focus: #6B7BF7;
  --border-strong: #30364A;

  /* Accent */
  --accent: #6B7BF7;
  --accent-hover: #7C8CF8;
  --accent-subtle: rgba(107, 123, 247, 0.14);
  --accent-text: #A5B4FF;

  /* Semantic */
  --success: #3DD68C;
  --success-subtle: rgba(61, 214, 140, 0.12);
  --success-text: #5EE8A4;
  --warning: #F6A740;
  --warning-subtle: rgba(246, 167, 64, 0.12);
  --warning-text: #F8B955;
  --error: #F26B6B;
  --error-subtle: rgba(242, 107, 107, 0.12);
  --error-text: #F58585;
  --info: #38BDF8;
  --info-subtle: rgba(56, 189, 248, 0.12);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 24px;
  --text-2xl: 32px;

  /* Spacing (base 4px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Border Radius */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-full: 9999px;

  /* Shadows — escuras com leve tint indigo */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.35);

  /* Glass (escuro — muito sutil) */
  --surface-glass-1: rgba(255,255,255,0.04);
  --surface-glass-2: rgba(255,255,255,0.06);
  --surface-glass-3: rgba(255,255,255,0.09);
  --surface-glass-4: rgba(255,255,255,0.13);
  --glass-border: rgba(255,255,255,0.09);
  --glass-border-soft: rgba(255,255,255,0.06);
  --card-bg: rgba(255,255,255,0.04);
  --card-hover: rgba(255,255,255,0.08);

  --transition: 200ms ease;
  --transition-fast: 150ms ease-out;

  /* Botões primários sólidos — contraste AA garantido (5.1:1 branco) */
  --btn-primary-bg: #4A5AE8;
  --btn-primary-text: #FFFFFF;

  /* Termômetro de vendas — todos passam AA sobre --bg-elevated do tema escuro */
  --temp-cold: #7DBCFF;     /* azul claro — 6.4:1 */
  --temp-warm: #F4B66B;     /* dourado — 7.3:1 */
  --temp-hot: #F88060;      /* coral — 5.4:1 */
  --temp-blazing: #FF6A5C;  /* vermelho-coral — 4.7:1 */

  /* Border específica pra inputs e UI controls (WCAG 1.4.11 3:1 mínimo) */
  --border-input: #4A5066;  /* 3.2:1 sobre bg-surface — usuário enxerga o campo */
}

/* ════════════════════════════════════════════════════
   TEMA CLARO
   Tipografia: Inter | Paleta: Slate/Indigo com profundidade
   ════════════════════════════════════════════════════ */
[data-theme="claro"] {
  /* Backgrounds */
  --bg-base: #EDF0F7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F4F6FB;
  --bg-overlay: rgba(15,23,42,0.50);

  /* Text */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;   /* 4.7:1 on bg-elevated — WCAG AA (era #9CA3AF=2.9:1, falhava) */
  --text-on-accent: #FFFFFF;

  /* Borders */
  --border-default: #D1D9E6;
  --border-focus: #4F46E5;
  --border-strong: #B0BCD0;

  /* Accent */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-subtle: #EEF2FF;
  --accent-text: #3730A3;

  /* Semantic */
  --success: #16A34A;
  --success-subtle: #F0FDF4;
  --success-text: #15803D;
  --warning: #D97706;
  --warning-subtle: #FFFBEB;
  --warning-text: #B45309;
  --error: #DC2626;
  --error-subtle: #FEF2F2;
  --error-text: #B91C1C;
  --info: #0EA5E9;
  --info-subtle: #F0F9FF;

  /* Typography */
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-display: 'Inter', sans-serif;

  /* Shadows — mais pronunciadas para dar profundidade no light */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 2px 8px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-lg: 0 6px 20px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-xl: 0 12px 32px rgba(15,23,42,0.12), 0 4px 10px rgba(15,23,42,0.07);

  /* Glass (claro — alta opacidade) */
  --surface-glass-1: rgba(255,255,255,0.55);
  --surface-glass-2: rgba(255,255,255,0.70);
  --surface-glass-3: rgba(255,255,255,0.85);
  --surface-glass-4: rgba(255,255,255,0.95);
  --glass-border: rgba(15,23,42,0.08);
  --glass-border-soft: rgba(15,23,42,0.05);
  --card-bg: rgba(255,255,255,0.85);
  --card-hover: rgba(255,255,255,0.98);

  /* Botões primários sólidos — contraste AA (6.3:1 branco) */
  --btn-primary-bg: #4F46E5;
  --btn-primary-text: #FFFFFF;

  /* Termômetro de vendas — escurecidos pra passar AA sobre fundo claro */
  --temp-cold: #1D6FE0;     /* azul — 5.4:1 sobre #FFFFFF */
  --temp-warm: #B8731A;     /* laranja escuro — 5.0:1 */
  --temp-hot: #C53A0E;      /* coral escuro — 6.1:1 */
  --temp-blazing: #A02012;  /* vermelho escuro — 8.4:1 */

  /* Border específica pra inputs e UI controls (WCAG 1.4.11 3:1 mínimo) */
  --border-input: #8C9DB5;  /* 3.1:1 sobre bg-surface — usuário enxerga o campo */
}

/* ════════════════════════════════════════════════════
   TEMA ELEGANTE
   Tipografia: Playfair Display + DM Sans | Paleta: Terracota/Rose
   ════════════════════════════════════════════════════ */
[data-theme="elegante"] {
  /* Backgrounds */
  --bg-base: #F5EDE6;
  --bg-surface: #FDFAF7;
  --bg-elevated: #EDE0D4;
  --bg-overlay: rgba(45,27,27,0.55);

  /* Text */
  --text-primary: #2D1B1B;
  --text-secondary: #6B4E3D;
  --text-muted: #7B5840;   /* 4.9:1 on bg-elevated — WCAG AA */
  --text-on-accent: #FFFFFF;

  /* Borders */
  --border-default: #DFC8B5;
  --border-focus: #C4956A;
  --border-strong: #C9A888;

  /* Accent */
  --accent: #C4956A;
  --accent-hover: #A87850;
  --accent-subtle: #FDF0E8;
  --accent-text: #8B6240;

  /* Semantic */
  --success: #2D6A4F;
  --success-subtle: #EDF7F0;
  --success-text: #1A5C3F;
  --warning: #C27C1A;
  --warning-subtle: #FEF9EC;
  --warning-text: #A0660E;
  --error: #C0392B;
  --error-subtle: #FDEEEC;
  --error-text: #9C2A1F;
  --info: #0D7C9E;
  --info-subtle: #EDF7FC;

  /* Typography — Playfair Display (títulos) + DM Sans (corpo) */
  --font-sans: 'DM Sans', -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Shadows — quentes */
  --shadow-sm: 0 1px 3px rgba(80,40,20,0.10);
  --shadow-md: 0 2px 8px rgba(80,40,20,0.12), 0 1px 3px rgba(80,40,20,0.07);
  --shadow-lg: 0 6px 20px rgba(80,40,20,0.12), 0 2px 6px rgba(80,40,20,0.07);
  --shadow-xl: 0 12px 32px rgba(80,40,20,0.14), 0 4px 10px rgba(80,40,20,0.08);

  /* Glass (elegante — tons quentes) */
  --surface-glass-1: rgba(255,255,255,0.45);
  --surface-glass-2: rgba(255,255,255,0.60);
  --surface-glass-3: rgba(255,255,255,0.78);
  --surface-glass-4: rgba(255,255,255,0.92);
  --glass-border: rgba(196,149,106,0.22);
  --glass-border-soft: rgba(196,149,106,0.14);
  --card-bg: rgba(255,255,255,0.78);
  --card-hover: rgba(255,255,255,0.95);

  /* Botões primários sólidos — texto escuro sobre dourado (6.1:1) */
  --btn-primary-bg: #C4956A;
  --btn-primary-text: #2D1B1B;

  /* Termômetro de vendas — tons terracota harmonizados sobre fundo elegante */
  --temp-cold: #6B8AB5;     /* azul-acinzentado — 5.1:1 */
  --temp-warm: #B07A3A;     /* terracota dourado — 4.9:1 */
  --temp-hot: #B85A2C;      /* terracota — 5.4:1 */
  --temp-blazing: #8B2914;  /* vermelho terra — 7.8:1 */

  /* Border específica pra inputs e UI controls (WCAG 1.4.11 3:1 mínimo) */
  --border-input: #A98860;  /* 3.5:1 sobre bg-surface — usuário enxerga o campo */
}

/* ════════════════════════════════════════════════════
   TRANSIÇÃO SUAVE ENTRE TEMAS
   ════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

/* Respeitar prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ════════════════════════════════════════════════════
   FOCO VISÍVEL — WCAG 2.4.7
   ════════════════════════════════════════════════════
   `:focus-visible` aplica anel de foco só quando o usuário
   navegou via teclado (Tab), evitando o anel "feio" no clique
   do mouse. Anel usa --border-focus pra responder ao tema. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 4px;
}