/* ═══════════════════════════════════════════════════════════════════
   NEXUM — TOKENS DO DESIGN SYSTEM
   ───────────────────────────────────────────────────────────────────
   SÓ VARIÁVEIS. Nenhuma regra de estilo entra neste arquivo.

   ⚠️ Nenhum hex solto no CSS de tela, nenhum espaçamento fora da escala.
      Precisou de uma cor nova? Ela vira token aqui.

   A identidade: neutros profundos + um dourado contido. É uma joalheria
   — a cor de marca aparece pouco e com intenção (ação primária, item
   ativo, destaque de dado). O resto é neutro, com muito espaço em
   branco. Tela colorida demais parece painel de demonstração.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── COR DE MARCA ──
     Dourado envelhecido, não amarelo-ouro saturado: o segundo grita e
     cansa em tela. Este tem contraste suficiente sobre superfície clara
     para texto grande e ícone (≥ 3:1) — para texto normal sobre fundo
     claro, use --marca-texto. */
  --marca-50:  #FAF6EC;
  --marca-100: #F2E8CE;
  --marca-200: #E6D2A0;
  --marca-300: #D9BA6E;
  --marca-400: #C9A227;   /* a cor de marca */
  --marca-500: #B08D1E;
  --marca-600: #8F7118;
  --marca-700: #6E5612;
  --marca-800: #4D3C0D;

  --cor-primaria:        var(--marca-400);
  --cor-primaria-hover:  var(--marca-500);
  --cor-primaria-ativa:  var(--marca-600);
  /* Para TEXTO em cor de marca sobre fundo claro (4.5:1). O --marca-400
     não passa em texto pequeno — usar este evita contraste decorativo. */
  --marca-texto:         var(--marca-700);
  --sobre-primaria:      #1A1712;   /* texto sobre a cor de marca */

  /* Fundo suave de marca — o par de --marca-texto, como --cor-*-suave é o
     par de --cor-*. É o que pinta item ativo da sidebar, filtro ligado,
     badge e avatar. Sem estes três, cada tela reescrevia o mesmo literal
     no tema escuro e eles saíam de sincronia em silêncio. */
  --marca-suave:         var(--marca-50);
  --marca-suave-hover:   var(--marca-100);
  --marca-suave-borda:   var(--marca-200);

  /* ── NEUTROS ── */
  --cinza-50:  #FAFAF9;
  --cinza-100: #F4F4F2;
  --cinza-200: #E7E6E3;
  --cinza-300: #D3D1CC;
  --cinza-400: #A8A5A0;
  --cinza-500: #7A7772;
  --cinza-600: #565350;
  --cinza-700: #3D3B38;
  --cinza-800: #272523;
  --cinza-900: #1A1917;
  --cinza-950: #111010;

  /* ── SEMÂNTICAS ──
     Cada uma com um par forte (texto/ícone) e um suave (fundo de aviso),
     porque cor nunca é o único indicador de estado. */
  --cor-sucesso:        #1E7F4F;
  --cor-sucesso-suave:  #E6F4EC;
  --cor-aviso:          #A66A00;
  --cor-aviso-suave:    #FDF1DC;
  --cor-perigo:         #B3261E;
  --cor-perigo-suave:   #FCEAE9;
  --cor-info:           #1F5F8B;
  --cor-info-suave:     #E7F1F8;

  /* ── SUPERFÍCIE ── (trocadas inteiras no tema escuro) */
  --bg-app:        var(--cinza-100);
  --bg-superficie: #FFFFFF;
  --bg-elevado:    #FFFFFF;
  --bg-sutil:      var(--cinza-50);
  --bg-inverso:    var(--cinza-900);
  --borda:         var(--cinza-300);
  --borda-sutil:   var(--cinza-200);
  --borda-forte:   var(--cinza-400);

  /* ── TEXTO ── três níveis de ênfase, nunca mais */
  --texto-forte:   var(--cinza-900);
  --texto-normal:  var(--cinza-700);
  --texto-fraco:   var(--cinza-500);
  --texto-inverso: var(--cinza-50);

  /* ── ESPAÇAMENTO ── escala fixa. Nenhum `margin: 13px`. */
  --esp-1: 0.25rem;   /*  4px */
  --esp-2: 0.5rem;    /*  8px */
  --esp-3: 0.75rem;   /* 12px */
  --esp-4: 1rem;      /* 16px */
  --esp-5: 1.5rem;    /* 24px */
  --esp-6: 2rem;      /* 32px */
  --esp-7: 3rem;      /* 48px */
  --esp-8: 4rem;      /* 64px */

  /* ── RAIO ── */
  --raio-sm:   6px;
  --raio-md:   10px;
  --raio-lg:   16px;
  --raio-full: 999px;

  /* ── SOMBRA ── sutis. Sombra pesada envelhece a tela. */
  --sombra-sutil:   0 1px 2px rgba(26, 25, 23, .06), 0 1px 3px rgba(26, 25, 23, .04);
  --sombra-media:   0 2px 4px rgba(26, 25, 23, .06), 0 4px 12px rgba(26, 25, 23, .07);
  --sombra-elevada: 0 8px 16px rgba(26, 25, 23, .09), 0 16px 40px rgba(26, 25, 23, .10);
  --sombra-foco:    0 0 0 3px rgba(201, 162, 39, .35);

  /* ── TIPOGRAFIA ──
     Uma família só, com fallback de sistema: a fonte carrega rápido e
     nunca some. O título usa o mesmo corpo em peso maior — duas famílias
     numa interface densa brigam entre si. */
  --fonte-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-base);
  --fonte-mono: "JetBrains Mono", "Cascadia Code", Consolas,
                "Courier New", monospace;

  --txt-xs:   0.75rem;    /* 12px — rótulo, legenda */
  --txt-sm:   0.875rem;   /* 14px — texto de apoio */
  --txt-base: 1rem;       /* 16px — corpo */
  --txt-lg:   1.125rem;   /* 18px */
  --txt-xl:   1.375rem;   /* 22px — título de seção */
  --txt-2xl:  1.75rem;    /* 28px — título de página */
  --txt-3xl:  2.25rem;    /* 36px — número em destaque (faturamento) */

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-forte:   700;

  --linha-apertada: 1.25;
  --linha-normal:   1.5;
  --linha-solta:    1.7;

  /* ── TRANSIÇÃO ── nunca linear, nunca acima de 300ms em UI */
  --curva: cubic-bezier(.4, 0, .2, 1);
  --transicao-rapida: 150ms var(--curva);
  --transicao-media:  250ms var(--curva);

  /* ── ESTRUTURA ── larguras em px de propósito (são estruturais) */
  --sidebar-largura:         264px;
  --sidebar-largura-icones:  72px;
  --topbar-altura:           64px;
  --tabbar-altura:           64px;
  --conteudo-largura-max:    1600px;
  --toque-min:               44px;   /* alvo mínimo no mobile/tablet */

  /**
   * ── ALTURA DOS CONTROLES (botão, campo, select) ──
   *
   * ⚠️ NASCE IGUAL A `--toque-min` e ENCOLHE NO DESKTOP. São duas coisas
   *    diferentes que o projeto tratava como uma só:
   *
   *    `--toque-min` é ACESSIBILIDADE — o alvo de 44px que o dedo precisa
   *    acertar. Vale no celular e no tablet (que é o balcão da loja, em
   *    pé, com o dedo), e não se negocia lá.
   *
   *    `--controle-altura` é DENSIDADE — o tamanho que o controle tem na
   *    tela. No desktop, onde se aponta com o mouse, 44px é grande: uma
   *    barra de listagem com busca, três filtros e dois botões ficava
   *    pesada, e o painel parecia um aplicativo de celular esticado.
   *
   * ⚠️ O ponto de corte é 992px, o mesmo em que `html` vai a 75%
   *    (03-FRONTEND-PADROES.md §6) — abaixo dele estão celular e tablet,
   *    os dois operados pelo dedo. Encolher em 768px pegaria o tablet em
   *    paisagem, que é justamente o caso de uso mais tátil do produto.
   */
  --controle-altura:         var(--toque-min);

  /* ── CAMADAS ── centralizadas para não haver z-index: 9999 avulso */
  --z-base:      1;
  --z-sticky:    100;
  --z-sidebar:   200;
  --z-topbar:    300;
  --z-offcanvas: 400;
  --z-modal:     500;
  --z-toast:     600;
}

