/* ============================================================
   NEXUS DESIGN SYSTEM — MATRIZ COMPLETA DE DESIGN TOKENS (100% COVERAGE)
   Cliente: CAZULA DIGITAL MARKETING
   Padrão: W3C DTCG / Big Tech Standard (Tailwind v4 / Radix / Apple HIG)
============================================================ */

:root {
  /* ── 1. BRAND MATRIX (ESCALA TONAL 50 A 950) ── */
  --nexus-primary: #0077C8;
  --nexus-primary-hover: #0077C8;
  --nexus-primary-rgb: 0, 119, 200;
  --nexus-primary-50: #EBF7FF;
  --nexus-primary-100: #CCEBFF;
  --nexus-primary-200: #99D6FF;
  --nexus-primary-300: #66C2FF;
  --nexus-primary-400: #33ADFF;
  --nexus-primary-500: #0099FF;
  --nexus-primary-600: #007ACC;
  --nexus-primary-700: #005C99;
  --nexus-primary-800: #003D66;
  --nexus-primary-900: #00253D;
  --nexus-primary-950: #00121F;

  /* ── 2. SECONDARY & ACCENT MATRIX ── */
  --nexus-secondary: #0F172A;
  --nexus-secondary-50: #F0F3FA;
  --nexus-secondary-100: #DAE1F1;
  --nexus-secondary-200: #B4C2E4;
  --nexus-secondary-500: #4468BB;
  --nexus-secondary-700: #293E70;
  --nexus-secondary-900: #10192D;
  --nexus-secondary-950: #080C16;

  --nexus-accent: #00A3FF;
  --nexus-accent-50: #EBF8FF;
  --nexus-accent-500: #00A2FF;
  --nexus-accent-900: #00273D;

  /* ── 3. SUPERFÍCIES, FUNDOS & ELEVAÇÃO MULTICAMADA (base: tokens.base.json) ── */
  --nexus-bg-canvas: #060913;
  --nexus-bg-subtle: #090E1D;
  --nexus-surface-base: #0B1122;
  --nexus-surface-card: linear-gradient(180deg, rgba(16, 24, 46, 0.85) 0%, rgba(10, 15, 30, 0.92) 100%);
  --nexus-surface-card-hover: linear-gradient(180deg, rgba(23, 34, 64, 0.94) 0%, rgba(14, 21, 44, 0.96) 100%);
  --nexus-surface-overlay: rgba(6, 9, 19, 0.94);
  --nexus-surface-glass: rgba(16, 24, 48, 0.72);
  --nexus-surface-inverse: #FFFFFF;

  /* ── 4. BORDAS, DIVISORES & FOCUS RINGS (base: tokens.base.json) ── */
  --nexus-border-subtle: rgba(255, 255, 255, 0.09);
  --nexus-border-default: rgba(255, 255, 255, 0.16);
  --nexus-border-strong: rgba(255, 255, 255, 0.28);
  --nexus-border-brand: rgba(var(--nexus-primary-rgb), 0.55);
  --nexus-border-focus: #00A3FF;
  --nexus-ring-focus: 0 0 0 3px rgba(var(--nexus-primary-rgb), 0.35);

  /* ── 5. TIPOGRAFIA & CONTRASTE WCAG (base: tokens.base.json) ── */
  --nexus-font-display: 'Outfit, sans-serif, sans-serif', sans-serif;
  --nexus-font-body: 'Inter, sans-serif', sans-serif;
  --nexus-font-script: 'Dancing Script', cursive;
  --nexus-font-mono: 'JetBrains Mono, monospace', monospace;

  --nexus-text-title: #ffffff;
  --nexus-text-body: #E2E6F0;
  --nexus-text-muted: #8E96A8;
  --nexus-text-faint: #64719A;
  --nexus-text-on-primary: #FFFFFF;
  --nexus-text-on-secondary: #0F172A;

  /* ── 6. SOMBRAS DE ELEVAÇÃO FÍSICA & GLOWS (base: tokens.base.json) ── */
  --nexus-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
  --nexus-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --nexus-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --nexus-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --nexus-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --nexus-shadow-2xl: 0 36px 90px rgba(0, 0, 0, 0.65);
  --nexus-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.35);

  --nexus-glow-primary: 0 0 28px rgba(var(--nexus-primary-rgb), 0.45);
  --nexus-glow-secondary: 0 0 24px rgba(244, 162, 97, 0.4);
  --nexus-glow-accent: 0 0 20px rgba(79, 209, 255, 0.5);

  /* ── 7. GRADIENTES DE AÇÃO & PROFUNDIDADE ── */
  --nexus-gradient-cta: linear-gradient(135deg, #0077C8 0%, #0F172A 100%);
  --nexus-gradient-hero: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
  --nexus-gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  --nexus-gradient-dark: linear-gradient(180deg, #070B18 0%, #070F30 100%);
  --nexus-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);

  /* ── 8. RAIOS DE CURVATURA (base: tokens.base.json) ── */
  --nexus-radius-xs: 4px;
  --nexus-radius-sm: 8px;
  --nexus-radius-md: 14px;
  --nexus-radius-lg: 20px;
  --nexus-radius-xl: 32px;
  --nexus-radius-full: 9999px;

  /* ── 9. CORES SEMÂNTICAS DE FEEDBACK (base: tokens.base.json, WCAG 2.2) ── */
  --nexus-success: #4caf7d;
  --nexus-success-bg: rgba(76, 175, 125, 0.12);
  --nexus-warning: #e0a750;
  --nexus-warning-bg: rgba(224, 167, 80, 0.12);
  --nexus-danger: #e2685f;
  --nexus-danger-bg: rgba(226, 104, 95, 0.12);
  --nexus-info: #3B82F6;
  --nexus-info-bg: rgba(59, 130, 246, 0.15);

  /* ── 10. TRANSIÇÕES & TIMINGS (base: tokens.base.json) ── */
  --nexus-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --nexus-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --nexus-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 11. ESPAÇAMENTO — ESCALA 8PT (base: tokens.base.json) ── */
  --nexus-space-1: 4px;
  --nexus-space-2: 8px;
  --nexus-space-3: 16px;
  --nexus-space-4: 24px;
  --nexus-space-5: 32px;
  --nexus-space-6: 48px;
  --nexus-space-7: 64px;
  --nexus-space-8: 96px;

  /* ── 12. GLASSMORPHISM & VARIANTES DE COR DERIVADAS DA MARCA ── */
  --nexus-glass: #0F1629CC;
  --nexus-glass-hover: #16203BD9;
  --nexus-glass-border: rgba(255, 255, 255, 0.08);
  --nexus-glass-border-strong: rgba(255, 255, 255, 0.15);
  --nexus-glass-blur: 16px;

  --nexus-primary-glow: #0077C866;
  --nexus-primary-bg: #0077C81F;
  --nexus-primary-contrast-text: #0C1B4D;

  --nexus-accent-hover: #3DB8FF;
  --nexus-accent-glow: #00A3FF66;
  --nexus-accent-bg: #00A3FF1A;

  --nexus-gold: #0077C8;
  --nexus-gold-hover: #005994;
  --nexus-gold-glow: #0077C866;
  --nexus-gold-bg: #0077C81F;

  --nexus-navy: #0C1B4D;
  --nexus-navy-deep: #070F30;

  --nexus-shadow-glow: 0 0 30px var(--nexus-primary-glow);

  /* Nomes curtos legados (index.html/reset.css usam a forma sem -canvas/-subtle) */
  --nexus-bg: var(--nexus-bg-canvas);
  --nexus-bg-alt: var(--nexus-bg-subtle);
  --nexus-surface: var(--nexus-surface-base);
  --nexus-surface-hover: #16203B;
  --nexus-surface-active: #0C1B4D;

  /* ── 13. COMPATIBILIDADE LEGADA (--brand-*, sem prefixo) ──
     Nomes consumidos por index.html/components.css de cada cliente.
     Todos são aliases dos tokens --nexus-* acima — uma única fonte,
     sem valor duplicado à mão. */
  --brand-primary: var(--nexus-primary);
  --brand-primary-hover: var(--nexus-primary-hover);
  --brand-primary-glow: var(--nexus-primary-glow);
  --brand-primary-bg: var(--nexus-primary-bg);
  --brand-accent: var(--nexus-accent);
  --brand-secondary: var(--nexus-secondary);
  --brand-navy: var(--nexus-navy);
  --brand-navy-deep: var(--nexus-navy-deep);
  --brand-gradient-gold: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
  --brand-gradient-hero: linear-gradient(135deg, #070B18 0%, #0C1B4D 45%, #070F30 100%);
  --brand-gradient-blue: linear-gradient(135deg, #00A3FF 0%, #66C7FF 100%);
  --brand-gradient: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
  --surface-gold-border: #0077C859;
  --surface-blue-border: #00A3FF59;
  --surface-border: var(--nexus-border-subtle);
  --light: var(--nexus-surface-base);
  --white: #FFFFFF;
  --text-title: var(--nexus-text-title);
  --text: var(--nexus-text-body);
  --radius-md: var(--nexus-radius-md);
  --radius-lg: var(--nexus-radius-lg);
  --radius-xl: var(--nexus-radius-xl);
  --radius-full: var(--nexus-radius-full);
  --shadow-gold: 0 4px 20px #0077C84D;
  --shadow-lg: var(--nexus-shadow-lg);
  --transition-normal: var(--nexus-transition-normal);
  --font-display: var(--nexus-font-display);
  --font-body: var(--nexus-font-body);
  --font-brand: var(--nexus-font-display);
  --font-script: var(--nexus-font-script);

  /* ── 14. ALIASES --cazula-* (consumidos por main.css, reset.css, animations.css) ──
     O main.css usa EXCLUSIVAMENTE a família --cazula-*.
     Todos mapeados para os tokens --nexus-* oficiais. */

  /* Cores da Marca */
  --cazula-primary: #0077C8;
  --cazula-primary-hover: #0062A6;
  --cazula-accent: #00A3FF;
  --cazula-accent-hover: #3DB8FF;
  --cazula-secondary: #0F172A;
  --cazula-gold: #0077C8;

  /* Fundos & Superfícies */
  --cazula-bg: #070B18;
  --cazula-bg-canvas: #070B18;
  --cazula-bg-subtle: #04060E;
  --cazula-bg-alt: #04060E;
  --cazula-surface: #0F1629;
  --cazula-surface-base: #0F1629;
  --cazula-surface-card: rgba(15, 22, 41, 0.85);
  --cazula-surface-card-hover: rgba(22, 32, 59, 0.95);
  --cazula-surface-glass: rgba(16, 24, 48, 0.65);
  --cazula-surface-overlay: rgba(7, 11, 24, 0.92);

  /* Bordas */
  --cazula-border-subtle: rgba(255, 255, 255, 0.07);
  --cazula-border-default: rgba(255, 255, 255, 0.14);
  --cazula-border-strong: rgba(255, 255, 255, 0.25);
  --cazula-border-brand: rgba(0, 119, 200, 0.5);

  /* Texto */
  --cazula-text-primary: #FFFFFF;
  --cazula-text-secondary: #CBD5E1;
  --cazula-text-muted: #8E96A8;
  --cazula-text-faint: #64719A;
  --cazula-text-on-primary: #FFFFFF;

  /* Tipografia */
  --cazula-font-display: 'Outfit', sans-serif;
  --cazula-font-body: 'Inter', sans-serif;
  --cazula-font-mono: 'JetBrains Mono', monospace;

  /* Sombras */
  --cazula-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
  --cazula-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --cazula-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --cazula-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --cazula-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Raios */
  --cazula-radius-xs: 4px;
  --cazula-radius-sm: 8px;
  --cazula-radius-md: 14px;
  --cazula-radius-lg: 20px;
  --cazula-radius-xl: 32px;
  --cazula-radius-full: 9999px;

  /* Espaçamento — Escala 8pt */
  --cazula-space-1: 4px;
  --cazula-space-2: 8px;
  --cazula-space-3: 16px;
  --cazula-space-4: 24px;
  --cazula-space-5: 32px;
  --cazula-space-6: 48px;
  --cazula-space-7: 64px;
  --cazula-space-8: 96px;
  --cazula-space-9: 120px;

  /* Transições */
  --cazula-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cazula-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --cazula-transition-smooth: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cazula-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Gradientes */
  --cazula-gradient-cta: linear-gradient(135deg, #0077C8 0%, #0F172A 100%);
  --cazula-gradient-hero: linear-gradient(135deg, #070B18 0%, #0C1B4D 45%, #070F30 100%);
  --cazula-gradient-brand: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
}

/* ============================================================
   15. ARQUITETURA DE SCROLLBAR DE LUXO (BIG TECH / LINEAR / APPLE)
   Diretriz de Design: Zero scroll desnecessário na página global.
   Rolagem contida estritamente dentro do container do conteúdo.
   Scrollbar flutuante (floating pill), translúcida e com glow reativo.
   ============================================================ */

/* Scrollbar Universal Fluida & Flutuante (WebKit & Blink) */
*::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
  margin: 4px !important;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 9999px !important;
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
  transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 163, 255, 0.75) !important;
  box-shadow: 0 0 12px rgba(0, 163, 255, 0.55) !important;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #00A3FF !important;
  box-shadow: 0 0 18px rgba(0, 163, 255, 0.85) !important;
}

*::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Fallback Firefox Nativo (não sobrescreve o motor WebKit do Chromium) */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
  }
}

