/* ══════════════════════════════════════════════════════════════
   Base de Bem-Estar — Design System
   Achromático + um acento (evergreen). Tipografia Geist.
   Bordas via shadow (shadow-as-border). Sem gradientes decorativos.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Tinta e superfícies (preto da marca TWD) */
  --ink:        #111111;   /* texto primário, títulos, botões (primária da marca) */
  --ink-2:      #3f3f3f;   /* texto secundário */
  --ink-3:      #6b6b6b;   /* texto terciário / muted */
  --ink-4:      #9a9a9a;   /* placeholder / disabled */
  --line:       #e6e6e6;   /* bordas / divisores */
  --surface:    #ffffff;   /* cartões, fundo de conteúdo */
  --surface-2:  #fafafa;   /* superfície sutil */
  --bg:         #f7f7f5;   /* fundo da página */

  /* Acento da marca: dourado think.wedo (usado em fills/seleção/destaque, nunca como texto sobre branco) */
  --accent:     #fece05;   /* dourado */
  --accent-2:   #c7a223;   /* dourado escuro (gradiente da marca) */
  --accent-ink: #7a6000;   /* dourado escuro legível — texto sobre tint/branco */
  --accent-100: #fdf6d6;   /* tint dourado p/ badges/seleção */
  --accent-600: #b8901e;

  /* Sinais funcionais */
  --danger:     #b23b2e;
  --danger-100: #f7ece9;
  --warn:       #a8620a;
  --ok:         var(--accent-ink);

  /* Sombra-borda */
  --ring:       0 0 0 1px rgba(17,17,17,.10);
  --ring-soft:  0 0 0 1px rgba(17,17,17,.07);
  --card:       0 0 0 1px rgba(17,17,17,.08), 0 1px 2px rgba(17,17,17,.04);
  --card-2:     0 0 0 1px rgba(17,17,17,.08), 0 2px 4px rgba(17,17,17,.05), 0 8px 24px -12px rgba(17,17,17,.12);
  --focus:      0 0 0 2px #fff, 0 0 0 4px rgba(199,162,35,.55);

  --radius:     10px;
  --radius-sm:  7px;
  --radius-lg:  14px;

  --font:      'Coolvetica', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Tipografia — Coolvetica (display) nos títulos/marca; corpo em sans neutra */
h1,h2,h3{ margin:0; font-family:var(--font); font-weight:400; letter-spacing:.005em; line-height:1.1 }
h1{ font-size:27px } h2{ font-size:21px } h3{ font-size:16px }
.eyebrow{ font-family:var(--font); font-size:12px; font-weight:400; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3) }
.muted{ color:var(--ink-3) }
a{ color:var(--accent-ink); text-decoration:none }
a:hover{ text-decoration:underline }

/* Marca think.wedo — wordmark com Coolvetica; a lâmpada substitui o "i" */
.brandmark{display:inline-flex;align-items:center;font-family:var(--font);font-weight:400;
  letter-spacing:.01em;line-height:1;white-space:nowrap;user-select:none}
.brandmark .t,.brandmark .w{display:inline-flex;align-items:center}
.brandmark .t{color:currentColor}
.brandmark .w{color:var(--accent)}
.brandmark .bulb{display:inline-flex;align-items:center}
.brandmark .bulb svg{height:.82em;width:auto;display:inline-block;margin:0 -.03em;transform:translateY(.02em)}

/* Botões */
.btn{
  font:inherit; font-weight:500; font-size:15px; cursor:pointer; border:none;
  border-radius:var(--radius-sm); padding:12px 16px; transition:background .12s, box-shadow .12s, transform .05s;
  background:var(--ink); color:#fff;
}
.btn:hover{ background:#000 }
.btn:active{ transform:translateY(.5px) }
.btn:disabled{ opacity:.45; cursor:default }
.btn:focus-visible{ outline:none; box-shadow:var(--focus) }
.btn-accent{ background:var(--accent); color:#1a1400 }
.btn-accent:hover{ background:var(--accent-2) }
.btn-ghost{ background:var(--surface); color:var(--ink); box-shadow:var(--ring) }
.btn-ghost:hover{ background:var(--surface-2) }
.btn-block{ width:100% }

/* Campos */
label.field{ display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin:0 0 6px }
.input, select.input, textarea.input{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:none; box-shadow:var(--ring); border-radius:var(--radius-sm); padding:12px 13px;
  transition:box-shadow .12s;
}
select.input{ -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px }
.input:focus, select.input:focus, textarea.input:focus{ outline:none; box-shadow:var(--ring), var(--focus) }
.input::placeholder{ color:var(--ink-4) }

/* Cartão */
.card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--card) }

/* Badge / pill */
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--accent-100); color:var(--accent-ink) }

/* Selo "ao vivo" — ponto, sem emoji */
.dot{ width:7px; height:7px; border-radius:999px; background:var(--accent); display:inline-block }
@keyframes livepulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.dot.live{ animation:livepulse 1.8s ease-in-out infinite }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}