/* ═══════════════════════════════════════════════════════════════════
   TEMA ESCURO
   ───────────────────────────────────────────────────────────────────
   Só os tokens de superfície e texto são redefinidos — nunca
   `filter: invert()`, que destrói foto de joia e gráfico.

   ⚠️ O dourado clareia no escuro: --marca-400 sobre fundo escuro tem
      contraste de sobra, mas a AÇÃO PRIMÁRIA precisa de texto escuro
      por cima, não claro.
   ═══════════════════════════════════════════════════════════════════ */

[data-tema="escuro"] {
  --bg-app:        var(--cinza-950);
  --bg-superficie: var(--cinza-900);
  --bg-elevado:    var(--cinza-800);
  --bg-sutil:      #161514;
  --bg-inverso:    var(--cinza-100);
  --borda:         #35322E;
  --borda-sutil:   #262421;
  --borda-forte:   #4A4640;

  --texto-forte:   #F5F4F1;
  --texto-normal:  #CFCCC6;
  --texto-fraco:   #97938C;
  --texto-inverso: var(--cinza-900);

  /* O dourado precisa de mais luz sobre fundo escuro. */
  --cor-primaria:       var(--marca-300);
  --cor-primaria-hover: var(--marca-200);
  --cor-primaria-ativa: var(--marca-100);
  --marca-texto:        var(--marca-300);
  --sobre-primaria:     var(--cinza-950);

  /* O dourado rebaixado a fundo: escuro o bastante para o texto claro por
     cima passar, quente o bastante para não virar cinza. */
  --marca-suave:        #2A2416;
  --marca-suave-hover:  #342C1B;
  --marca-suave-borda:  #4A3F1E;

  /* Semânticas clareadas: as versões escuras somem no fundo escuro. */
  --cor-sucesso:       #4ADE80;
  --cor-sucesso-suave: #12291D;
  --cor-aviso:         #F5C453;
  --cor-aviso-suave:   #2E2415;
  --cor-perigo:        #F87171;
  --cor-perigo-suave:  #2E1817;
  --cor-info:          #7DBEE8;
  --cor-info-suave:    #15242E;

  /* Sombra quase não aparece no escuro; a separação vem da borda. */
  --sombra-sutil:   0 1px 2px rgba(0, 0, 0, .4);
  --sombra-media:   0 2px 6px rgba(0, 0, 0, .45);
  --sombra-elevada: 0 10px 30px rgba(0, 0, 0, .55);
  --sombra-foco:    0 0 0 3px rgba(217, 186, 110, .40);
}

