/*
 * ISPBR Telecom — CSS Custom Properties
 * Fase 1: Base CSS organizada
 * Gerado em: 2026-06-04
 *
 * Como usar: inclua este arquivo ANTES de todos os outros CSS.
 * Para alterar uma cor globalmente, edite apenas aqui.
 */

:root {

  /* === CORES PRINCIPAIS === */
  --color-primary:    #0C9615;   /* Verde — botões principais, links, destaques */
  --color-secondary:  #EEAB26;   /* Amarelo — preços, badges, destaques */
  --color-dark:       #32419E;   /* Azul índigo — header, footer, seções escuras */
  --color-tertiary:   #EAEFF3;   /* Cinza claro — fundos de seções */
  --color-light:      #FFFFFF;   /* Branco */

  /* === CORES DE TEXTO === */
  --color-text-base:  #777777;   /* Texto padrão do corpo */
  --color-text-dark:  #333333;   /* Texto escuro */
  --color-text-muted: #999999;   /* Texto secundário/cinza */
  --color-text-white: #FFFFFF;   /* Texto sobre fundos escuros */

  /* === CORES DE ESTADO (botões hover, alerts) === */
  --color-primary-dark:   #087a10;  /* Verde escuro (hover do primário) */
  --color-secondary-dark: #cc8f00;  /* Amarelo escuro (hover do secundário) */
  --color-dark-hover:     #232e7a;  /* Azul índigo escuro (hover do dark) */

  /* === GRADIENTES === */
  --gradient-primary: linear-gradient(135deg, #0C9615 0%, #EEAB26 80%);
  --gradient-dark:    linear-gradient(135deg, #32419E 0%, #232e7a 100%);

  /* === TIPOGRAFIA === */
  --font-primary:   "Open Sans", Arial, sans-serif;
  --font-heading:   "Montserrat", "Open Sans", Arial, sans-serif;

  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  48px;

  --line-height-base:    26px;
  --line-height-heading: 1.3;

  /* === ESPAÇAMENTOS === */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  40px;
  --spacing-xl:  60px;
  --spacing-2xl: 80px;

  /* === BORDAS E RAIOS === */
  --border-radius-sm:  4px;
  --border-radius-md:  8px;
  --border-radius-lg:  16px;
  --border-radius-pill: 50px;

  /* === SOMBRAS === */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.16);

  /* === TRANSIÇÕES === */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;

}

/* ===================================================
   CLASSES UTILITÁRIAS FALTANTES / CORREÇÕES
   =================================================== */

/* Correção: .yellowColor usada nos planos mas sem definição */
.yellowColor {
  color: var(--color-secondary) !important;
}

/* Texto branco sobre fundo escuro */
.text-white-force { color: var(--color-text-white) !important; }

/* Fundos rápidos */
.bg-primary    { background-color: var(--color-primary) !important; }
.bg-dark-ispbr { background-color: var(--color-dark) !important; }
.bg-tertiary   { background-color: var(--color-tertiary) !important; }

/* ===================================================
   CLASSES UTILITÁRIAS — substituem inline styles comuns
   =================================================== */

/* Fundo com ilustração (usado em múltiplas páginas) */
.section-illustration-bg {
  background-size: 100%;
  background-position: center top;
  background-image: url(images/ilustration.png);
  animation-duration: 1s;
}

/* Planos — cards */
.plan-card-wrap {
  display: inline-block;
  float: none;
}

/* Planos — tipografia de preço e nome */
.plan-price-value { font-size: 50px; }
.plan-name-title  { font-size: 24px; }

/* Ícones rocket */
.rocket-icon-sm { height: 80px; }
.rocket-icon-md { height: 90px; }

/* Texto pequeno padrão do site */
.text-site-sm { font-size: 13px; }

/* Popup */
.popup-img-max { max-width: 500px; }

/* Espaçamentos utilitários */
.mb-cta { margin-bottom: 3em; }
.mt-20  { margin-top: 20px; }

/* ===================================================
   ALIASES SEMÂNTICOS DE BOTÕES
   Use estes nomes em código novo para facilitar manutenção.
   Mapeia para as classes originais do skiction.css.

   .btn-dark        = btn-primary  (azul → outline branco no hover)
   .btn-green       = btn-primary2 (verde → azul no hover)
   .btn-green-alt   = btn-primary3 (verde → outline branco no hover)
   .btn-dark-alt    = btn-primary4 (azul → verde no hover)
   =================================================== */

.btn-dark {
  background-color: var(--color-dark);
  border: solid 2px var(--color-dark);
  color: #FFF;
  transition: var(--transition-base);
}
.btn-dark:hover {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-green {
  background-color: var(--color-primary);
  border: solid 2px var(--color-primary);
  color: #FFF;
  transition: var(--transition-base);
}
.btn-green:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: #FFF;
}

.btn-green-alt {
  background-color: var(--color-primary);
  border: solid 2px var(--color-primary);
  color: #FFF;
  transition: var(--transition-base);
}
.btn-green-alt:hover {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-dark-alt {
  background-color: var(--color-dark);
  border: solid 2px var(--color-dark);
  color: #FFF;
  transition: var(--transition-base);
}
.btn-dark-alt:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFF;
}