/* =============================================================
   CEAD DESIGN TOKENS — Sistema de Identidade Visual
   CertificadosEAD — v1.0.0 (2026-05-27)
   Aplicar via eduma-child. Reutilizar em todos os templates.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     CORES — SISTEMA
  ----------------------------------------------------------- */

  /* Primárias */
  --cead-green:         #16A34A;   /* Verde Marca — CTA, badge gratuito, ícones */
  --cead-navy:          #0F2044;   /* Navy — footer, headers, autoridade */
  --cead-amber:         #D97706;   /* Âmbar — premium, preços, compra */
  --cead-blue:          #1D4ED8;   /* Azul — tier Exclusivo, links */

  /* Tons suaves (backgrounds de badges e destaques) */
  --cead-green-light:   #DCFCE7;
  --cead-blue-light:    #DBEAFE;
  --cead-amber-light:   #FEF3C7;
  --cead-navy-light:    #EEF2FF;

  /* Texto */
  --cead-text:          #1E293B;   /* Corpo padrão */
  --cead-text-soft:     #64748B;   /* Labels, legendas, metadados */
  --cead-text-white:    #FFFFFF;

  /* Superfícies */
  --cead-white:         #FFFFFF;
  --cead-surface:       #F8FAFC;   /* Fundo de seções alternadas */
  --cead-border:        #E2E8F0;   /* Bordas de cards, inputs */

  /* Estados */
  --cead-success:       #16A34A;
  --cead-warning:       #F59E0B;
  --cead-error:         #DC2626;
  --cead-info:          #3B82F6;

  /* Certificados — identidade por tipo */
  --cead-cert-free:     #16A34A;   /* Gratuito */
  --cead-cert-excl:     #1D4ED8;   /* Exclusivo */
  --cead-cert-prem:     #D97706;   /* Premium */

  /* Hover states */
  --cead-green-hover:   #15803D;
  --cead-navy-hover:    #0A1628;
  --cead-amber-hover:   #B45309;
  --cead-blue-hover:    #1E40AF;


  /* -----------------------------------------------------------
     TIPOGRAFIA
  ----------------------------------------------------------- */

  --cead-font:          'Montserrat', sans-serif;

  /* Tamanhos */
  --cead-text-xs:       0.75rem;    /* 12px */
  --cead-text-sm:       0.875rem;   /* 14px */
  --cead-text-base:     1rem;       /* 16px */
  --cead-text-lg:       1.125rem;   /* 18px */
  --cead-text-xl:       1.25rem;    /* 20px */
  --cead-text-2xl:      1.5rem;     /* 24px */
  --cead-text-3xl:      1.875rem;   /* 30px */
  --cead-text-4xl:      2.25rem;    /* 36px */
  --cead-text-5xl:      3rem;       /* 48px */

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

  /* Line-height */
  --cead-leading-tight:  1.25;
  --cead-leading-snug:   1.375;
  --cead-leading-normal: 1.5;
  --cead-leading-relaxed:1.625;


  /* -----------------------------------------------------------
     ESPAÇAMENTO — escala base 4px
  ----------------------------------------------------------- */

  --cead-space-1:   0.25rem;   /*  4px */
  --cead-space-2:   0.5rem;    /*  8px */
  --cead-space-3:   0.75rem;   /* 12px */
  --cead-space-4:   1rem;      /* 16px */
  --cead-space-5:   1.25rem;   /* 20px */
  --cead-space-6:   1.5rem;    /* 24px */
  --cead-space-8:   2rem;      /* 32px */
  --cead-space-10:  2.5rem;    /* 40px */
  --cead-space-12:  3rem;      /* 48px */
  --cead-space-16:  4rem;      /* 64px */
  --cead-space-20:  5rem;      /* 80px */
  --cead-space-24:  6rem;      /* 96px */


  /* -----------------------------------------------------------
     GRID E LAYOUT
  ----------------------------------------------------------- */

  --cead-max-width:     1200px;
  --cead-max-width-md:  960px;
  --cead-max-width-sm:  720px;

  --cead-section-py:    var(--cead-space-10);   /* padding vertical seção desktop — 40px */
  --cead-section-py-sm: 2.125rem;              /* padding vertical seção mobile  — 34px */
  --cead-section-px:    var(--cead-space-6);    /* padding horizontal seção */

  --cead-gutter:        1.5rem;   /* 24px */


  /* -----------------------------------------------------------
     COMPONENTES
  ----------------------------------------------------------- */

  /* Border-radius */
  --cead-radius-sm:   4px;
  --cead-radius-md:   6px;
  --cead-radius-lg:   12px;
  --cead-radius-xl:   16px;
  --cead-radius-pill: 100px;

  /* Sombras */
  --cead-shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --cead-shadow-md:   0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --cead-shadow-lg:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --cead-shadow-xl:   0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);

  /* Botões — padding */
  --cead-btn-py:    0.6875rem;   /* 11px */
  --cead-btn-px:    1.5rem;      /* 24px */
  --cead-btn-py-sm: 0.5rem;
  --cead-btn-px-sm: 1rem;
  --cead-btn-py-lg: 0.875rem;
  --cead-btn-px-lg: 2rem;

  /* Inputs */
  --cead-input-py:  0.625rem;   /* 10px */
  --cead-input-px:  0.875rem;   /* 14px */
  --cead-input-border: 1.5px solid var(--cead-border);

  /* Transições */
  --cead-transition: 180ms ease;
}


