/* ==========================================================================
   Médica Materials — Design tokens do site
   Base: tokens do manual de marca (site-manual-de-marca/assets/css/tokens.css)
   + ajustes de interface inspirados na referência (fundos frios, sombras azuladas)
   ========================================================================== */

:root {
  /* Paleta institucional — Médica Materials (MIV) */
  --mm-marinho: #003366;  /* PANTONE 2955 C */
  --mm-escuro:  #003399;  /* PANTONE 661 C  */
  --mm-medio:   #0047D6;  /* PANTONE 2132 C */
  --mm-claro:   #0061F0;  /* PANTONE 285 C  */
  --mm-ceu:     #8CBAFF;  /* apoio — Manual de Marca */
  --branco:     #FFFFFF;

  /* Dermacryl */
  --dc-escuro:  #593096;  /* PANTONE 267 C  */
  --dc-medio:   #6633CC;  /* PANTONE 2090 C */
  --dc-claro:   #8F4DF2;  /* PANTONE 265 C  */

  /* Dermacryl FIX */
  --fx-profundo: #330066; /* PANTONE 2685 C */

  /* Neutros de interface (derivados do azul-marinho) */
  --n-0:   #FFFFFF;
  --n-25:  #F8FAFD;
  --n-50:  #F2F5FA;
  --n-100: #E5EBF3;
  --n-200: #CED8E5;
  --n-300: #AEBBCC;
  --n-400: #8291A6;
  --n-500: #5E6E84;
  --n-600: #475569;
  --n-700: #334155;
  --n-800: #1E2A3B;
  --n-900: #0F1A2A;

  /* Papéis de cor do site */
  --ink:       #003366;   /* textos e títulos */
  --muted:     #475569;   /* texto de apoio */
  --line:      #E5EBF3;   /* bordas finas, divisórias */
  --canvas:    #F8FAFD;   /* fundo "mármore" */
  --tint:      #F2F5FA;   /* fundo cinza claro de seção */
  --header-bg: #003399;   /* azul do tema (briefing) */
  --wa:        #128045;   /* WhatsApp — verde escurecido para contraste AA com texto branco */
  --wa-hover:  #0D6636;

  /* Feedback */
  --ok: #0E7C55;   --ok-bg: #E4F5EC;
  --err: #C8322B;  --err-bg: #FDECEB;
  --warn: #9A5B00; --warn-bg: #FFF3DC;

  /* Tipografia */
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-h1: clamp(2.5rem, 1.55rem + 3.3vw, 4rem);       /* 40 → 64 */
  --fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3rem);         /* 32 → 48 */
  --fs-h3: 1.25rem;                                    /* 20 */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);   /* 17 → 20 */
  --fs-body: 1.0625rem;                                /* 17 */
  --fs-sm: .9375rem;                                   /* 15 */
  --fs-xs: .8125rem;                                   /* 13 */

  /* Espaçamento — base 8 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sec-y: clamp(72px, 8.5vw, 128px);

  /* Raios — ecoam os cantos arredondados do símbolo */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Sombras azuladas em camadas (nunca preto neutro) */
  --sh-1: 0 1px 2px rgba(0, 30, 70, .06), 0 1px 3px rgba(0, 30, 70, .08);
  --sh-link: 0 4px 5px rgba(0, 30, 70, .04), 0 4px 10px rgba(0, 30, 70, .03), 0 10px 20px rgba(0, 30, 70, .05);
  --sh-btn:  0 4px 5px rgba(0, 30, 70, .04), 0 8px 15px rgba(0, 30, 70, .03), 0 15px 30px rgba(0, 30, 70, .06);
  --sh-card: 0 4px 5px rgba(0, 30, 70, .04), 0 8px 15px rgba(0, 30, 70, .03), 0 30px 50px rgba(0, 30, 70, .08);

  /* Movimento */
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --d-1: 150ms; --d-2: 250ms; --d-3: 400ms; --d-4: 800ms;

  /* Layout */
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 76px;
}

@media (max-width: 1080px) {
  :root { --header-h: 64px; }
}

/* --------------------------------------------------------------------------
   Temas de marca — aplicados por seção com data-brand
   --b-900 profundo · --b-700/600/500 tons das 3 barras · --b-ink texto
   --b-btn / --b-btn-hover cor do botão principal
   -------------------------------------------------------------------------- */
:root,
[data-brand="medica"] {
  --b-900: #003366;
  --b-700: #003399;
  --b-600: #0047D6;
  --b-500: #0061F0;
  --b-300: #8CBAFF;
  --b-100: #DCE8FF;
  --b-50:  #EFF5FF;
  --b-ink: #003366;
  --b-btn: #0047D6;
  --b-btn-hover: #003399;
}

[data-brand="dermacryl"] {
  --b-900: #593096;
  --b-700: #593096;
  --b-600: #6633CC;
  --b-500: #8F4DF2;
  --b-300: #C3A2FA;
  --b-100: #EADFFD;
  --b-50:  #F6F1FE;
  --b-ink: #593096;
  --b-btn: #6633CC;
  --b-btn-hover: #593096;
}

[data-brand="fix"] {
  --b-900: #330066;
  --b-700: #593096;
  --b-600: #6633CC;
  --b-500: #8F4DF2;
  --b-300: #C3A2FA;
  --b-100: #E8DEF8;
  --b-50:  #F5F0FB;
  --b-ink: #330066;
  --b-btn: #330066;
  --b-btn-hover: #593096;
}