/* ── Comportamento Reativo nos Containers de Rolagem ── */
.cazula-scrollable::-webkit-scrollbar-thumb,
.cazula-scroll-area::-webkit-scrollbar-thumb,
.cazula-content-area::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

.cazula-scrollable:hover::-webkit-scrollbar-thumb,
.cazula-scroll-area:hover::-webkit-scrollbar-thumb,
.cazula-content-area:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.24) !important;
}

.cazula-scrollable::-webkit-scrollbar-thumb:hover,
.cazula-scroll-area::-webkit-scrollbar-thumb:hover,
.cazula-content-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 163, 255, 0.85) !important;
  box-shadow: 0 0 14px rgba(0, 163, 255, 0.6) !important;
}

.cazula-scrollable:hover::-webkit-scrollbar-track,
.cazula-scroll-area:hover::-webkit-scrollbar-track,
.cazula-content-area:hover::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 9999px !important;
}

/* Variante Slim (Para painéis compactos, modais e sidebars) */
.cazula-scroll-slim::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}
.cazula-scroll-slim::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid transparent !important;
}
.cazula-scroll-slim::-webkit-scrollbar-thumb:hover {
  background-color: #00A3FF !important;
  box-shadow: 0 0 8px rgba(0, 163, 255, 0.5) !important;
}

