/**
 * GoldenOT — Foundation (Prompt 1)
 * Tokens + fonts + globals + utility classes only.
 * Shell/nav/widgets come in later prompts.
 */

/* tokens.css e hero.css agora são <link> versionados no layout.php
   (o @import sem ?vs= fazia o navegador usar cache velho para sempre) */

/* Spectral (local) + Alegreya SC (Google) */
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: spectral;
  src: url("../fonts/spectral.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--text);
  background-color: var(--bg-page);
  border-radius: var(--radius);
}

a {
  color: var(--text-link);
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

/* Game assets: never clip animated outfits / monsters / item GIFs */
img.Outfit,
img.outfitImgsell2,
img.CharItems,
img.SkillIcon,
.outfitImgsell2,
.CharItems,
img[src*="animoutfit.php"],
img[src*="AnimatedOutfits"],
img[src*="/outfits/"] {
  max-width: none;
  image-rendering: auto;
}

/* ---------------------------------------------------------------------------
   Utility classes (GoldenOT parity names)
--------------------------------------------------------------------------- */
.font_yellow {
  color: var(--accent-yellow) !important;
}

.font_lightgreen {
  color: var(--accent-green) !important;
}

.font_red {
  color: var(--accent-red) !important;
}

.font_green {
  color: green;
}

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

.menu-category,
#menu-category {
  height: var(--menu-category-height);
  width: 100%;
  color: var(--heading-sand);
  border: 1px solid var(--border);
  background-color: var(--bg-panel);
  background-image: var(--chrome-header-bg, linear-gradient(180deg, #1a2838 0%, #0c1520 100%));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

.menu-category .menu-text,
#menu-category .menu-text {
  font-family: var(--font-display);
  font-size: var(--font-size-menu-cat);
  font-weight: 700;
  padding: 8px 20px;
  text-align: left;
  line-height: 1.4;
}

.content-bg {
  background-color: var(--bg-panel);
  border: 1px solid var(--border) !important;
  margin-bottom: 8px;
  width: 100%;
  padding: 16px 0;
  border-radius: var(--radius);
}

.navbar-bg {
  background-color: var(--bg-panel);
  background-image: var(--chrome-header-bg, linear-gradient(180deg, #1a2838 0%, #0c1520 100%));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  height: var(--navbar-height);
  border: 1px solid var(--border) !important;
  margin-bottom: 20px;
  border-radius: var(--radius);
}

.bold {
  font-weight: 700;
}

/* News title / countdown gold (used from Prompt 4) */
.news-topic,
.font-countdown-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
}

.font-countdown {
  font-family: var(--font-countdown);
}

/* CTA banners (used from Prompt 4) */
.cta-banner,
.alert-success.cta-banner {
  background-color: var(--cta-green-bg);
  color: var(--cta-green-text);
  border: 1px solid var(--cta-green-bg);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  text-align: center;
  font-family: var(--font-body);
}

.cta-banner h2,
.cta-banner .cta-title {
  margin: 0;
  font-size: var(--font-size-cta);
  font-weight: 700;
  color: var(--cta-green-text);
  line-height: 1.2;
}

/* Inputs (right sidebar login — Prompt 5) */
.go-input,
.content-bg input[type="text"],
.content-bg input[type="password"],
.content-bg input[type="email"] {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  padding: 6px 8px;
}

/* Container / hero structure moved to shell.css (Prompt 2) */