/* ==========================================================================
   Integra Cargo — tokens de identidade visual
   --------------------------------------------------------------------------
   Os valores abaixo sao os mesmos do sistema (SPA), extraidos de
   spa/src/resources/assets/sass/dashboard/custom/_variables.scss
   e de .../integraCustom.scss. Este arquivo existe para que a identidade
   fique num lugar so: mexeu aqui, mexeu no site inteiro.
   ========================================================================== */

:root {
  /* --- marca ------------------------------------------------------------ */
  --brand:      #FF854D;                 /* $primary */
  --brand-2:    #FD576B;                 /* $primary-states */
  --brand-grad: linear-gradient(to bottom left, #FF854D, #FD576B, #FF854D);

  /* Laranja escurecida para TEXTO e LINK sobre fundo claro.
     #FF854D sobre branco da ~2,6:1 de contraste, insuficiente para leitura;
     esta variante fica em ~4,8:1. Sobre fundo escuro use --brand normalmente. */
  --brand-ink:  #C9451A;

  /* --- superficies escuras -------------------------------------------- */
  /* Mais pretas que as do sistema (#1E1E2F / #27293D / #1A1E34), que puxavam
     para o azul-marinho. Os nomes --navy* ficaram para nao espalhar mudanca. */
  --navy:       #121214;                 /* fundo das faixas escuras */
  --navy-card:  #1C1C20;                 /* cartoes sobre o escuro */
  --navy-bar:   #0D0D0F;                 /* header e rodape */

  /* --- superficies claras ----------------------------------------------- */
  --surface:     #FFFFFF;
  --surface-alt: #F6F9FC;                /* $gray-100 */
  --ink:         #32325D;                /* $gray-800 — titulos sobre claro */
  --body-ink:    #525F7F;                /* $gray-700 — corpo sobre claro */
  --line:        rgba(29, 37, 59, .10);  /* divisores sobre claro */
  --line-dark:   rgba(255, 255, 255, .10);

  /* --- cores de apoio (viram acento de secao) --------------------------- */
  --info:    #00C6FF;  --info-2:    #3358F4;
  --success: #00F2C3;  --success-2: #0098F0;
  --purple:  #CA6FFF;  --purple-2:  #7600ED;
  --pink:    #FD5D93;  --pink-2:    #EC250D;
  --steel:   #344675;  --steel-2:   #263148;   /* $default / $default-states */

  /* --- tipografia -------------------------------------------------------- */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala de marketing. O sistema usa base 14px (dashboard denso);
     aqui a base e 17px. O que se herda do sistema e o TRATAMENTO:
     caixa alta + letter-spacing .025em + peso 600 em botao e rotulo. */
  --fs-base:  1.0625rem;   /* 17px */
  --fs-sm:    0.9375rem;   /* 15px */
  --fs-xs:    0.8125rem;   /* 13px */
  --track:    .025em;      /* $btn-letter-spacing / $heading-letter-spacing */

  /* --- raios (identicos aos do sistema) --------------------------------- */
  --r-card: 4px;      /* $border-radius-sm */
  --r-btn:  6.85px;   /* $border-radius-lg */
  --r-xl:   14px;     /* $border-radius-xl */
  --r-pill: 30px;     /* $btn-round-radius */

  /* --- sombras (identicas as do sistema) -------------------------------- */
  --sh-card:      0 1px 20px 0 rgba(0, 0, 0, .1);
  --sh-btn:       0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  --sh-btn-hover: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);

  /* --- layout ------------------------------------------------------------ */
  --wrap: 1180px;
  --gutter: 20px;
  --header-h: 76px;
}