/* =============================================================
   CLASSES UTILITÁRIAS — componentes base
   ============================================================= */

/* --- Botões --- */

.cead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cead-space-2);
  padding: var(--cead-btn-py) var(--cead-btn-px);
  font-family: var(--cead-font);
  font-size: var(--cead-text-sm);
  font-weight: var(--cead-font-semibold);
  line-height: 1;
  border-radius: var(--cead-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color var(--cead-transition),
              border-color var(--cead-transition),
              color var(--cead-transition),
              box-shadow var(--cead-transition);
  white-space: nowrap;
}

.cead-btn--primary {
  background: var(--cead-green);
  color: var(--cead-text-white);
  border-color: var(--cead-green);
}
.cead-btn--primary:hover {
  background: var(--cead-green-hover);
  border-color: var(--cead-green-hover);
  color: var(--cead-text-white);
}

.cead-btn--navy {
  background: var(--cead-navy);
  color: var(--cead-text-white);
  border-color: var(--cead-navy);
}
.cead-btn--navy:hover {
  background: var(--cead-navy-hover);
  border-color: var(--cead-navy-hover);
  color: var(--cead-text-white);
}

.cead-btn--amber {
  background: var(--cead-amber);
  color: var(--cead-text-white);
  border-color: var(--cead-amber);
}
.cead-btn--amber:hover {
  background: var(--cead-amber-hover);
  border-color: var(--cead-amber-hover);
  color: var(--cead-text-white);
}

.cead-btn--blue {
  background: var(--cead-blue);
  color: var(--cead-text-white);
  border-color: var(--cead-blue);
}
.cead-btn--blue:hover {
  background: var(--cead-blue-hover);
  border-color: var(--cead-blue-hover);
  color: var(--cead-text-white);
}

.cead-btn--outline {
  background: transparent;
  color: var(--cead-green);
  border-color: var(--cead-green);
}
.cead-btn--outline:hover {
  background: var(--cead-green);
  color: var(--cead-text-white);
}

.cead-btn--outline-white {
  background: transparent;
  color: var(--cead-text-white);
  border-color: var(--cead-text-white);
}
.cead-btn--outline-white:hover {
  background: var(--cead-text-white);
  color: var(--cead-navy);
}

.cead-btn--sm {
  padding: var(--cead-btn-py-sm) var(--cead-btn-px-sm);
  font-size: var(--cead-text-xs);
}

