/* ==========================================================================
   Devon Rex Brasil: tokens
   Herdado do design system AEX (Oswald / Inter / Playfair Display +
   keyframe animationIn), com a paleta trocada para branco, preto e dourado.
   ========================================================================== */

:root {
  /* superfícies */
  --paper: #ffffff;
  --bone: #f5f3ef;
  --ink: #0b0b0b;
  --ink-soft: #131313;
  --ink-deep: #050505;

  /* dourado (equivalente ao #3F556B do AEX) */
  --gold: #c8a04a;
  --gold-lite: #e6cd8f;
  --gold-deep: #8a6a1f;
  --gold-metal: linear-gradient(100deg, #8a6a1f 0%, #e6cd8f 38%, #c8a04a 62%, #f2e3ba 100%);

  /* linhas */
  --line: rgba(11, 11, 11, 0.12);
  --line-strong: rgba(11, 11, 11, 0.22);
  --line-w: rgba(255, 255, 255, 0.1);
  --line-gold: rgba(200, 160, 74, 0.45);

  /* medidas */
  --rail: 84px;
  --shell: 1500px;
}

/* --- tipografia -------------------------------------------------------- */

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.font-display {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif;
}
.font-accent {
  font-family: 'Playfair Display', Georgia, serif;
}

/* --- animação de entrada (idêntica ao AEX) ----------------------------- */

@keyframes animationIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes riseIn {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- scrollbar --------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bone);
}
::-webkit-scrollbar-thumb {
  background: var(--gold);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-deep);
}

/* --- base ------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}
[id] {
  scroll-margin-top: 96px;
}
::selection {
  background: var(--gold);
  color: #0b0b0b;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}