/*
 * tokens.css — Design Tokens da Conexa
 * ─────────────────────────────────────────────────────────
 * Paleta extraída diretamente do logotipo oficial:
 *   • Âmbar  #F5B942  — arco superior do símbolo
 *   • Verde  #A8CF5A  — arco inferior do símbolo
 *   • Carvão #2C2C2C  — cor do texto "CONEXA."
 *   • Cinza  #EAEAEA  — fundo do site original
 *
 * Altere os valores aqui para ajustar o tema globalmente.
 * ─────────────────────────────────────────────────────────
 */

:root {

  /* ── Cores da marca ──────────────────────────────────── */
  --amber:        #F5B942;
  --amber-dark:   #D99E2A;
  --amber-light:  #FAD07A;
  --amber-pale:   #FEF6E0;

  --green:        #A8CF5A;
  --green-dark:   #82AD35;
  --green-light:  #C3DF87;
  --green-pale:   #F0F8E0;

  /* ── Neutros ─────────────────────────────────────────── */
  --bg-main:      #EAEAEA;   /* fundo cinza do site original */
  --bg-white:     #FFFFFF;
  --bg-card:      #F4F4F4;

  --charcoal:     #2C2C2C;   /* texto do logo */
  --charcoal-mid: #3E3E3E;
  --dark-section: #1E1E1E;   /* seções escuras */

  --gray-200:     #DEDEDE;
  --gray-300:     #C8C8C8;
  --gray-400:     #A0A0A0;
  --gray-600:     #686868;
  --text-main:    #2C2C2C;
  --text-soft:    #5A5A5A;

  /* ── Feedback ────────────────────────────────────────── */
  --success:      #388e3c;
  --error:        #c62828;

  /* ── Tipografia ──────────────────────────────────────── */
  --f-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Poppins', 'Segoe UI', system-ui, sans-serif;

  /* ── Raios de borda ──────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  40px;

  /* ── Sombras ─────────────────────────────────────────── */
  --sh-sm:    0 2px 10px rgba(44,44,44,.08);
  --sh-md:    0 6px 28px rgba(44,44,44,.10);
  --sh-lg:    0 16px 52px rgba(44,44,44,.13);
  --sh-amber: 0 6px 24px rgba(245,185,66,.32);
  --sh-green: 0 6px 24px rgba(168,207,90,.30);

  /* ── Transições ──────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t:    .28s;

  /* ── Layout ──────────────────────────────────────────── */
  --max: 1180px;
}