/* =============================================================
   VARIÁVEIS CSS GLOBAIS — Controle de Vendas
   Importar este arquivo antes de qualquer outro CSS do projeto.
============================================================= */
:root {
  /* ----------------------------------------------------------
     CORES PRINCIPAIS
  ---------------------------------------------------------- */
  --color-bg:             #0b0d14;
  --color-surface:        #12151f;
  --color-surface-alt:    #1a1e2e;
  --color-border:         #252a3d;
  --color-border-focus:   #1D4B9B;
  --color-border-error:   #ff4d6d;
  --color-border-success: #22c55e;

  /* ----------------------------------------------------------
     GRADIENTES DE DESTAQUE
  ---------------------------------------------------------- */
  --gradient-brand: linear-gradient(135deg, #1D4B9B 0%, #E42424 100%);
  --gradient-glow:  radial-gradient(ellipse 60% 40% at 50% 0%, rgba(29,75,155,.18) 0%, transparent 70%);

  /* ----------------------------------------------------------
     TEXTO
  ---------------------------------------------------------- */
  --color-text-primary:     #e8eaf6;
  --color-text-secondary:   #8892b0;
  --color-text-placeholder: #4a5280;
  --color-text-error:       #ff6b85;
  --color-text-success:     #4ade80;
  --color-text-link:        #5B9CF6;

  /* ----------------------------------------------------------
     BOTÃO PRINCIPAL
  ---------------------------------------------------------- */
  --btn-bg:           var(--gradient-brand);
  --btn-hover-shadow: 0 0 24px rgba(29,75,155,.55);

  /* ----------------------------------------------------------
     ESPAÇAMENTOS
  ---------------------------------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ----------------------------------------------------------
     BORDAS / RAIOS
  ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     TIPOGRAFIA
  ---------------------------------------------------------- */
  --font-family:    'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-md:   15px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-2xl:  30px;

  /* ----------------------------------------------------------
     TRANSIÇÕES
  ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* =============================================================
   MODO CLARO — sobrescreve variáveis quando data-theme="light"
============================================================= */
[data-theme="light"] {
  --color-bg:             #eef1f6;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f5f6fa;
  --color-border:         #d0d5e0;
  --color-border-focus:   #1D4B9B;
  --color-border-error:   #c0192d;
  --color-border-success: #16803d;

  --gradient-glow: none;

  --color-text-primary:     #1b1f2e;
  --color-text-secondary:   #505670;
  --color-text-placeholder: #8a90a8;
  --color-text-error:       #b81728;
  --color-text-success:     #15703a;
  --color-text-link:        #1a4590;

  --btn-hover-shadow: 0 2px 12px rgba(29,75,155,.25);

  /* Cores para badges e status no modo claro */
  --color-badge-aguardando-bg:   #fef3c7;
  --color-badge-aguardando-text: #92400e;
  --color-badge-aprovado-bg:     #d1fae5;
  --color-badge-aprovado-text:   #065f46;
  --color-badge-separado-bg:     #dbeafe;
  --color-badge-separado-text:   #1e40af;
  --color-badge-enviado-bg:      #e0e7ff;
  --color-badge-enviado-text:    #3730a3;
  --color-badge-pronto-bg:       #cffafe;
  --color-badge-pronto-text:     #155e75;
  --color-badge-finalizado-bg:   #d1fae5;
  --color-badge-finalizado-text: #065f46;
  --color-badge-rejeitado-bg:    #fee2e2;
  --color-badge-rejeitado-text:  #991b1b;
}