.cead-btn--lg {
  padding: var(--cead-btn-py-lg) var(--cead-btn-px-lg);
  font-size: var(--cead-text-base);
}


/* --- Badges --- */

.cead-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-family: var(--cead-font);
  font-size: var(--cead-text-xs);
  font-weight: var(--cead-font-semibold);
  border-radius: var(--cead-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.cead-badge--free {
  background: var(--cead-green-light);
  color: var(--cead-green);
}
.cead-badge--excl {
  background: var(--cead-blue-light);
  color: var(--cead-blue);
}
.cead-badge--prem {
  background: var(--cead-amber-light);
  color: var(--cead-amber);
}
.cead-badge--new {
  background: var(--cead-navy);
  color: var(--cead-text-white);
}


/* --- Cards --- */

.cead-card {
  background: var(--cead-white);
  border: 1px solid var(--cead-border);
  border-radius: var(--cead-radius-lg);
  padding: var(--cead-space-6);
  box-shadow: var(--cead-shadow-md);
  transition: box-shadow var(--cead-transition), transform var(--cead-transition);
}
.cead-card:hover {
  box-shadow: var(--cead-shadow-xl);
  transform: translateY(-2px);
}


/* --- Inputs --- */

.cead-input {
  width: 100%;
  padding: var(--cead-input-py) var(--cead-input-px);
  font-family: var(--cead-font);
  font-size: var(--cead-text-base);
  color: var(--cead-text);
  background: var(--cead-white);
  border: var(--cead-input-border);
  border-radius: var(--cead-radius-md);
  outline: none;
  transition: border-color var(--cead-transition), box-shadow var(--cead-transition);
}
.cead-input:focus {
  border-color: var(--cead-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.cead-input--error {
  border-color: var(--cead-error);
}
.cead-input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}


/* --- Seções --- */

.cead-section {
  padding: var(--cead-section-py) var(--cead-section-px);
}
.cead-section--alt {
  background: var(--cead-surface);
}
.cead-section--dark {
  background: var(--cead-navy);
  color: var(--cead-text-white);
}

.cead-container {
  max-width: var(--cead-max-width);
  margin: 0 auto;
  padding: 0 var(--cead-section-px);
}

.cead-section__title {
  font-family: var(--cead-font);
  font-weight: var(--cead-font-bold);
  font-size: var(--cead-text-3xl);
  color: var(--cead-text);
  line-height: var(--cead-leading-tight);
  margin-bottom: var(--cead-space-4);
}
.cead-section__subtitle {
  font-size: var(--cead-text-lg);
  color: var(--cead-text-soft);
  line-height: var(--cead-leading-relaxed);
  margin-bottom: var(--cead-space-8);
}
.cead-section--dark .cead-section__title,
.cead-section--dark .cead-section__subtitle {
  color: var(--cead-text-white);
}
.cead-section--dark .cead-section__subtitle {
  opacity: 0.8;
}

/* Label de seção (ex: "NOVIDADE", "PASSO A PASSO") */
.cead-eyebrow {
  display: inline-block;
  font-family: var(--cead-font);
  font-size: var(--cead-text-xs);
  font-weight: var(--cead-font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cead-green);
  margin-bottom: var(--cead-space-3);
}
.cead-section--dark .cead-eyebrow {
  color: var(--cead-amber);
}


/* --- Divisor --- */

.cead-divider {
  border: none;
  border-top: 1px solid var(--cead-border);
  margin: var(--cead-space-8) 0;
}


/* =============================================================
   RESPONSIVIDADE
   ============================================================= */

@media (max-width: 768px) {
  .cead-section {
    padding: var(--cead-section-py-sm) var(--cead-section-px);
  }
  .cead-section__title {
    font-size: var(--cead-text-2xl);
  }
  .cead-section__subtitle {
    font-size: var(--cead-text-base);
  }
  .cead-btn--lg {
    padding: var(--cead-btn-py) var(--cead-btn-px);
    font-size: var(--cead-text-sm);
  }
}