/* ============================================================
   tokens.css — João Paulo Leôncio Portfolio

   PALETA: Cinza #979591 + Branco #FEFEFE sobre azul-preto
   Fundo:  #0c0d14 — azul-preto profundo, sofisticado
   Acento: #979591 — cinza quente, elegante, não agressivo
   Texto:  #fefefe — branco limpo, contraste máximo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Fundos ─────────────────────────────────────────────────
     Azul-preto profundo — sofisticado, não hacker             */
  --bg: #0c0d14;
  --bg-2: #13141e;
  --bg-3: #1a1b28;
  --bg-4: #222334;

  /* ── Cinza claro elegante — acento principal ────────────────
     Cinza frio e sofisticado. Contrasta limpo com o fundo
     escuro sem ser neon nem agressivo.                        */
  --accent: #979591;
  --accent-2: #767370;
  --accent-dim: rgba(151, 149, 145, 0.07);
  --accent-mid: rgba(151, 149, 145, 0.14);
  --accent-glow: rgba(151, 149, 145, 0.22);

  /* ── Texto ──────────────────────────────────────────────────*/
  --text: #fefefe;
  /* branco frio limpo                              */
  --text-2: #979591;
  /* secundário — cinza médio                       */
  --text-3: #4a4845;
  /* sutil — labels, visível mas discreto            */

  /* ── Bordas ─────────────────────────────────────────────────*/
  --border: rgba(151, 149, 145, 0.08);
  --border-2: rgba(151, 149, 145, 0.20);
  --border-3: rgba(151, 149, 145, 0.40);

  /* ── Tipografia ─────────────────────────────────────────────
     Playfair Display = elegância, personalidade, artístico
     Inter = legibilidade moderna, técnico mas limpo
     JetBrains Mono = apenas para UI técnica (nav, labels)     */
  --font-display: 'Playfair Display', Georgia, serif;
  --font: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* ── Motion ─────────────────────────────────────────────────*/
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.22s;
  --ts: 0.70s;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}