/* =========================================================
   GLOBAL.CSS
   Inicialização do site: variáveis, reset, padronização das
   tags HTML e utilitários reutilizáveis.
   ========================================================= */

/* ---------- 1. VARIÁVEIS (cores, fontes, medidas) ---------- */
:root {
  /* Cores de fundo */
  --bg: #070b14;          /* fundo padrão das seções */
  --bg-alt: #0f1a30;      /* fundo das seções alternadas */
  --dark: #050810;        /* hero e rodapé */
  --card: #101828;        /* cartões */
  --card-alt: #18253f;    /* cartões dentro de seções alternadas */

  /* Texto e linhas */
  --ink: #e6edf7;
  --mute: #8b98ad;
  --line: rgba(148, 163, 184, .14);

  /* As 3 cores da identidade tech */
  --accent: #22d3ee;      /* ciano */
  --accent-2: #8b5cf6;    /* violeta */
  --accent-soft: #67e8f9;
  --accent-2-soft: #a78bfa;

  /* Cores funcionais */
  --ok: #4ade80;
  --whatsapp: #25d366;

  /* Fontes */
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* Medidas */
  --container: 1240px;
  --gutter: clamp(32px, 6vw, 88px);
  --header-h: 60px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-pill: 99px;

  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
  -webkit-text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
}

/* ---------- 3. PADRONIZAÇÃO DAS TAGS ---------- */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; }
h1, h2, h3 { font-family: var(--font-serif); }
h1 { font-size: clamp(36px, 6vw, 72px); }
h2 { font-size: clamp(34px, 6vw, 60px); }
h3 { font-size: clamp(26px, 4vw, 38px); }
h4 { font-size: 16px; }

b, strong { font-weight: 600; }
em { font-style: italic; }
small { font-size: .85em; }
pre, code { font-family: var(--font-mono); }

details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-weight: 500; }
details p { color: var(--mute); margin-top: 8px; font-size: 15px; }

/* ---------- 4. UTILITÁRIOS ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  color: var(--accent);
  font: 400 13px var(--font-mono);
  letter-spacing: .06em;
}
.eyebrow::before { content: "// "; }

.title {
  font: 500 clamp(34px, 6vw, 60px)/1 var(--font-serif);
  margin: 6px 0 32px;
}
.title--sm { font-size: clamp(26px, 4vw, 38px); }

.btn {
  display: inline-block;
  padding: 12px 22px;
  margin: 0 8px 8px 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--dark);
  font-size: 14px;
  transition: box-shadow .2s;
}
.btn:hover { box-shadow: 0 0 0 3px rgba(139, 92, 246, .35); }
.btn-outline { background: none; color: var(--ink); border: 1px solid var(--line); }

/* Barra de "janela de código" usada no hero e no cartão de perfil */
.window-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font: 12px var(--font-mono);
  color: var(--mute);
}
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.window-bar span { margin-left: 10px; }

/* Animação de entrada ao rolar (ativada pelo script.js) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}