/* ============================================================
   miFire — Design Tokens
   Versão 0.2 · Reconciliada com Manual de Marca oficial Mat Incêndio
   Pivot: paleta AZUL primária (não vermelha), tipografia Montserrat
   Cole no Custom CSS do tema (Hello Elementor → Customize → Additional CSS)
   ============================================================ */

:root {
  /* ----- BRAND PRIMARY · MAT BLUE FAMILY ----- */
  /* Azul é componente OBRIGATÓRIO em toda comunicação Mat Incêndio (Manual p.9) */
  --mf-blue-deep:    #000736;   /* Mat Deep Blue · primary darkest, hero bg, footer */
  --mf-blue-mid:     #0c396b;   /* Mat Blue · surfaces elevadas, headers */
  --mf-blue-light:   #007ade;   /* Mat Light Blue · interactive, links, eyebrows */
  --mf-blue-cobalt:  #0350d8;   /* Mat Cobalt · secondary accent, focus */
  --mf-blue-sky:     #cae6f9;   /* Mat Sky Blue · tints, backgrounds suaves */
  /* Azul para LABEL PEQUENO sobre fundo escuro. O Mat Light Blue sobre
     Mat Deep Blue dá 4.47:1 e reprova AA por 0,03. Este dá 7.6:1.
     Continua dentro da família azul obrigatória do manual. */
  --mf-blue-on-dark: #4ea9ec;
  /* Azul para TEXTO sobre fundo CLARO. O Mat Light Blue sobre branco da
     4.34:1 e sobre ink-100 da 4.09:1 — reprova AA nos dois. Este da 5.2:1
     no branco e 4.7:1 no ink-100. Mesma familia azul do manual. */
  --mf-blue-on-light: #006dc7;

  /* ----- BRAND ACCENT · COR DE DESTAQUE ----- */
  /* "Cor de destaque" — uso pontual, não dominante (Manual p.9) */
  --mf-red:          #c92227;   /* Mat Vermelho (Pantone 186C) · CTA primário, alarmes */
  --mf-red-hover:    #A91C20;   /* hover/pressed do CTA vermelho */
  --mf-red-tint:     #FCE7E8;   /* backgrounds suaves de alerta */

  /* ----- BRAND SECONDARY ----- */
  --mf-green:        #1d9e75;   /* Mat Verde · success, certificações ativas */
  --mf-orange:       #f9b132;   /* Mat Laranja · badges novidade, warnings */

  /* ----- NEUTRAIS BRAND ----- */
  --mf-gray-mat:     #888780;   /* Mat Cinza · texto institucional */
  --mf-gray-light:   #c2c3c4;   /* Mat Cinza claro · borders, dividers */

  /* ----- ALIASES SEMÂNTICOS ----- */
  /* Use estes em todo o resto do código — facilita troca futura. */
  --mf-brand-primary:        var(--mf-blue-deep);   /* AZUL — identidade dominante */
  --mf-brand-primary-hover:  var(--mf-blue-mid);
  --mf-brand-secondary:      var(--mf-blue-light);  /* AZUL claro — interações */
  --mf-brand-cta:            var(--mf-red);         /* VERMELHO — apenas destaque/CTA */
  --mf-brand-cta-hover:      var(--mf-red-hover);

  /* ----- INK / NEUTRAIS DE INTERFACE (texto, borders, dividers) ----- */
  --mf-ink-1000: #0E1116;
  --mf-ink-900:  #161A21;
  --mf-ink-800:  #212733;
  --mf-ink-700:  #3A4150;
  --mf-ink-500:  #6B7280;
  /* ink-600: texto pequeno (<18px) sobre fundo claro.
     ink-500 reprova WCAG AA sobre ink-100 (#F2F3F5): 4.35:1. Este passa 5.6:1. */
  --mf-ink-600:  #5A616E;
  --mf-ink-400:  #8B8B8B;
  --mf-ink-300:  #C4C7CD;
  --mf-ink-200:  #E5E7EB;
  --mf-ink-100:  #F2F3F5;
  --mf-ink-50:   #FAFAFA;

  /* ----- SEMANTIC ----- */
  --mf-success: var(--mf-green);
  --mf-warning: var(--mf-orange);
  --mf-info:    var(--mf-blue-light);
  --mf-error:   var(--mf-red);

  /* ----- FONTS -----
     Manual oficial Mat Incêndio (p.12): "A fonte corporativa é Montserrat. É forte, moderna,
     e reforça a personalidade da marca. Use em todas as comunicações — impressão e digital."
     Web-safe alternativa autorizada: Arial.
  */
  --mf-font-display: "Montserrat", "Arial", ui-sans-serif, system-ui, sans-serif;
  --mf-font-body:    "Montserrat", "Arial", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono: Azeret Mono. Escolha nossa (o manual só define Montserrat).
     Trocada de IBM Plex Mono, que é default de training data. Azeret tem
     desenho de etiqueta de calibração de equipamento industrial. */
  --mf-font-mono:    "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ----- TYPE SCALE ----- */
  --mf-fs-display-2xl: 4.5rem;    /* 72px · Hero H1 desktop */
  --mf-lh-display-2xl: 1.04;
  --mf-ls-display-2xl: -0.03em;   /* Montserrat se beneficia de tracking negativo no display */

  --mf-fs-display-xl: 3.5rem;     /* 56px */
  --mf-lh-display-xl: 1.06;
  --mf-ls-display-xl: -0.02em;

  --mf-fs-display-lg: 2.75rem;    /* 44px */
  --mf-lh-display-lg: 1.1;
  --mf-ls-display-lg: -0.02em;

  --mf-fs-heading-lg: 2.25rem;    /* 36px */
  --mf-lh-heading-lg: 1.18;
  --mf-ls-heading-lg: -0.01em;

  --mf-fs-heading-md: 1.75rem;    /* 28px */
  --mf-lh-heading-md: 1.25;
  --mf-ls-heading-md: -0.01em;

  --mf-fs-heading-sm: 1.375rem;   /* 22px */
  --mf-lh-heading-sm: 1.32;

  --mf-fs-body-lg: 1.125rem;      /* 18px */
  --mf-lh-body-lg: 1.6;

  --mf-fs-body-md: 1rem;          /* 16px */
  --mf-lh-body-md: 1.6;

  --mf-fs-body-sm: 0.875rem;      /* 14px */
  --mf-lh-body-sm: 1.55;

  --mf-fs-caption: 0.75rem;       /* 12px */
  --mf-lh-caption: 1.4;
  --mf-ls-caption: 0.04em;

  --mf-fs-eyebrow: 0.6875rem;     /* 11px */
  --mf-lh-eyebrow: 1.2;
  --mf-ls-eyebrow: 0.16em;        /* tracking maior em Montserrat eyebrow */

  --mf-fs-mono-md: 0.875rem;
  --mf-lh-mono-md: 1.5;

  /* ----- SPACING (4-base) ----- */
  /* Fio de cabelo: recuo interno de container tipo pill (aba dentro de
     trilho). Nao e ritmo, e ajuste optico. */
  --mf-space-hair: 2px;
  /* Folga funcional para o header fixo — nao encaixa na escala de ritmo
     porque e definida pela altura do cabecalho, nao pelo compasso. */
  --mf-header-clear: 160px;
  --mf-header-clear-baixo: 110px;

  --mf-space-0:  0;
  --mf-space-1:  0.25rem;
  --mf-space-2:  0.5rem;
  --mf-space-3:  0.75rem;
  --mf-space-4:  1rem;
  --mf-space-5:  1.5rem;
  --mf-space-6:  2rem;
  --mf-space-7:  3rem;
  --mf-space-8:  4rem;
  --mf-space-9:  6rem;
  --mf-space-10: 8rem;

  --mf-container-max: 1280px;
  --mf-container-pad-mobile:  1.5rem;
  --mf-container-pad-desktop: 3rem;

  /* ----- RADIUS · v0.3 mais generosos para tom editorial moderno ----- */
  --mf-radius-none: 0;
  --mf-radius-xs:   2px;
  --mf-radius-sm:   6px;
  --mf-radius-md:   10px;
  --mf-radius-lg:   14px;
  --mf-radius-xl:   20px;
  --mf-radius-pill: 999px;

  /* ----- SHADOWS ----- */
  --mf-shadow-xs:    0 1px 2px rgba(0, 7, 54, 0.06);          /* tinted with deep blue */
  --mf-shadow-sm:    0 2px 4px rgba(0, 7, 54, 0.08);
  --mf-shadow-md:    0 4px 12px rgba(0, 7, 54, 0.10);
  --mf-shadow-lg:    0 12px 28px rgba(0, 7, 54, 0.16);
  --mf-shadow-focus: 0 0 0 3px rgba(0, 122, 222, 0.35);       /* Mat Light Blue ring */

  /* ----- BORDERS ----- */
  --mf-border-hairline:        0.5px solid var(--mf-ink-200);
  --mf-border-default:         1px solid var(--mf-ink-200);
  --mf-border-strong:          1px solid var(--mf-ink-300);
  --mf-border-dark-hairline:   0.5px solid rgba(255, 255, 255, 0.10);
  --mf-border-dark-default:    1px solid rgba(255, 255, 255, 0.14);
  --mf-border-blue:            1px solid var(--mf-blue-light);

  /* ----- HAIRLINE GRADIENT (v0.3) · divisores editoriais ----- */
  --mf-hairline-light: linear-gradient(90deg, transparent 0%, var(--mf-blue-light) 50%, transparent 100%);
  --mf-hairline-dark:  linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);

  /* ----- NOISE GRAIN (v0.3) · textura editorial ----- */
  --mf-noise: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");

  /* ----- MOTION ----- */
  --mf-motion-snap:        120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --mf-motion-base:        200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --mf-motion-slow:        320ms cubic-bezier(0.16, 1, 0.3, 1);
  --mf-motion-deliberate:  500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ----- Z-INDEX ----- */
  --mf-z-base:     0;
  --mf-z-elevated: 10;
  --mf-z-sticky:   100;
  --mf-z-overlay:  500;
  --mf-z-modal:    1000;
  --mf-z-toast:    1500;

  /* ----- GRADIENTS · do manual: Mat Deep Blue → Mat Light Blue ----- */
  --mf-gradient-deep-light: linear-gradient(135deg, var(--mf-blue-deep) 0%, var(--mf-blue-light) 100%);
  --mf-gradient-deep-mid:   linear-gradient(180deg, var(--mf-blue-deep) 0%, var(--mf-blue-mid)  100%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mf-motion-snap:        1ms linear;
    --mf-motion-base:        1ms linear;
    --mf-motion-slow:        1ms linear;
    --mf-motion-deliberate:  1ms linear;
  }
}

/* Eyebrow utility · agora em AZUL Mat Light Blue (não vermelho) */
.mf-eyebrow {
  font-family: var(--mf-font-body);
  font-weight: 600;
  font-size: var(--mf-fs-eyebrow);
  line-height: var(--mf-lh-eyebrow);
  letter-spacing: var(--mf-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mf-blue-on-light);
}
.mf-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--mf-blue-on-light);
  vertical-align: middle;
  margin-right: 8px;
}

/* Eyebrow sobre fundo escuro · azul mais claro para manter AA (7.6:1) */
.mf-eyebrow--dark {
  color: var(--mf-blue-on-dark);
}
.mf-eyebrow--dark::before {
  background: var(--mf-blue-on-dark);
}

/* Eyebrow vermelho · uso pontual em chamadas críticas (plantão 24/7, alarmes) */
.mf-eyebrow--red {
  color: var(--mf-red);
}
.mf-eyebrow--red::before {
  background: var(--mf-red);
}