/* ═══════════════════════════════════════════════════════════════════════════
   NEXA AURA — Design System Tokens
   Importe este arquivo ANTES de qualquer outro CSS.
   Todos os componentes devem referenciar exclusivamente estes tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* ── Fundos ──────────────────────────────────────────────────────────────── */
  --na-bg:               #0A0A0F;
  --na-surface:          #0D0D15;
  --na-surface-elevated: #14141A;
  --na-surface-hover:    #1A1A26;
  --na-surface-card:     #111118;

  /* ── Bordas ──────────────────────────────────────────────────────────────── */
  --na-border:           #2D2D3A;
  --na-border-subtle:    rgba(255,255,255,0.05);
  --na-border-strong:    rgba(255,255,255,0.12);

  /* ── Cores principais ────────────────────────────────────────────────────── */
  --na-primary:          #3483FA;
  --na-primary-hover:    #2968C8;
  --na-primary-active:   #2968C8;
  --na-primary-dim:      rgba(52,131,250,0.12);
  --na-secondary:        #22C5EE;
  --na-secondary-dim:    rgba(34,197,238,0.15);

  /* ── Cores de estado ─────────────────────────────────────────────────────── */
  --na-success:          #22C55E;
  --na-success-dim:      rgba(34,197,94,0.15);
  --na-attention:        #F59E0B;
  --na-attention-dim:    rgba(245,158,11,0.15);
  --na-error:            #EF4444;
  --na-error-dim:        rgba(239,68,68,0.15);

  /* ── Texto ───────────────────────────────────────────────────────────────── */
  --na-text:             #E2E2F0;
  --na-text-secondary:   rgba(226,226,240,0.55);
  --na-text-tertiary:    rgba(226,226,240,0.30);
  --na-text-disabled:    rgba(226,226,240,0.20);

  /* ── Gradientes ──────────────────────────────────────────────────────────── */
  --na-gradient-primary: linear-gradient(135deg, #3483FA 0%, #2968C8 100%);
  --na-gradient-accent:  linear-gradient(135deg, #3483FA 0%, #22C5EE 100%);
  --na-gradient-logo:    linear-gradient(90deg, #9B5FFF 0%, #7B33FF 40%, #4F46FF 65%, #22C5EE 100%);
  --na-gradient-card:    linear-gradient(180deg, #14141A 0%, #0D0D15 100%);
  --na-gradient-glow:    radial-gradient(ellipse at top, rgba(123,51,255,0.08) 0%, transparent 70%);

  /* ── Tipografia ──────────────────────────────────────────────────────────── */
  --na-font:             'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --na-font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* ── Escala tipográfica ───────────────────────────────────────────────────── */
  --na-text-xs:   11px;
  --na-text-sm:   13px;
  --na-text-base: 14px;
  --na-text-md:   16px;
  --na-text-lg:   18px;
  --na-text-xl:   22px;
  --na-text-2xl:  28px;
  --na-text-3xl:  36px;

  /* ── Border radius ───────────────────────────────────────────────────────── */
  --na-radius-xs:   8px;
  --na-radius-sm:   12px;
  --na-radius-md:   16px;
  --na-radius-lg:   24px;
  --na-radius-full: 999px;

  /* ── Sombras ─────────────────────────────────────────────────────────────── */
  --na-shadow-sm:       0 2px 8px rgba(0,0,0,0.3);
  --na-shadow-card:     0 4px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset;
  --na-shadow-elevated: 0 8px 32px rgba(52,131,250,0.18), 0 2px 8px rgba(0,0,0,0.4);
  --na-shadow-primary:  0 4px 20px rgba(52,131,250,0.35);
  --na-shadow-modal:    0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);

  /* ── Z-index ─────────────────────────────────────────────────────────────── */
  --na-z-base:    1;
  --na-z-sticky:  10;
  --na-z-dropdown:200;
  --na-z-overlay: 250;
  --na-z-modal:   300;
  --na-z-tooltip: 400;

  /* ── Transições ──────────────────────────────────────────────────────────── */
  --na-transition:      0.2s ease;
  --na-transition-slow: 0.35s ease;

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --na-sidebar-w: 80px;
  --na-header-h:  120px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO — sobrepõe os tokens dark do :root (somente mobile ≤767px)
   Desktop permanece sempre escuro.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  [data-theme="light"] {
    /* Fundos */
    --na-bg:               #F0EFFF;
    --na-surface:          #FFFFFF;
    --na-surface-elevated: #EDEEFF;
    --na-surface-hover:    #E5E4FF;
    --na-surface-card:     #FAFAFF;

    /* Bordas */
    --na-border:           #E5E7EB;
    --na-border-subtle:    rgba(52,131,250,0.06);
    --na-border-strong:    rgba(52,131,250,0.14);

    /* Texto */
    --na-text:             #18172A;
    --na-text-secondary:   rgba(24,23,42,0.60);
    --na-text-tertiary:    rgba(24,23,42,0.36);
    --na-text-disabled:    rgba(24,23,42,0.22);

    /* Gradientes */
    --na-gradient-card:    linear-gradient(180deg, #FFFFFF 0%, #F5F4FF 100%);
    --na-gradient-glow:    radial-gradient(ellipse at top, rgba(123,51,255,0.05) 0%, transparent 70%);

    /* Sombras */
    --na-shadow-sm:       0 2px 8px rgba(80,60,160,0.08);
    --na-shadow-card:     0 4px 24px rgba(80,60,160,0.08), 0 1px 0 rgba(0,0,0,0.03);
    --na-shadow-elevated: 0 8px 32px rgba(123,51,255,0.14), 0 2px 8px rgba(80,60,160,0.10);
    --na-shadow-primary:  0 4px 20px rgba(52,131,250,0.28);
    --na-shadow-modal:    0 24px 80px rgba(80,60,160,0.22), 0 0 0 1px rgba(80,60,160,0.08);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE DESIGN SYSTEM TOKENS
   Usados exclusivamente em @media (max-width: 767px).
   Dark por padrão no :root; sobrescrito por [data-theme="light"].
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Paleta mobile — tema escuro */
  --mobile-bg-primary:     #0f1117;
  --mobile-bg-secondary:   #1a1d27;
  --mobile-bg-tertiary:    #22263a;
  --mobile-accent:         #3483FA;
  --mobile-accent-hover:   #2968C8;
  --mobile-text-primary:   #f0f0f5;
  --mobile-text-secondary: #9a9ab0;
  --mobile-text-muted:     #5a5a70;
  --mobile-border:         #2a2d3e;
  --mobile-success:        #22c55e;
  --mobile-error:          #ef4444;
  --mobile-warning:        #f59e0b;
  --mobile-surface-shadow: 0 2px 12px rgba(0,0,0,0.30);

  /* Tipografia mobile */
  --mobile-font-xs:    11px;
  --mobile-font-sm:    13px;
  --mobile-font-base:  15px;
  --mobile-font-md:    17px;
  --mobile-font-lg:    20px;
  --mobile-font-xl:    24px;
  --mobile-font-2xl:   28px;
  --mobile-line-height: 1.5;

  /* Espaçamento mobile */
  --mobile-space-1: 4px;
  --mobile-space-2: 8px;
  --mobile-space-3: 12px;
  --mobile-space-4: 16px;
  --mobile-space-5: 20px;
  --mobile-space-6: 24px;
  --mobile-space-8: 32px;
}

/* Paleta mobile — tema claro (somente mobile ≤767px) */
@media (max-width: 767px) {
  [data-theme="light"] {
    --mobile-bg-primary:     #f8f9fc;
    --mobile-bg-secondary:   #ffffff;
    --mobile-bg-tertiary:    #eef0f6;
    --mobile-accent:         #3483FA;
    --mobile-accent-hover:   #2968C8;
    --mobile-text-primary:   #111827;
    --mobile-text-secondary: #6b7280;
    --mobile-text-muted:     #9ca3af;
    --mobile-border:         #e5e7eb;
    --mobile-success:        #16a34a;
    --mobile-error:          #dc2626;
    --mobile-warning:        #d97706;
    --mobile-surface-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
}