/* ============================================================
   VARIABLES.CSS — Design Tokens
   Projeto: Agentes de Elite | LP Captação
   ============================================================ */

/* ------------------------------------------------------------
   IMPORTAÇÃO DE FONTES
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   ROOT TOKENS — Desktop (769px – 1439px)
   ------------------------------------------------------------ */
:root {

  /* ----------------------------------------------------------
     CORES
     ---------------------------------------------------------- */

  /* Gradiente primário */
  --color-gradient: linear-gradient(270deg, #0A99E6 0%, #55DDFA 100%);

  /* Azul principal — #0E9DE7 */
  --color-blue:         #0E9DE7;
  --color-blue-90:      rgba(14, 157, 231, 0.90);
  --color-blue-80:      rgba(14, 157, 231, 0.80);
  --color-blue-70:      rgba(14, 157, 231, 0.70);
  --color-blue-60:      rgba(14, 157, 231, 0.60);
  --color-blue-50:      rgba(14, 157, 231, 0.50);
  --color-blue-40:      rgba(14, 157, 231, 0.40);
  --color-blue-30:      rgba(14, 157, 231, 0.30);
  --color-blue-20:      rgba(14, 157, 231, 0.20);
  --color-blue-10:      rgba(14, 157, 231, 0.10);

  /* Azul claro — #55DDFA */
  --color-cyan:         #55DDFA;
  --color-cyan-90:      rgba(85, 221, 250, 0.90);
  --color-cyan-80:      rgba(85, 221, 250, 0.80);
  --color-cyan-70:      rgba(85, 221, 250, 0.70);
  --color-cyan-60:      rgba(85, 221, 250, 0.60);
  --color-cyan-50:      rgba(85, 221, 250, 0.50);
  --color-cyan-40:      rgba(85, 221, 250, 0.40);
  --color-cyan-30:      rgba(85, 221, 250, 0.30);
  --color-cyan-20:      rgba(85, 221, 250, 0.20);
  --color-cyan-10:      rgba(85, 221, 250, 0.10);

  /* Escuro — #131519 */
  --color-dark:         #131519;
  --color-dark-2:       #1A1E24;  /* fundo de cards e elementos elevados */
  --color-dark-90:      rgba(19, 21, 25, 0.90);
  --color-dark-80:      rgba(19, 21, 25, 0.80);
  --color-dark-70:      rgba(19, 21, 25, 0.70);
  --color-dark-60:      rgba(19, 21, 25, 0.60);
  --color-dark-50:      rgba(19, 21, 25, 0.50);
  --color-dark-40:      rgba(19, 21, 25, 0.40);
  --color-dark-30:      rgba(19, 21, 25, 0.30);
  --color-dark-20:      rgba(19, 21, 25, 0.20);
  --color-dark-10:      rgba(19, 21, 25, 0.10);

  /* Surface / Fundo claro — #F6F6F6 */
  --color-surface:         #F6F6F6;
  --color-surface-90:      rgba(246, 246, 246, 0.90);
  --color-surface-80:      rgba(246, 246, 246, 0.80);
  --color-surface-70:      rgba(246, 246, 246, 0.70);
  --color-surface-60:      rgba(246, 246, 246, 0.60);
  --color-surface-50:      rgba(246, 246, 246, 0.50);
  --color-surface-40:      rgba(246, 246, 246, 0.40);
  --color-surface-30:      rgba(246, 246, 246, 0.30);
  --color-surface-20:      rgba(246, 246, 246, 0.20);
  --color-surface-10:      rgba(246, 246, 246, 0.10);

  /* Preto puro */
  --color-black:         #000000;
  --color-black-90:      rgba(0, 0, 0, 0.90);
  --color-black-80:      rgba(0, 0, 0, 0.80);
  --color-black-70:      rgba(0, 0, 0, 0.70);
  --color-black-60:      rgba(0, 0, 0, 0.60);
  --color-black-50:      rgba(0, 0, 0, 0.50);
  --color-black-40:      rgba(0, 0, 0, 0.40);
  --color-black-30:      rgba(0, 0, 0, 0.30);
  --color-black-20:      rgba(0, 0, 0, 0.20);
  --color-black-10:      rgba(0, 0, 0, 0.10);

  /* Branco puro */
  --color-white:         #FFFFFF;
  --color-white-90:      rgba(255, 255, 255, 0.90);
  --color-white-80:      rgba(255, 255, 255, 0.80);
  --color-white-70:      rgba(255, 255, 255, 0.70);
  --color-white-60:      rgba(255, 255, 255, 0.60);
  --color-white-50:      rgba(255, 255, 255, 0.50);
  --color-white-40:      rgba(255, 255, 255, 0.40);
  --color-white-30:      rgba(255, 255, 255, 0.30);
  --color-white-20:      rgba(255, 255, 255, 0.20);
  --color-white-10:      rgba(255, 255, 255, 0.10);


  /* ----------------------------------------------------------
     TIPOGRAFIA — Família
     ---------------------------------------------------------- */
  --font-primary: 'Switzer', sans-serif;


  /* ----------------------------------------------------------
     TIPOGRAFIA — Tamanhos Desktop (769px – 1439px)
     ---------------------------------------------------------- */
  --text-h1:      56px;
  --text-h2:      40px;
  --text-h3:      32px;
  --text-h4:      24px;
  --text-large:   20px;
  --text-default: 16px;
  --text-small:   14px;
  --text-hat:     12px;


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


  /* ----------------------------------------------------------
     TIPOGRAFIA — Line Heights
     ---------------------------------------------------------- */
  --leading-heading:  1.2;   /* 120% — H1, H2, H3, H4 */
  --leading-body:     1.0;   /* 100% — textos comuns */
  --leading-hat:      1.2;   /* 120% — hat / eyebrow */


  /* ----------------------------------------------------------
     ESPAÇAMENTOS
     ---------------------------------------------------------- */
  --section-padding-desktop:   80px;
  --section-padding-mobile:    40px;

  --container-max-width:       1120px;
  --container-padding-desktop: 40px;
  --container-padding-mobile:  16px;


  /* ----------------------------------------------------------
     BORDAS
     ---------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;


  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.12);


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

}


/* ------------------------------------------------------------
   TIPOGRAFIA — Widescreen (≥ 1920px)
   ------------------------------------------------------------ */
@media (min-width: 1920px) {
  :root {
    --text-h1:      56px;
    --text-h2:      40px;
    --text-h3:      28px;
    --text-h4:      22px;
    --text-large:   20px;
    --text-default: 16px;
    --text-small:   14px;
    --text-hat:     12px;
  }
}


/* ------------------------------------------------------------
   TIPOGRAFIA — Mobile (≤ 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --text-h1:      40px;
    --text-h2:      28px;
    --text-h3:      20px;
    --text-h4:      18px;
    --text-large:   18px;
    --text-default: 16px;
    --text-small:   14px;
    --text-hat:     12px;
  }
}