/* =============================================================
   ANDROLOGIA MOINHOS — VARIÁVEIS DE DESIGN
   Extraídas do SITE 04 - RECONSTRUCAO LIMPA (post-11.css)
   ============================================================= */

:root {
  /* ── CORES PRINCIPAIS ─────────────────────────── */
  --color-primary:     #284B63;   /* Azul marinho — identidade */
  --color-secondary:   #B0D49F;   /* Verde claro — secundária  */
  --color-accent:      #FF8627;   /* Laranja — CTAs e botões   */
  --color-white:       #FFFFFF;
  --color-text:        #4A4A4A;   /* Texto corrido principal   */
  --color-text-light:  #757575;   /* Texto auxiliar/legenda    */
  --color-bg:          #FFFFFF;
  --color-bg-alt:      #F7F9FB;   /* Fundo de seções alternadas */
  --color-bg-dark:     #1A2A38;   /* Fundo escuro do footer    */
  --color-border:      #E0E7EF;
  --color-error:       #BA2121;
  --color-primary-dark:#1A3347;   /* Azul mais escuro — hover  */
  --color-accent-dark: #E66F10;   /* Laranja mais escuro — hover */
  --color-overlay:     rgba(26, 42, 56, 0.81); /* Overlay hero */

  /* ── TIPOGRAFIA ───────────────────────────────── */
  --font-heading: 'Onest', sans-serif;
  --font-body:    'Manrope', sans-serif;

  /* Escalas de tamanho */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-md:   1.125rem;  /*  18px */
  --text-lg:   1.25rem;   /*  20px */
  --text-xl:   1.5rem;    /*  24px */
  --text-2xl:  2rem;      /*  32px */
  --text-3xl:  2.375rem;  /*  38px — ~33px das seções */
  --text-4xl:  3rem;      /*  48px */
  --text-5xl:  4rem;      /*  64px */
  --text-hero: 4.5rem;    /*  72px — hero principal */

  /* Pesos */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line-heights */
  --leading-tight:  1.2;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;   /* Botões e labels em caps */

  /* ── ESPAÇAMENTO ──────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-section: 5rem; /* Espaçamento entre seções */

  /* ── CONTAINERS ───────────────────────────────── */
  --container-max:    1200px;
  --container-tablet: 1024px;
  --container-mobile:  767px;
  --container-px:     clamp(1rem, 4vw, 2rem);

  /* ── BORDAS E RAIOS ───────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ── SOMBRAS ──────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
  --shadow-card: 0 6px 24px rgba(40,75,99,.12);

  /* ── HEADER ───────────────────────────────────── */
  --topbar-height:  44px;
  --header-height:  80px;

  /* ── TRANSIÇÕES ───────────────────────────────── */
  --transition-base:   0.25s ease;
  --transition-fast:   0.15s ease;
  --transition-slow:   0.4s ease;

  /* ── Z-INDEX ──────────────────────────────────── */
  --z-sticky:   100;
  --z-modal:    200;
  --z-float:    150;
}

/* ── BREAKPOINTS (referência — usar em media queries) ──────
   mobile:  max-width: 767px
   tablet:  max-width: 1024px
   desktop: min-width: 1025px
   ────────────────────────────────────────────────────────── */