/* ============================================================
   tokens-v2.css — MBM Ar Condicionado (v2)
   Espelho da nova identidade visual (paleta tricromática:
   laranja brasa + petróleo MBM + marinho profundo).
   Estratégia: TODOS os componentes consomem estas variáveis.
   Estrutura idêntica à v1 — só os VALORES mudam. Nenhuma
   variável foi adicionada, removida ou renomeada.
   Fonte: branding/brand-mbm.md (paleta extraída do ID.ai)
   Data: 2026-04-29
   ============================================================ */

:root {
  /* ============================================================
     CORES — paleta v2 (tricromática)
     Primária  = petróleo MBM (#1C788C) — cor institucional dominante
     Secundária = marinho profundo (#152B40) — cor de texto/contraste
     Accent    = laranja brasa (#E19A4F) — cor de ação/destaque
     ============================================================ */

  /* Primária — petróleo MBM */
  --color-primary:         #1C788C;   /* RGB 28,120,140  CMYK 82,33,34,15 */
  --color-primary-hover:   #176B7C;   /* tom mais escuro pra hover (texto branco passa AA — 5.4:1) */
  --color-primary-dark:    #005C67;   /* RGB 0,92,103   CMYK 88,41,44,32 — pressionado / topo de fundo */
  --color-primary-light:   #E6F4F7;   /* derivado: petróleo lavado pra fundos suaves (lighten 90%) */

  /* Secundária = marinho profundo (escuro institucional, headings, footers) */
  --color-secondary:       #152B40;   /* RGB 21,43,64  CMYK 98,77,47,53 */

  /* Accent = laranja brasa (CTAs secundários, destaques pontuais) */
  --color-accent:          #E19A4F;   /* RGB 225,154,79  CMYK 11,45,75,2 */

  /* Neutros — derivados da família neutra/cinza-azulada do brandbook */
  --color-neutral-0:       #FFFFFF;
  --color-neutral-50:      #EDF0F2;   /* RGB 237,240,242 — neutra mais clara do brandbook */
  --color-neutral-100:     #D7DEE1;   /* RGB 215,222,225 */
  --color-neutral-150:     #CFD7DB;   /* derivado entre 100 e 200 */
  --color-neutral-200:     #BCC9D1;   /* RGB 188,201,209 */
  --color-neutral-300:     #ADBAC0;   /* RGB 173,186,192 */
  --color-neutral-400:     #9EADB4;   /* RGB 158,173,180 */
  --color-neutral-500:     #5C768A;   /* RGB 92,118,138 — cinza-azulado médio */
  --color-neutral-600:     #385168;   /* RGB 56,81,104 */
  --color-neutral-700:     #2A3F52;   /* derivado entre 600 e marinho */
  --color-neutral-800:     #152B40;   /* mesmo marinho profundo */
  --color-neutral-900:     #050E18;   /* RGB 5,14,24 — quase preto frio */

  /* Aliases semânticos */
  --color-text:            #152B40;   /* marinho profundo como texto principal */
  --color-text-muted:      #5C768A;
  --color-text-inverse:    #FFFFFF;
  --color-bg:              #FFFFFF;
  --color-bg-alt:          #EDF0F2;   /* neutra mais clara */
  --color-bg-dark:         #152B40;   /* marinho institucional pra seções escuras */
  --color-border:          #D7DEE1;
  --color-border-strong:   #BCC9D1;

  /* Status */
  --color-success:         #1F8A3B;
  --color-warning:         #E19A4F;   /* laranja brasa = também usado em warning, dialoga com a marca */
  --color-danger:          #C0392B;
  --color-info:            #1C788C;   /* primária */

  /* ============================================================
     TIPOGRAFIA
     Famílias Inter (corpo) + Manrope (display) confirmadas
     visualmente como compatíveis com o desenho de "mbm" e
     "ar condicionado" do brandbook (sans geométrico, terminações
     levemente arredondadas, glyphs com forma humanista).
     Mantém-se as mesmas fontes da v1.
     ============================================================ */
  --font-body:     "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display:  "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Escala fluida — idêntica à v1 */
  --fs-display-xl: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-display-lg: clamp(2rem, 4vw + 0.5rem, 3.25rem);
  --fs-display-md: clamp(1.625rem, 3vw + 0.25rem, 2.5rem);
  --fs-h1:         clamp(2rem, 4vw, 3rem);
  --fs-h2:         clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:         clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:         1.125rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-micro:      0.75rem;

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.7;

  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.05em;
  --ls-wider:      0.12em;

  /* ============================================================
     ESPAÇAMENTO (escala 4px) — idêntico à v1
     ============================================================ */
  --sp-0:   0;
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-14:  3.5rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ============================================================
     RAIOS — mesma escala da v1 (cantos sóbrios, identidade técnica)
     ============================================================ */
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --radius-pill:   999px;
  --radius-full:   9999px;

  /* ============================================================
     SOMBRAS — focus refeito sobre petróleo
     ============================================================ */
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(21, 43, 64, 0.04);
  --shadow-sm:     0 1px 3px rgba(21, 43, 64, 0.06), 0 1px 2px rgba(21, 43, 64, 0.04);
  --shadow-md:     0 4px 12px rgba(21, 43, 64, 0.08), 0 2px 4px rgba(21, 43, 64, 0.04);
  --shadow-lg:     0 12px 32px rgba(21, 43, 64, 0.12), 0 4px 8px rgba(21, 43, 64, 0.06);
  --shadow-xl:     0 24px 48px rgba(21, 43, 64, 0.16);
  --shadow-focus:  0 0 0 3px rgba(28, 120, 140, 0.35);

  /* ============================================================
     MOTION — idêntico à v1
     ============================================================ */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant:   80ms;
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      600ms;
  --dur-slower:    900ms;

  /* ============================================================
     LAYOUT — idêntico à v1
     ============================================================ */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --container-pad:    clamp(1rem, 4vw, 2.5rem);

  --header-h:         72px;
  --header-h-desktop: 80px;
  --utility-bar-h:    36px;

  --z-base:           1;
  --z-sticky:         50;
  --z-header:         100;
  --z-overlay:        200;
  --z-drawer:         300;
  --z-modal:          400;
  --z-toast:          500;

  /* ============================================================
     ALVOS DE TOQUE
     ============================================================ */
  --touch-target:     44px;

  /* ============================================================
     BREAKPOINTS (apenas referência — usar @media direto)
     sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
     ============================================================ */
}

/* ============================================================
   prefers-reduced-motion: zera durações
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
  }
}