@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--bg-app);
  background-image:
    radial-gradient(ellipse 100% 80% at 8% -12%, rgba(129, 140, 248, 0.11), transparent 55%),
    radial-gradient(ellipse 80% 50% at 96% 2%, rgba(56, 189, 248, 0.07), transparent 50%),
    radial-gradient(ellipse 110% 70% at 50% 108%, rgba(165, 180, 252, 0.06), transparent 55%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.md-page-title,
.modal-title,
.tfs-brand-name,
.sidebar-brand-wordmark,
.tickets-header .page-title {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

body.dark,
body.theme-dark {
  background-image:
    radial-gradient(ellipse 90% 55% at 12% -8%, rgba(129, 140, 248, 0.1), transparent 52%),
    radial-gradient(ellipse 60% 40% at 98% 0%, rgba(56, 189, 248, 0.03), transparent 50%),
    radial-gradient(ellipse 100% 65% at 50% -5%, rgba(79, 70, 229, 0.07), transparent 52%);
}

@media (prefers-color-scheme: dark) {
  body.theme-system:not(.theme-light) {
    background-image:
      radial-gradient(ellipse 90% 55% at 12% -8%, rgba(129, 140, 248, 0.1), transparent 52%),
      radial-gradient(ellipse 60% 40% at 98% 0%, rgba(56, 189, 248, 0.03), transparent 50%),
      radial-gradient(ellipse 100% 65% at 50% -5%, rgba(79, 70, 229, 0.07), transparent 52%);
  }
}

/* Tema claro explícito: fundo sólido branco (sem vinhetas que escurecem a UI) */
body.theme-light:not(.dark) {
  background-image: none;
}

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

button {
  cursor: pointer;
  font-family: var(--font);
}

input,
select,
textarea {
  font-family: inherit;
}

ul {
  list-style: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}