/* ==========================================================================
   UpMobb — Tokens de design
   Fonte unica de verdade para cores, tipografia, espacamentos e sombras.
   Para retematizar o site inteiro, altere apenas este arquivo.
   ========================================================================== */

:root {

  /* --- Marca -------------------------------------------------------------
     #004492 foi extraido do logo oficial (resources/images/logomarca.png).
     Nao trocar sem alinhar com a identidade visual. */
  --marca-500: #004492;
  --marca-600: #003a7d;
  --marca-700: #002f66;
  --marca-800: #002450;
  --marca-900: #00193a;
  --marca-400: #1a5da8;
  --marca-300: #4b83c2;
  --marca-200: #a9c6e5;
  --marca-100: #d6e5f4;
  --marca-50:  #eef4fb;

  /* --- Acento ------------------------------------------------------------
     Laranja de serralheria: usado com parcimonia, so em destaque e CTA
     secundario. Contrasta com o azul sem competir com ele. */
  --acento-500: #ff7a1a;
  --acento-600: #e56405;
  --acento-400: #ff9647;
  --acento-100: #ffe9d6;

  /* --- Neutros ----------------------------------------------------------- */
  --tinta-900: #0d1420;
  --tinta-800: #1a2333;
  --tinta-700: #2c3852;
  --tinta-600: #4a5568;
  --tinta-500: #6b7688;
  --tinta-400: #94a0b2;
  --tinta-300: #c3ccd9;
  --tinta-200: #e1e7ef;
  --tinta-100: #f0f3f8;
  --tinta-50:  #f7f9fc;
  --branco:    #ffffff;

  /* --- Semanticas -------------------------------------------------------- */
  --sucesso: #12855a;
  --alerta:  #b8860b;
  --erro:    #c02626;

  /* --- Superficies ------------------------------------------------------- */
  --fundo:            var(--branco);
  --fundo-suave:      var(--tinta-50);
  --fundo-escuro:     var(--marca-900);
  --fundo-marca:      var(--marca-500);
  --borda:            var(--tinta-200);
  --borda-forte:      var(--tinta-300);

  /* --- Texto ------------------------------------------------------------- */
  --texto:            var(--tinta-800);
  --texto-suave:      var(--tinta-600);
  --texto-fraco:      var(--tinta-500);
  --texto-invertido:  var(--branco);

  /* --- Tipografia -------------------------------------------------------- */
  --fonte-titulo: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-texto:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-mono:   'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* Escala fluida: cresce com a viewport, sem media query.
     clamp(minimo, preferido, maximo) */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   clamp(1.25rem, 1.15rem + 0.5vw,  1.5rem);
  --t-2xl:  clamp(1.5rem,  1.3rem  + 1vw,    2rem);
  --t-3xl:  clamp(1.875rem, 1.5rem + 1.9vw,  2.75rem);
  --t-4xl:  clamp(2.25rem, 1.7rem  + 2.8vw,  3.75rem);
  --t-5xl:  clamp(2.75rem, 1.9rem  + 4.2vw,  5rem);

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

  --altura-apertada: 1.1;
  --altura-titulo:   1.2;
  --altura-normal:   1.65;

  /* --- Espacamento (escala de 4px) --------------------------------------- */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.25rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-20: 5rem;
  --e-24: 6rem;
  --e-32: 8rem;

  /* Respiro vertical das secoes, fluido */
  --secao-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout ------------------------------------------------------------ */
  --largura-max:      1200px;
  --largura-estreita: 760px;
  --gutter:           clamp(1rem, 0.5rem + 2vw, 2rem);
  --altura-cabecalho: 76px;

  /* --- Raios ------------------------------------------------------------- */
  --raio-sm:   6px;
  --raio:      10px;
  --raio-md:   14px;
  --raio-lg:   20px;
  --raio-xl:   28px;
  --raio-full: 999px;

  /* --- Sombras ----------------------------------------------------------- */
  --sombra-sm:  0 1px 2px rgba(13, 20, 32, 0.06);
  --sombra:     0 2px 8px rgba(13, 20, 32, 0.07);
  --sombra-md:  0 8px 24px rgba(13, 20, 32, 0.09);
  --sombra-lg:  0 18px 48px rgba(13, 20, 32, 0.12);
  --sombra-xl:  0 32px 72px rgba(13, 20, 32, 0.16);
  --sombra-marca: 0 12px 32px rgba(0, 68, 146, 0.28);

  /* --- Transicoes -------------------------------------------------------- */
  --rapida:  140ms cubic-bezier(0.4, 0, 0.2, 1);
  --media:   240ms cubic-bezier(0.4, 0, 0.2, 1);
  --lenta:   420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Camadas ----------------------------------------------------------- */
  --z-base:      1;
  --z-suspenso:  10;
  --z-cabecalho: 100;
  --z-menu:      200;
  --z-modal:     300;
}