/* ============================================================
   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;
}