/* =====================================================================
   Base — reset + tipografia + utilitários globais
   ===================================================================== */

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

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

html, body { height: 100%; }

body {
  font-family: var(--vai-font);
  font-size: var(--vai-fs-13);
  line-height: 1.55;
  color: var(--vai-ink);
  background: var(--vai-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--vai-orange); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
img, svg, video { display: block; max-width: 100%; }

ul, ol { list-style: none; }

::selection { background: var(--vai-orange); color: #fff; }

/* Scrollbar (subtle, premium) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(80, 82, 88, 0.18);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(80, 82, 88, 0.32); background-clip: padding-box; border: 2px solid transparent; }

/* Logo VAI (texto, conforme design system) */
.vai-logo-text {
  font-family: var(--vai-font);
  font-weight: 900;
  font-style: italic;
  color: var(--vai-orange);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Helpers */
.vai-flex { display: flex; }
.vai-grid { display: grid; }
.vai-hidden { display: none !important; }
.vai-mono { font-family: var(--vai-font-mono); }
.vai-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vai-screen-reader-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Page-level animation entrances */
@keyframes vai-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes vai-rise-in   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vai-pulse     { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes vai-spin      { to { transform: rotate(360deg); } }
@keyframes vai-shimmer   { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.vai-anim-fade  { animation: vai-fade-in var(--vai-dur-base) var(--vai-ease); }
.vai-anim-rise  { animation: vai-rise-in var(--vai-dur-slow) var(--vai-ease); }
.vai-anim-pulse { animation: vai-pulse 1.4s ease-in-out infinite; }

.vai-skeleton {
  background: linear-gradient(90deg,
    var(--vai-surface-muted) 0%,
    var(--vai-surface-hover) 50%,
    var(--vai-surface-muted) 100%);
  background-size: 200% 100%;
  animation: vai-shimmer 1.4s linear infinite;
  border-radius: var(--vai-r-6);
}

/* Focus ring (accessibility + premium feel) */
:focus-visible {
  outline: none;
  box-shadow: var(--vai-shadow-glow);
  border-radius: var(--vai-r-6);
}