/* ==========================================================================
   Felipe Vigneron — folha de estilo base
   Tokens e regras compartilhadas. Os estilos de layout específicos de cada
   elemento ficam inline no app.js, fiéis ao design de referência.
   ========================================================================== */

:root {
  --bg: #faf8f3;
  --bg-hover: #f5efe3;
  --bg-soft: #f7f0e6;
  --ink: #2b2824;
  --ink-dark: #241f1b;
  --ink-body: #332e29;
  --ink-2: #4a443d;
  --ink-3: #726c62;
  --faint: #9a9284;
  --accent: #7a3a30;
  --accent-hover: #5f2c24;
  --accent-line: #cbb3ab;
  --border: #e6e0d4;
  --border-2: #ece6da;
  --border-3: #ddd5c6;
  --border-4: #e6d8cb;
  --green: #3f6b4f;
  --red: #a24234;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: 'Newsreader', Georgia, serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: #e7d9cf; color: var(--ink); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover states (o design de referência usava style-hover) */
.fv-row:hover { background: var(--bg-hover); }
.fv-btn-primary:hover { background: var(--accent-hover) !important; }
.fv-tab { transition: color .2s; }
.fv-chip { transition: all .2s; }

button { font: inherit; }
input, textarea { font: inherit; }
input:focus, textarea:focus { border-color: var(--accent-line); }

/* Responsivo — o design é feito para 1080px; ajustes suaves para telas pequenas */
@media (max-width: 640px) {
  .fv-grid-date { grid-template-columns: 1fr !important; gap: 6px !important; }
  .fv-grid-date > .fv-date { padding-top: 0 !important; }
  .fv-videos { grid-template-columns: 1fr !important; }
  .fv-sobre { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fv-sobre .fv-portrait { width: 100% !important; max-width: 220px; }
  .fv-reading-title { font-size: 33px !important; }
  .fv-h3 { font-size: 30px !important; }
}