/* public/css/fm/base.css
 *
 * Fundação do rebuild (fatia 1): SÓ tokens. Sem reset global enquanto o skin
 * viver (entraria em guerra com normalize/femtov1 nas páginas template) — o
 * reset próprio chega na fatia 5, junto da deleção do skin.
 * Convenção: --fm-<categoria>-<variação> (espelha Figma Variables: color/teal…).
 * Fonte dos valores: docs/diagnostico/ (§5 tokens; data/tokens-rootvars.csv).
 */
:root {
  /* —— cor: marca (higienizada; o --black do skin ERA navy e mentia o nome) —— */
  --fm-navy: #011222;
  --fm-white: #fff;
  --fm-surface: #f8f8f8; /* superfície clara (cards filled; ex bg-color-accent-1/primary do skin) */
  --fm-gray-700: #3c444c; /* ex --high-gray   (texto principal) */
  --fm-gray-500: #55606b; /* ex --normal-gray */
  --fm-gray-300: #8d949c; /* ex --medium-gray */
  --fm-gray-100: #caced1; /* ex --light-gray  */
  --fm-teal: #178398;        /* ex --high-blue (cor de ação da marca) */
  --fm-teal-bright: #20b9d6; /* ex --normal-blue */
  --fm-teal-soft: #6ad0e4;   /* ex --medium-blue */
  --fm-teal-pale: #bae9f2;   /* ex --light-blue  */
  --fm-red: #dd1a6e;         /* ex --normal-red  */
  --fm-red-strong: #9d124e;  /* ex --high-red    */
  --fm-red-soft: #e8669e;    /* ex --medium-red  */
  --fm-red-pale: #f4b8d2;    /* ex --light-red   */
  --fm-yellow: #fad021;        /* ex --normal-yellow */
  --fm-yellow-strong: #b29417; /* ex --high-yellow   */
  --fm-yellow-soft: #fce06a;   /* ex --medium-yellow */
  --fm-yellow-pale: #fdf0ba;   /* ex --light-yellow  */

  /* —— tipografia: 2 famílias reais, zero fantasmas (exceção E3) —— */
  --fm-font-display: Oswald, sans-serif;
  --fm-font-body: 'Nunito Sans', sans-serif;
  /* escala de tamanhos (consolida as ~47 classes vivas; refinada rota a rota) */
  --fm-text-xs: 0.75rem;
  --fm-text-sm: 0.875rem;
  --fm-text-md: 1rem;
  --fm-text-lg: 1.25rem;
  --fm-text-xl: 1.5rem;
  --fm-text-2xl: 2rem;
  --fm-text-3xl: 3rem;
  --fm-text-4xl: 4rem;
  --fm-text-5xl: 5rem;

  /* —— espaço (substitui as utilitárias de margem/padding nas rotas novas) —— */
  --fm-space-1: 0.25rem;
  --fm-space-2: 0.5rem;
  --fm-space-3: 0.75rem;
  --fm-space-4: 1rem;
  --fm-space-6: 1.5rem;
  --fm-space-8: 2rem;
  --fm-space-12: 3rem;
  --fm-space-16: 4rem;
  --fm-space-24: 6rem;
  --fm-space-32: 8rem;

  /* —— radius: o "look iPhone" responsivo (6/4/3/2rem, igual ao skin) —— */
  --fm-radius-screen: 6rem;
  --fm-radius-lg: 2rem;
  --fm-radius-md: 1rem;
  --fm-radius-sm: 0.5rem;
  --fm-radius-pill: 100rem;

  /* —— largura máxima do conteúdo (site-wide; em telas ultra-wide o conteúdo
     centraliza em vez de esticar de ponta a ponta) —— */
  --fm-max-width: 1600px;

  /* —— sombras: escala navy-tinted (deriva das boas do mapa; substitui as 17
     variantes pretas genéricas do skin + o glow azul Webflow #3898ec) —— */
  --fm-shadow-sm: 0 2px 8px rgba(1, 18, 34, 0.1); /* repouso: cards */
  --fm-shadow-md: 0 6px 22px rgba(1, 18, 34, 0.18); /* elevado: dropdowns, hover */
  --fm-shadow-lg: 0 12px 36px rgba(1, 18, 34, 0.28); /* flutuante: popups, modais */
  --fm-shadow-focus: 0 0 0 3px rgba(23, 131, 152, 0.35); /* anel de foco teal */

  /* —— scrim/overlay: camada que escurece a MÍDIA p/ o texto ler por cima (sections
     com foto de fundo — cases de projeto, CTA com bg-photo). Compõem sobre --fm-navy /
     --fm-teal. No Figma viram estilos de preenchimento que referenciam essas cores. —— */
  --fm-scrim-photo: linear-gradient(90deg, var(--fm-navy), transparent); /* navy → transparente (texto à esquerda, foto à direita) */
  --fm-scrim-photo-strong: linear-gradient(
    90deg,
    var(--fm-navy) 12%,
    rgba(1, 18, 34, 0.65) 75%,
    rgba(1, 18, 34, 0.5)
  ); /* tela estreita: foto ocupa tudo, precisa escurecer mais */
  --fm-scrim-teal: rgba(23, 131, 152, 0.78); /* tinta teal sobre foto (CTA com bg-photo) */
}
@media (max-width: 991px) { :root { --fm-radius-screen: 4rem; } }
@media (max-width: 767px) { :root { --fm-radius-screen: 3rem; } }
@media (max-width: 479px) { :root { --fm-radius-screen: 2rem; } }

/* —— reset global de line-height (portado do site.css, que era injetado pelo
   TemplatePage; o skin usava 1.8 no .body — solto demais. 1.6 é o valor do DS.) —— */
body { line-height: 1.6; }