/* Variante Glow (Executiva / Cyberpunk para destaques) */
.cazula-scroll-glow::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0088FF, #00A3FF, #38BDF8) !important;
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 10px rgba(0, 163, 255, 0.4) !important;
}
.cazula-scroll-glow::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 16px rgba(0, 163, 255, 0.8) !important;
}

/* Variante Invisível (mantém rolagem com teclado e touch) */
.cazula-scroll-hidden {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.cazula-scroll-hidden::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Classes Utilitárias de Rolagem Contida */
.cazula-app-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  overflow: hidden !important;
}

.cazula-content-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  position: relative !important;
}

.cazula-scrollable {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.cazula-scrollable-x {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain !important;
}

.cazula-scrollable-both {
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

/* Container de tela travada para Workspaces (Zero scroll na janela) */
.cazula-workspace-fixed {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 64px) !important;
  height: calc(100dvh - 64px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================================
   SISTEMA DE DESIGN CORPORATIVO & MATRIZ DE TEMAS CAZULA
   (ESCURO / CLARO / SISTEMA COM TRANSIÇÃO ULTRA SUAVE)
   ============================================================ */

:root, [data-theme="dark"] {
  /* Fundo e Superfícies (Escuro High-End) */
  --nexus-bg-canvas: #060913;
  --nexus-bg-subtle: #0A0F1D;
  --nexus-surface-base: #0B1122;
  --nexus-surface-card: linear-gradient(180deg, rgba(16, 24, 48, 0.85) 0%, rgba(10, 15, 32, 0.92) 100%);
  --nexus-surface-card-hover: linear-gradient(180deg, rgba(23, 34, 68, 0.94) 0%, rgba(14, 21, 44, 0.96) 100%);
  --nexus-surface-overlay: rgba(6, 9, 19, 0.95);
  --nexus-surface-glass: rgba(16, 24, 48, 0.72);
  --nexus-surface-inverse: #FFFFFF;

  /* Bordas e Divisores */
  --nexus-border-subtle: rgba(255, 255, 255, 0.08);
  --nexus-border-default: rgba(255, 255, 255, 0.14);
  --nexus-border-strong: rgba(255, 255, 255, 0.25);
  --nexus-border-brand: rgba(0, 163, 255, 0.45);

  /* Tipografia & Hierarquia */
  --nexus-text-title: #FFFFFF;
  --nexus-text-body: #E2E8F0;
  --nexus-text-muted: #94A3B8;
  --nexus-text-faint: #64748B;

  /* Cores Semânticas de Ação (Vívidas no Escuro) */
  --nexus-primary: #0077C8;
  --nexus-primary-hover: #008CEB;
  --nexus-accent: #00A3FF;
  --nexus-accent-hover: #3DB8FF;
  --nexus-success: #10B981;
  --nexus-success-bg: rgba(16, 185, 129, 0.15);
  --nexus-warning: #F59E0B;
  --nexus-warning-bg: rgba(245, 158, 11, 0.15);
  --nexus-danger: #EF4444;
  --nexus-danger-bg: rgba(239, 68, 68, 0.15);
  --nexus-purple: #8B5CF6;
  --nexus-purple-bg: rgba(139, 92, 246, 0.15);

  /* Sombras & Brilhos (Glows) */
  --nexus-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --nexus-shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 163, 255, 0.35), 0 0 20px rgba(0, 163, 255, 0.15);
  --nexus-glow-brand: 0 0 24px rgba(0, 163, 255, 0.3);

  /* Variáveis de Compatibilidade de Telas */
  --bg-dark: #060913;
  --bg-base: #060913;
  --bg-surface: #0B1122;
  --bg-surface-elevated: linear-gradient(180deg, rgba(23, 34, 64, 0.9) 0%, rgba(14, 21, 44, 0.95) 100%);
  --bg-card: rgba(16, 24, 46, 0.85);
  --bg-card-hover: rgba(24, 34, 64, 0.95);
  --text-main: #FFFFFF;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(0, 163, 255, 0.4);
  --cazula-blue: #00A3FF;
  --cazula-blue-glow: rgba(0, 163, 255, 0.35);

  /* Fundo de Conteúdo Principal */
  --cazula-content-bg: #060913 radial-gradient(1200px circle at 15% 10%, rgba(0, 119, 200, 0.1) 0%, transparent 60%), radial-gradient(900px circle at 85% 85%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);

  /* Componentes UI Dinâmicos */
  --cazula-input-bg: rgba(0, 0, 0, 0.4);
  --cazula-input-border: rgba(255, 255, 255, 0.12);
  --cazula-input-text: #FFFFFF;
  --cazula-deck-bg: linear-gradient(180deg, rgba(16, 23, 44, 0.88) 0%, rgba(10, 15, 30, 0.94) 100%);
  --cazula-deck-border: rgba(255, 255, 255, 0.1);
  --cazula-deck-btn-bg: rgba(255, 255, 255, 0.03);
  --cazula-deck-btn-text: #94A3B8;
  --cazula-deck-btn-active-bg: linear-gradient(135deg, rgba(0, 163, 255, 0.2) 0%, rgba(0, 119, 200, 0.28) 100%);
  --cazula-deck-btn-active-text: #FFFFFF;
  --cazula-deck-btn-active-border: rgba(0, 163, 255, 0.45);
  --cazula-table-th-bg: rgba(10, 16, 32, 0.7);
  --cazula-table-th-color: #94A3B8;
  --cazula-table-border: rgba(255, 255, 255, 0.07);
  --cazula-table-hover: rgba(255, 255, 255, 0.035);
}

[data-theme="light"] {
  /* Fundo e Superfícies (Claro Sleek Minimalist) */
  --nexus-bg-canvas: #F8FAFC;
  --nexus-bg-subtle: #F1F5F9;
  --nexus-surface-base: #FFFFFF;
  --nexus-surface-card: #FFFFFF;
  --nexus-surface-card-hover: #FFFFFF;
  --nexus-surface-overlay: rgba(255, 255, 255, 0.98);
  --nexus-surface-glass: rgba(255, 255, 255, 0.88);
  --nexus-surface-inverse: #0F172A;

  /* Bordas e Divisores */
  --nexus-border-subtle: #E2E8F0;
  --nexus-border-default: #CBD5E1;
  --nexus-border-strong: #94A3B8;
  --nexus-border-brand: rgba(0, 119, 200, 0.45);

  /* Tipografia & Hierarquia (Alto Contraste) */
  --nexus-text-title: #0F172A;
  --nexus-text-body: #334155;
  --nexus-text-muted: #64748B;
  --nexus-text-faint: #94A3B8;

  /* Cores Semânticas de Ação (Calibradas para Fundo Claro) */
  --nexus-primary: #0077C8;
  --nexus-primary-hover: #005E9E;
  --nexus-accent: #0088D6;
  --nexus-accent-hover: #0070B3;
  --nexus-success: #059669;
  --nexus-success-bg: rgba(5, 150, 105, 0.1);
  --nexus-warning: #D97706;
  --nexus-warning-bg: rgba(217, 119, 6, 0.1);
  --nexus-danger: #DC2626;
  --nexus-danger-bg: rgba(220, 38, 38, 0.1);
  --nexus-purple: #7C3AED;
  --nexus-purple-bg: rgba(124, 58, 237, 0.1);

  /* Sombras Elegantes & Tridimensionais */
  --nexus-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 18px -4px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.9);
  --nexus-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 14px 28px -6px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(0, 119, 200, 0.35);
  --nexus-glow-brand: 0 0 20px rgba(0, 119, 200, 0.2);

  /* Variáveis de Compatibilidade de Telas */
  --bg-dark: #F8FAFC;
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --border-subtle: #E2E8F0;
  --border-accent: rgba(0, 119, 200, 0.35);
  --cazula-blue: #0077C8;
  --cazula-blue-glow: rgba(0, 119, 200, 0.2);

  /* Fundo de Conteúdo Principal */
  --cazula-content-bg: #F8FAFC radial-gradient(1200px circle at 15% 10%, rgba(0, 119, 200, 0.05) 0%, transparent 60%), radial-gradient(900px circle at 85% 85%, rgba(139, 92, 246, 0.03) 0%, transparent 60%);

  /* Componentes UI Dinâmicos */
  --cazula-input-bg: #FFFFFF;
  --cazula-input-border: #CBD5E1;
  --cazula-input-text: #0F172A;
  --cazula-deck-bg: #F1F5F9;
  --cazula-deck-border: #E2E8F0;
  --cazula-deck-btn-bg: transparent;
  --cazula-deck-btn-text: #64748B;
  --cazula-deck-btn-active-bg: #FFFFFF;
  --cazula-deck-btn-active-text: #0F172A;
  --cazula-deck-btn-active-border: #CBD5E1;
  --cazula-table-th-bg: #F8FAFC;
  --cazula-table-th-color: #475569;
  --cazula-table-border: #E2E8F0;
  --cazula-table-hover: #F1F5F9;
}

/* ============================================================
   REGRAS GLOBAIS DE ADAPTAÇÃO & NORMALIZAÇÃO TEMÁTICA
   ============================================================ */
html, body {
  background: var(--nexus-bg-canvas) !important;
  color: var(--nexus-text-body) !important;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cazula-content-area {
  background: var(--cazula-content-bg) !important;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adaptação Automática de Cards no Modo Claro */
[data-theme="light"] .kpi-card,
[data-theme="light"] .card,
[data-theme="light"] .bento-card,
[data-theme="light"] .panel,
[data-theme="light"] .cazula-card {
  background: var(--nexus-surface-card) !important;
  border-color: var(--nexus-border-subtle) !important;
  box-shadow: var(--nexus-shadow-card) !important;
  color: var(--nexus-text-body) !important;
}

[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .bento-card:hover,
[data-theme="light"] .panel:hover {
  border-color: var(--nexus-border-brand) !important;
  box-shadow: var(--nexus-shadow-card-hover) !important;
}

/* Adaptação de Títulos e Textos no Modo Claro */
[data-theme="light"] .page-title,
[data-theme="light"] .hero-title,
[data-theme="light"] .card-title,
[data-theme="light"] .section-title,
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3 {
  color: var(--nexus-text-title) !important;
  -webkit-text-fill-color: initial !important;
}

[data-theme="light"] .page-desc,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .text-muted,
[data-theme="light"] p {
  color: var(--nexus-text-muted);
}

/* Adaptação de Inputs, Selects e Textareas no Modo Claro */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: var(--cazula-input-bg) !important;
  border-color: var(--cazula-input-border) !important;
  color: var(--cazula-input-text) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--nexus-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.15) !important;
}

/* Adaptação do Deck de Abas Mestre no Modo Claro */
[data-theme="light"] .cazula-deck-nav {
  background: var(--cazula-deck-bg) !important;
  border-color: var(--cazula-deck-border) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .cazula-deck-tab {
  color: var(--cazula-deck-btn-text) !important;
}

[data-theme="light"] .cazula-deck-tab:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--nexus-text-title) !important;
}

[data-theme="light"] .cazula-deck-tab.active {
  background: var(--cazula-deck-btn-active-bg) !important;
  color: var(--cazula-deck-btn-active-text) !important;
  border-color: var(--cazula-deck-btn-active-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Adaptação de Tabelas no Modo Claro */
[data-theme="light"] table th {
  background: var(--cazula-table-th-bg) !important;
  color: var(--cazula-table-th-color) !important;
  border-color: var(--cazula-table-border) !important;
}

[data-theme="light"] table td {
  border-color: var(--cazula-table-border) !important;
  color: var(--nexus-text-body) !important;
}

[data-theme="light"] table tr:hover td {
  background: var(--cazula-table-hover) !important;
}

/* Adaptação de Botões Glass no Modo Claro */
[data-theme="light"] .btn-glass {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--nexus-border-subtle) !important;
  color: var(--nexus-text-body) !important;
}

[data-theme="light"] .btn-glass:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--nexus-text-title) !important;
  border-color: var(--nexus-border-default) !important;
}