/* ============================================================
   IDENTIDADE — design tokens
   Fonte única de verdade para cores, tipografia e espaçamento.
   Toda página nova deve importar este arquivo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600;700&family=Poppins:wght@700&display=swap');

:root {
  /* --- Cor de marca: Violeta --- */
  --brand:        #6C3BF4;
  --brand-deep:   #4B22C0;
  --brand-tint:   #EFE9FE;
  --brand-glow:   rgba(108, 59, 244, 0.32);

  /* --- Neutros --- */
  --bg:        #FAF9F7;
  --surface:   #FFFFFF;
  --ink:       #221D33;
  --ink-soft:  #6B6580;
  --line:      #E7E3F0;

  /* --- Cores de dado (gráficos, perfis) --- */
  --data-1: #6C3BF4;  /* Visual */
  --data-2: #F2A11B;  /* Auditivo */
  --data-3: #E0447B;  /* Cinestésico */

  /* --- Tipografia --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Espaçamento --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;

  /* --- Forma --- */
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  /* --- Elevação --- */
  --shadow-card: 0 2px 8px rgba(34, 29, 51, .04), 0 12px 32px rgba(34, 29, 51, .07);
  --shadow-brand: 0 8px 24px var(--brand-glow);

  /* --- Movimento --- */
  --transition: .25s ease;
}

/* ============ BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ============ COMPONENTES COMPARTILHADOS ============ */

/* ------------------------------------------------------------------
   MARCA
   O símbolo do site é o do 42 Lab (galáxia em órbita). O nome do
   produto, "lume", entra como wordmark ao lado — em Poppins Bold,
   a mesma sans geométrica dos numerais do 42.
   Arquivos em shared/: 42lab-ink.svg (escuro, fundo claro) e
   42lab.svg (claro, formato original, para fundo escuro).
   ------------------------------------------------------------------ */
.brand-logo {
  font-family: 'Poppins', var(--font-body);  /* fonte do logo, não dos títulos */
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.015em;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* O 42 é mais alto que largo — a altura manda. */
.brand-mark {
  width: 30px; height: 34px;
  background: url('42lab-ink.svg') center / contain no-repeat;
  flex-shrink: 0;
}
/* Para uso sobre fundo escuro/violeta */
.brand-logo.on-dark { color: #fff; }
.brand-logo.on-dark .brand-mark { background-image: url('42lab.svg'); }

/* --- Assinatura da marca-mãe -------------------------------------
   O logo do 42 Lab é usado no formato original: marca clara sobre
   fundo escuro. Por isso vem dentro de uma pastilha escura, mesmo
   quando a página tem fundo claro.
   ----------------------------------------------------------------- */
.lab-credit {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.35;
  transition: color var(--transition);
}
.lab-credit:hover { color: var(--ink); }
.lab-credit strong { color: var(--ink); font-weight: 600; }
.lab-chip {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: #1C1C22 url('42lab.svg') center / auto 66% no-repeat;
  flex-shrink: 0;
}
/* Em fundo já escuro, dispensa a pastilha */
.lab-credit.on-dark { color: rgba(255,255,255,.72); }
.lab-credit.on-dark strong { color: #fff; }
.lab-credit.on-dark .lab-chip { background-color: transparent; border-radius: 0; }

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 34px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:not(:disabled):hover {
  background: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--brand-glow);
}
.btn-primary:disabled {
  background: #D6D0E4;
  box-shadow: none;
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
}
.btn-ghost:hover { background: var(--brand); color: #fff; }