/* ==========================================================
   HTML E BODY
========================================================== */

html {
  background: var(--color-page);
}

body {
  background: var(--color-page);

  color: var(--color-text);

  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;

  overflow-x: hidden;
}

/* ==========================================================
   CONTAINER PADRÃO
========================================================== */

.desktop-container {
  width: 100%;
  max-width: var(--desktop-container-width);

  margin: 0 auto;

  padding-left: var(--desktop-container-padding);
  padding-right: var(--desktop-container-padding);
}

/* ==========================================================
   TITULOS
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-white);

  font-weight: var(--font-weight-bold);

  line-height: 1.1;
}

h1 {
  font-size: var(--font-size-hero);

  font-family: var(--font-display);

  text-transform: uppercase;

  letter-spacing: 2px;
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

p {
  color: var(--color-text-soft);
}

/* ==========================================================
   BOTÕES
========================================================== */

.desktop-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;
  gap: 12px;

  height: 52px;

  padding: 0 28px;

  border-radius: var(--radius-medium);

  transition: var(--transition-normal);

  font-weight: var(--font-weight-semibold);

  cursor: pointer;
}

.desktop-button img {
  width: 20px;
  height: 20px;

  object-fit: contain;
}

.desktop-button:hover {
  transform: translateY(-2px);
}

/* botão dourado */

.desktop-button--gold {
  background: var(--color-gold);

  color: var(--color-black);

  box-shadow: var(--shadow-gold);
}

.desktop-button--gold:hover {
  background: var(--color-gold-light);
}

/* botão transparente */

.desktop-button--outline {
  background: rgba(0, 0, 0, 0.45);

  border: 1px solid var(--border-gold);

  color: var(--color-white);

  backdrop-filter: blur(10px);
}

.desktop-button--outline:hover {
  border-color: var(--color-gold);

  background: rgba(0, 0, 0, 0.62);
}

/* botão escuro */

.desktop-button--dark {
  background: var(--color-black);

  border: 1px solid var(--border-dark);

  color: var(--color-white);
}

.desktop-button--dark:hover {
  border-color: var(--color-gold);
}

.desktop-button--full {
  width: 100%;
}

/* ==========================================================
   CARDS ESCUROS
========================================================== */

.desktop-card {
  background: var(--color-surface);

  border: 1px solid var(--border-dark);

  border-radius: var(--radius-large);

  box-shadow: var(--shadow-medium);
}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-black);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold-dark);

  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ==========================================================
   LINKS
========================================================== */

a {
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-gold-light);
}

/* ==========================================================
   UTILITÁRIOS
========================================================== */

.hidden {
  display: none !important;
}

.text-gold {
  color: var(--color-gold);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-center {
  text-align: center;
}

.w-100 {
  width: 100%;
}