/* Respeita a preferência do sistema enquanto o usuário não escolheu.
   A escolha explícita (data-tema no <html>) sempre vence. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) {
    --bg-app:        var(--cinza-950);
    --bg-superficie: var(--cinza-900);
    --bg-elevado:    var(--cinza-800);
    --bg-sutil:      #161514;
    --bg-inverso:    var(--cinza-100);
    --borda:         #35322E;
    --borda-sutil:   #262421;
    --borda-forte:   #4A4640;

    --texto-forte:   #F5F4F1;
    --texto-normal:  #CFCCC6;
    --texto-fraco:   #97938C;
    --texto-inverso: var(--cinza-900);

    --cor-primaria:       var(--marca-300);
    --cor-primaria-hover: var(--marca-200);
    --cor-primaria-ativa: var(--marca-100);
    --marca-texto:        var(--marca-300);
    --sobre-primaria:     var(--cinza-950);

    --marca-suave:        #2A2416;
    --marca-suave-hover:  #342C1B;
    --marca-suave-borda:  #4A3F1E;

    --cor-sucesso:       #4ADE80;
    --cor-sucesso-suave: #12291D;
    --cor-aviso:         #F5C453;
    --cor-aviso-suave:   #2E2415;
    --cor-perigo:        #F87171;
    --cor-perigo-suave:  #2E1817;
    --cor-info:          #7DBEE8;
    --cor-info-suave:    #15242E;

    --sombra-sutil:   0 1px 2px rgba(0, 0, 0, .4);
    --sombra-media:   0 2px 6px rgba(0, 0, 0, .45);
    --sombra-elevada: 0 10px 30px rgba(0, 0, 0, .55);
    --sombra-foco:    0 0 0 3px rgba(217, 186, 110, .40);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SOBRESCRITA DO BOOTSTRAP 5
   ───────────────────────────────────────────────────────────────────
   Bootstrap é a base, mas as variáveis dele apontam para os nossos
   tokens — senão o sistema parece "Bootstrap padrão com um logo".
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bs-primary:        var(--cor-primaria);
  --bs-primary-rgb:    201, 162, 39;
  --bs-success:        var(--cor-sucesso);
  --bs-warning:        var(--cor-aviso);
  --bs-danger:         var(--cor-perigo);
  --bs-info:           var(--cor-info);

  --bs-body-bg:        var(--bg-app);
  --bs-body-color:     var(--texto-normal);
  --bs-body-font-family: var(--fonte-base);
  --bs-body-font-size: var(--txt-base);
  --bs-body-line-height: var(--linha-normal);

  --bs-border-color:   var(--borda);
  --bs-border-radius:     var(--raio-md);
  --bs-border-radius-sm:  var(--raio-sm);
  --bs-border-radius-lg:  var(--raio-lg);
  --bs-border-radius-pill: var(--raio-full);

  --bs-link-color:       var(--marca-texto);
  --bs-link-hover-color: var(--marca-600);
}

/* ── ESCALA DE FONTE POR TAMANHO DE TELA ──
   Desktop reduz a raiz para caber mais dado na tela; isso só funciona
   porque todo CSS de conteúdo usa rem/em.

   ⚠️ Tablet e mobile ficam em 100%: reduzir a escala num alvo de toque
      prejudica a legibilidade e o acerto do dedo. */
@media (min-width: 992px) {
  html { font-size: 93.75%; }   /* 15px */

  /**
   * ⚠️ NO DESKTOP O CONTROLE ENCOLHE — e só ele, não o alvo de toque.
   *
   *    `--toque-min` continua 44px para tudo que é tocado com o dedo. O
   *    que muda aqui é a DENSIDADE dos botões e campos, onde se aponta
   *    com o mouse: 36px é o suficiente, e é o que tira do painel a
   *    aparência de aplicativo de celular esticado.
   *
   *    36px também é a altura que `.nx-btn--sm` já usava — o botão comum
   *    do desktop passa a ter o tamanho que o botão pequeno tinha, e o
   *    pequeno encolhe junto, mantendo a diferença entre os dois.
   */
  :root { --controle-altura: 36px; }
}
@media (min-width: 1400px) {
  html { font-size: 100%; }     /* 16px */
}

/* ── MOVIMENTO REDUZIDO ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao-rapida: 1ms linear;
    --transicao-media:  1ms linear;
  }
}