/* =================================================================
   ITALÍNEA BY ESTILO — VARIABLES.CSS
   Fontes auto-hospedadas (sem dependência externa) + design tokens.
   Compartilhado por TODAS as páginas do projeto.
   ================================================================= */

/* ---- Fontes auto-hospedadas (Poppins, Inter, Pacifico) ---- */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/poppins-800.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/inter-300.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/inter-700.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/inter-800.woff2') format('woff2');
}
@font-face{
  font-family:'Pacifico'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/pacifico-400.woff2') format('woff2');
}

/* =================================================================
   00. DESIGN TOKENS
   ================================================================= */
:root{
  /* --- Cor: base (identidade real Italínea By Estilo) --- */
  --color-white:      #FFFFFF;
  --color-offwhite:   #F6F6F6;
  --color-blue-tint:      #EAF2FE;
  --color-blue-tint-dark: #CFE1FC;
  --color-blue-tint-2:       #9CC0F8;
  --color-gray-100:   #F1F1F1;
  --color-gray-200:   #E3E5E8;
  --color-gray-300:   #C9CDD2;
  --color-gray-500:   #888E96;
  --color-gray-700:   #565C63;
  --color-gray-900:   #22262A;
  --color-black:      #1C1F22;
  --color-primary:       #2678EA;
  --color-primary-dark:  #1B5FC4;
  --color-navy:   #2D3238;

  /* --- Cor de destaque do menu / marca --- */
  --menu-accent: var(--color-primary);
  --menu-accent-soft: #CFE1FC;

  /* --- Tipografia (Poppins + Inter, igual ao site real) --- */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-script: 'Pacifico', cursive;

  --fs-h1: clamp(2.6rem, 4.2vw, 4.4rem);
  --fs-h2: clamp(2rem, 3vw, 2.9rem);
  --fs-h3: clamp(1.4rem, 1.8vw, 1.8rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* --- Espaçamento (escala base 8px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;

  /* --- Layout --- */
  --container-max: 1240px;
  --container-pad: 32px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 12px rgba(28,31,34,0.06);
  --shadow-md: 0 12px 32px rgba(28,31,34,0.10);
  --shadow-lg: 0 24px 64px rgba(28,31,34,0.16);
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (max-width: 768px){
  :root{ --container-pad: 20px; }
}