/* ==========================================================================
   ZENTH TRADE — DESIGN SYSTEM
   zt-tokens.css  ·  v0.3.2
   --------------------------------------------------------------------------
   Cores derivadas dos valores exatos do logotipo:
   #1B1464  indigo profundo · #56318B  violeta
   #E79623  laranja         · #FBF9F9  branco quente
   --------------------------------------------------------------------------
   Mudancas desta versao: Inter no lugar de Archivo, pesos mais baixos,
   escala de espaco ampliada e uma camada de vidro para superficies que
   ficam por cima do conteudo.
   ========================================================================== */

:root {

  /* ===================== COR ===================== */

  --zt-roxo-25:  #f8f7fc;
  --zt-roxo-50:  #f0eef9;
  --zt-roxo-100: #dcd7f0;
  --zt-roxo-200: #b9afe0;
  --zt-roxo-300: #8e7fc9;
  --zt-roxo-400: #6c55b0;
  --zt-roxo-500: #56318b;  /* marca */
  --zt-roxo-600: #43277a;
  --zt-roxo-700: #2e1c6e;
  --zt-roxo-800: #1b1464;  /* marca */
  --zt-roxo-900: #120c3f;
  --zt-roxo-950: #0a0628;

  --zt-laranja-50:  #fdf3e4;
  --zt-laranja-100: #fae2be;
  --zt-laranja-200: #f5c983;
  --zt-laranja-300: #efb04a;
  --zt-laranja-400: #e79623;  /* marca */
  --zt-laranja-500: #ce7f13;
  --zt-laranja-600: #a8650c;

  --zt-papel:      #fbf9f9;
  --zt-neutro-100: #f4f2f4;
  --zt-neutro-150: #edeaee;
  --zt-neutro-200: #e4e0e4;
  --zt-neutro-300: #c8c2ca;
  --zt-neutro-400: #9a939f;
  --zt-neutro-500: #6e6674;
  --zt-neutro-600: #4e4653;
  --zt-neutro-700: #383040;

  --zt-verde-400: #2e8f5e;
  --zt-verde-700: #1c6642;
  --zt-ambar-400: #c98a10;
  --zt-ambar-700: #8a5e08;

  /* ===================== TIPOGRAFIA ===================== */

  --zt-fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --zt-txt-2xs: 0.75rem;
  --zt-txt-xs:  0.8125rem;
  --zt-txt-sm:  0.875rem;
  --zt-txt-md:  1rem;
  --zt-txt-lg:  1.125rem;
  --zt-txt-xl:  1.375rem;
  --zt-txt-2xl: 1.75rem;
  --zt-txt-3xl: 2.25rem;
  --zt-txt-4xl: 3rem;
  --zt-txt-5xl: 4rem;

  /* Pesos contidos: 700 e o teto, e so no display */
  --zt-peso-normal: 400;
  --zt-peso-medio:  500;
  --zt-peso-semi:   600;
  --zt-peso-forte:  700;

  --zt-lh-display: 1.04;
  --zt-lh-titulo:  1.2;
  --zt-lh-normal:  1.6;
  --zt-lh-solto:   1.75;

  /* Inter pede tracking negativo em corpo grande e positivo em corpo pequeno */
  --zt-track-display: -0.035em;
  --zt-track-titulo:  -0.02em;
  --zt-track-normal:  -0.005em;
  --zt-track-mini:    0.01em;

  /* ===================== ESPACO ===================== */

  --zt-esp-1: 0.25rem;
  --zt-esp-2: 0.5rem;
  --zt-esp-3: 0.75rem;
  --zt-esp-4: 1rem;
  --zt-esp-5: 1.5rem;
  --zt-esp-6: 2rem;
  --zt-esp-7: 3rem;
  --zt-esp-8: 4.5rem;
  --zt-esp-9: 7rem;
  --zt-esp-10: 9rem;

  /* ===================== FORMA ===================== */

  --zt-raio-sm:  8px;
  --zt-raio-md:  12px;
  --zt-raio-lg:  18px;
  --zt-raio-xl:  26px;
  --zt-raio-full: 999px;

  /* Regras discretas: a separacao vem do espaco, a linha so confirma */
  --zt-regra: 1px solid var(--zt-neutro-150);
  --zt-regra-clara: 1px solid rgba(18, 12, 63, 0.06);
  --zt-regra-inversa: 1px solid rgba(251, 249, 249, 0.12);

  /* Sombra quase ausente, tingida da marca */
  --zt-sombra-sutil: 0 1px 2px rgba(18, 12, 63, 0.04);
  --zt-sombra-flutuante: 0 8px 32px rgba(18, 12, 63, 0.10), 0 2px 8px rgba(18, 12, 63, 0.04);

  --zt-transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --zt-largura-max: 1240px;
  --zt-largura-texto: 62ch;

  /* ===================== VIDRO ===================== */
  /* Usar apenas onde existe conteudo passando por tras: barra fixa,
     painel sobreposto e selo sobre foto. Vidro sobre fundo chapado
     nao borra nada e vira retangulo cinza. */

  --zt-vidro-claro:  rgba(251, 249, 249, 0.72);
  --zt-vidro-escuro: rgba(18, 12, 63, 0.55);
  --zt-vidro-borda:  rgba(255, 255, 255, 0.55);
  --zt-vidro-borda-escura: rgba(255, 255, 255, 0.14);
  --zt-vidro-blur:   saturate(180%) blur(16px);
  --zt-vidro-blur-leve: saturate(160%) blur(10px);

  /* ===================== SEMANTICO ===================== */

  --zt-fundo:      var(--zt-papel);
  --zt-superficie: #ffffff;
  --zt-superficie-alt: var(--zt-roxo-25);
  --zt-inverso:    var(--zt-roxo-900);

  --zt-tinta:       var(--zt-roxo-900);
  --zt-tinta-suave: var(--zt-neutro-500);
  --zt-tinta-tenue: var(--zt-neutro-400);
  --zt-tinta-inversa: var(--zt-papel);
  --zt-tinta-inversa-suave: rgba(251, 249, 249, 0.7);

  --zt-marca:       var(--zt-roxo-800);
  --zt-marca-clara: var(--zt-roxo-500);
  --zt-marca-gradiente: linear-gradient(115deg, var(--zt-roxo-900) 0%, var(--zt-roxo-500) 100%);

  --zt-acento:       var(--zt-laranja-400);
  --zt-acento-forte: var(--zt-laranja-500);
  --zt-acento-suave: var(--zt-laranja-50);

  --zt-foco: var(--zt-laranja-400);

  --zt-cond-lacrado:  var(--zt-verde-400);
  --zt-cond-vitrine:  var(--zt-ambar-400);
  --zt-cond-seminovo: var(--zt-neutro-400);

  --zt-disp-pronta:    var(--zt-verde-700);
  --zt-disp-encomenda: var(--zt-ambar-700);
  --zt-disp-esgotado:  var(--zt-neutro-400);
}

/* Conteudo ainda dependente de dado real do cliente */
.zt-ph {
  background: var(--zt-laranja-100);
  box-shadow: 0 0 0 1px var(--zt-laranja-200);
  border-radius: 4px;
  padding: 0 0.25em;
}
