/* ============================================================
   Design Tokens — Portfólio de UX Research
   Fonte: DESIGN-clay-source.md (design system fornecido pelo usuário,
   originalmente descrito para Clay.com — cores, tipografia, espaçamento
   e componentes preservados fielmente; o conteúdo/copy e a estrutura de
   página foram adaptados para este portfólio em README.md deste mesmo
   diretório. Ver aquele arquivo para o guia de uso e mapeamento.)
   ============================================================ */

:root{
  /* ---------- Cores: base ---------- */
  --color-primary:#0a0a0a;
  --color-primary-active:#1f1f1f;
  --color-primary-disabled:#e5e5e5;
  --color-ink:#0a0a0a;
  --color-body:#3a3a3a;
  --color-body-strong:#1a1a1a;
  --color-muted:#6a6a6a;
  --color-muted-soft:#9a9a9a;
  --color-hairline:#e5e5e5;
  --color-hairline-soft:#f0f0f0;

  /* ---------- Cores: superfícies ---------- */
  --color-canvas:#fffaf0;
  --color-surface-soft:#faf5e8;
  --color-surface-card:#f5f0e0;
  --color-surface-strong:#ebe6d6;
  --color-surface-dark:#0a1a1a;
  --color-surface-dark-elevated:#1a2a2a;

  /* ---------- Cores: texto sobre cor ---------- */
  --color-on-primary:#ffffff;
  --color-on-dark:#ffffff;
  --color-on-dark-soft:#a0a0a0;

  /* ---------- Cores: marca / cards de destaque ---------- */
  --color-brand-pink:#ff4d8b;
  --color-brand-teal:#1a3a3a;
  --color-brand-lavender:#b8a4ed;
  --color-brand-peach:#ffb084;
  --color-brand-ochre:#e8b94a;
  --color-brand-mint:#a4d4c5;
  --color-brand-coral:#ff6b5a;

  /* ---------- Cores: semânticas ---------- */
  --color-success:#22c55e;
  --color-warning:#f59e0b;
  --color-error:#ef4444;

  /* ---------- Raio de borda ---------- */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:9999px;
  --radius-full:9999px;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-xxl:48px;
  --space-section:96px;

  /* ---------- Tipografia: famílias ----------
     Plain Black não é uma fonte web pública (ver "Known Gaps" na fonte).
     Substituto oficial indicado na própria fonte: Inter 500 com
     letter-spacing negativo para display; Inter padrão para o resto. */
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Reset mínimo
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--color-canvas);
  color:var(--color-body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}

/* ============================================================
   Tipografia — escala de hierarquia
   ============================================================ */
.display-xl{font-family:var(--font-display);font-size:72px;font-weight:500;line-height:1;letter-spacing:-2.5px;color:var(--color-ink);}
.display-lg{font-family:var(--font-display);font-size:56px;font-weight:500;line-height:1.05;letter-spacing:-2px;color:var(--color-ink);}
.display-md{font-family:var(--font-display);font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-1px;color:var(--color-ink);}
.display-sm{font-family:var(--font-display);font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-0.5px;color:var(--color-ink);}
.title-lg{font-family:var(--font-body);font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-0.3px;}
.title-md{font-family:var(--font-body);font-size:18px;font-weight:600;line-height:1.4;}
.title-sm{font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.4;}
.body-md{font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.55;}
.body-sm{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.55;}
.caption{font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1.4;}
.caption-uppercase{font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1.4;letter-spacing:1.5px;text-transform:uppercase;}
.button-type{font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1;}
.nav-link-type{font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1.4;}

@media (max-width:768px){
  .display-xl{font-size:36px;letter-spacing:-1px;}
  .display-lg{font-size:32px;letter-spacing:-0.8px;}
  .display-md{font-size:28px;letter-spacing:-0.5px;}
  .display-sm{font-size:24px;letter-spacing:-0.3px;}
}

/* ============================================================
   Botões
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:12px 20px;border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:14px;font-weight:600;
  border:none;cursor:pointer;text-decoration:none;
  transition:background-color .15s ease;
}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary);}
.btn-primary:hover{background:var(--color-primary-active);}
.btn-primary:disabled{background:var(--color-primary-disabled);color:var(--color-muted);cursor:not-allowed;}
.btn-secondary{background:var(--color-canvas);color:var(--color-ink);border:1px solid var(--color-hairline);}
.btn-secondary:hover{border-color:var(--color-ink);}
.btn-on-color{background:#fff;color:var(--color-ink);}
.btn-text-link{background:transparent;color:var(--color-ink);padding:0;height:auto;}
.text-link{font-family:var(--font-body);font-size:16px;color:var(--color-ink);text-decoration:underline;}

/* ============================================================
   Navegação
   ============================================================ */
.top-nav{
  background:var(--color-canvas);color:var(--color-ink);
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-lg);
}
.top-nav .nav-links{display:flex;gap:var(--space-lg);}
.top-nav .nav-links a{font-family:var(--font-body);font-size:14px;font-weight:500;text-decoration:none;color:var(--color-body);}
.top-nav .nav-links a:hover{color:var(--color-ink);}

/* ============================================================
   Cards
   ============================================================ */
.card{border-radius:var(--radius-lg);padding:var(--space-lg);}
.card-cream{background:var(--color-surface-card);color:var(--color-ink);}
.card-hairline{background:var(--color-canvas);border:1px solid var(--color-hairline);color:var(--color-ink);}

/* cards de destaque saturados — usados nos 3 cases do portfólio */
.feature-card{border-radius:var(--radius-xl);padding:var(--space-xl);}
.feature-card-pink{background:var(--color-brand-pink);color:var(--color-on-primary);}
.feature-card-teal{background:var(--color-brand-teal);color:var(--color-on-dark);}
.feature-card-lavender{background:var(--color-brand-lavender);color:var(--color-ink);}
.feature-card-peach{background:var(--color-brand-peach);color:var(--color-ink);}
.feature-card-ochre{background:var(--color-brand-ochre);color:var(--color-ink);}
.feature-card-cream{background:var(--color-surface-card);color:var(--color-ink);}

/* ============================================================
   Inputs
   ============================================================ */
.text-input{
  background:var(--color-canvas);color:var(--color-ink);
  font-family:var(--font-body);font-size:16px;
  border:1px solid var(--color-hairline);border-radius:var(--radius-md);
  padding:12px 16px;height:44px;width:100%;
}
.text-input:focus{outline:none;border-color:var(--color-ink);}

/* ============================================================
   Tabs / badges
   ============================================================ */
.tab{
  display:inline-flex;padding:8px 16px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:14px;font-weight:500;
  background:transparent;color:var(--color-muted);cursor:pointer;border:none;
}
.tab.active{background:var(--color-surface-card);color:var(--color-ink);}
.badge-pill{
  display:inline-flex;padding:4px 12px;border-radius:var(--radius-pill);
  background:var(--color-surface-card);color:var(--color-ink);
  font-family:var(--font-body);font-size:13px;font-weight:500;
}

/* ============================================================
   Seções / footer
   ============================================================ */
.section{padding:var(--space-section) var(--space-lg);}
.footer{background:var(--color-surface-soft);color:var(--color-body);padding:80px var(--space-lg);}

.container{max-width:1280px;margin:0 auto;}