/* ==========================================================================
   CPM Vision 2.0 — variables.css
   Fonte única de verdade. Nenhum hex solto em outro arquivo.
   ========================================================================== */

:root {

  /* --- Superfícies ------------------------------------------------------ */
  --bg:              #0B0B0D;   /* fundo da aplicação */
  --bg-sidebar:      #111217;
  --bg-card:         #17181D;
  --bg-elevated:     #1B1D23;   /* modal, dropdown, popover */
  --bg-hover:        #20232B;
  --bg-input:        #0E0F13;
  --bg-subtle:       #14151A;   /* cabeçalho de tabela, zebra */

  /* --- Bordas ----------------------------------------------------------- */
  --border:          #2A2D36;
  --border-strong:   #363A45;
  --border-subtle:   #202329;

  /* --- Marca ------------------------------------------------------------ */
  --primary:         #A5004E;
  --primary-hover:   #C2185B;
  --primary-active:  #8E0043;
  --primary-soft:    rgba(165, 0, 78, .14);  /* fundo de estados ativos  */
  --primary-ring:    rgba(194, 24, 91, .35); /* anel de foco             */
  --primary-glow:    rgba(165, 0, 78, .10);  /* luz ambiente — assinatura */

  /* --- Texto ------------------------------------------------------------ */
  --text:            #FFFFFF;
  --text-secondary:  #9CA3AF;
  --text-muted:      #6B7280;
  --text-on-primary: #FFFFFF;

  /* --- Semântica -------------------------------------------------------- */
  --success:         #22C55E;
  --success-soft:    rgba(34, 197, 94, .12);
  --warning:         #F59E0B;
  --warning-soft:    rgba(245, 158, 11, .12);
  --danger:          #EF4444;
  --danger-soft:     rgba(239, 68, 68, .12);
  --info:            #38BDF8;
  --info-soft:       rgba(56, 189, 248, .12);

  /* --- Tipografia ------------------------------------------------------- */
  --font: 'Inter', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --fs-xs:   11px;   /* eyebrow, label de tabela   */
  --fs-sm:   13px;   /* texto secundário, badges   */
  --fs-base: 14px;   /* corpo — padrão do sistema  */
  --fs-md:   16px;
  --fs-lg:   18px;   /* título de card             */
  --fs-xl:   22px;   /* título de página           */
  --fs-2xl:  28px;   /* valor de KPI              */
  --fs-3xl:  34px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight: 1.2;
  --lh-base:  1.55;

  /* --- Espaçamento — escala de 8px -------------------------------------- */
  --sp-1:  4px;    /* meio-passo, só para ícone/texto */
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  40px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* --- Raio ------------------------------------------------------------- */
  --r-input:  8px;
  --r-btn:    10px;
  --r-card:   12px;
  --r-panel:  12px;
  --r-pill:   999px;
  --r-sidebar: 0;
/* --- Ícones ----------------------------------------------------------- */
  --icon-stroke:      1.5;
  --icon-stroke-bold: 2;
  /* --- Sombras — discretas, nunca exageradas ---------------------------- */
  --shadow-card:  0 8px 24px rgba(0,0,0,.25);
  --shadow-pop:   0 16px 40px rgba(0,0,0,.45);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03); /* filete de luz no topo */

  /* --- Movimento — nunca acima de 0.25s --------------------------------- */
  --t-fast: .12s ease;
  --t-base: .18s ease;
  --t-slow: .25s cubic-bezier(.4, 0, .2, 1);

  /* --- Estrutura -------------------------------------------------------- */
  --sidebar-w:  260px;
  --topbar-h:   72px;
  --content-max: 1440px;

  /* --- Camadas ---------------------------------------------------------- */
  --z-topbar:  30;
  --z-overlay: 45;
  --z-sidebar: 50;   /* ACIMA do overlay: o menu escurece o fundo, não a si mesmo */
  --z-modal:   60;
  --z-toast:   70;
}

/* Foco visível — obrigatório em todo elemento interativo. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-hover);
  outline-offset: 2px;
  border-radius: var(--r-input);
}

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}