/* ================================================================
   BASE.CSS — The Classic MU Online Season 21
   Variáveis de tema, reset, tipografia, utilitários globais
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* ── Tokens de tema ── */
:root {
  /* Fundos */
  --bg-void:      #04040a;
  --bg-abyss:     #060810;
  --bg-deep:      #0a0c14;
  --bg-base:      #0e1020;
  --bg-surface:   #141828;
  --bg-raised:    #1c2338;

  /* Ouro Ancestral */
  --gold-ember:   #3a2208;
  --gold-deep:    #6b4f10;
  --gold-mid:     #c89828;
  --gold-bright:  #e8b840;
  --gold-pale:    #f5dc80;
  --gold-white:   #fff8e8;

  /* Prata */
  --silver-dim:   #3a4560;
  --silver-mid:   #7088a8;
  --silver-base:  #90a8c8;
  --silver-bright:#b8cce0;
  --silver-white: #ddeeff;

  /* Energia Azul Mágica */
  --blue-void:    #02040e;
  --blue-deep:    #0a1428;
  --blue-mid:     #152848;
  --blue-core:    #1a3a6e;
  --blue-bright:  #2a6ad0;
  --blue-energy:  #4a9aff;
  --blue-glow:    #80c0ff;
  --blue-white:   #c0e8ff;

  /* Esmeralda Sombria */
  --emerald-void:   #010806;
  --emerald-deep:   #050f0a;
  --emerald-mid:    #0a2018;
  --emerald-forest: #0f3020;
  --emerald-bright: #1a5535;
  --emerald-glow:   #28a060;
  --emerald-light:  #50d088;

  /* Sangue Carmesim */
  --blood-void:   #0a0204;
  --blood-deep:   #180408;
  --blood-mid:    #400a10;
  --blood-bright: #841820;
  --blood-glow:   #c82030;
  --blood-fire:   #e84020;

  /* Infinito Divino */
  --inf-void:     #080510;
  --inf-deep:     #180a30;
  --inf-mid:      #301858;
  --inf-bright:   #6030a8;
  --inf-glow:     #a060e0;
  --inf-white:    #d0a0ff;

  /* Pedra Ancestral (S1) */
  --stone-dark:   #0e0c0a;
  --stone-mid:    #2a2520;
  --stone-light:  #6a6058;
  --stone-pale:   #a09088;

  /* Tipografia — MU Online S21 Game Aesthetic */
  --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Rajdhani', 'Arial', sans-serif;
  --font-lore:    'Crimson Text', 'Georgia', serif;

  /* Espaçamentos */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 2.5rem;
  --s6: 3rem;
  --s8: 4rem;
  --s10: 5rem;
  --s12: 6rem;
  --s16: 8rem;
  --s24: 12rem;

  /* Z-layers */
  --z-behind:  -10;
  --z-fx:      -2;
  --z-fog:     -1;
  --z-base:     1;
  --z-content:  10;
  --z-float:    20;
  --z-overlay:  50;
  --z-top:      100;

  /* Bordas */
  --border-dim:    rgba(100, 130, 180, 0.06);
  --border-subtle: rgba(120, 150, 200, 0.12);
  --border-mid:    rgba(140, 170, 220, 0.20);
  --border-bright: rgba(180, 210, 255, 0.35);
  --border-gold:   rgba(200, 152, 40, 0.40);
  --border-gold-bright: rgba(232, 184, 64, 0.70);

  /* Transições */
  --t-fast: 0.15s ease;
  --t-mid:  0.35s ease;
  --t-slow: 0.65s ease;
  --t-lux:  1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Raios */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
}

/* ── Reset moderno ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-void);
  color: var(--silver-bright);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

html,
body.ags-l-site,
body.id_67bf6042-d464-41fb-a139-d0e5a63213af.ags-l-site {
  background: #000 !important;
}

body.id_67bf6042-d464-41fb-a139-d0e5a63213af.ags-l-site {
  background: #000 !important;
}

.ags-l-site-header,
.ags-SiteHeader {
  background: #000 !important;
}

.ags-SiteFooter {
  background-color: #000 !important;
}

/* Scrollbar premium */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-mid), var(--blue-bright));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--blue-energy));
}

/* Seleção */
::selection {
  background: rgba(42, 106, 208, 0.5);
  color: var(--gold-pale);
}

/* ── Tipografia ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--silver-white);
}

/* Bebas Neue display — letter-spacing mais compacto */
.txt-display, [class*="__title"], .page-hero__title--line1, .page-hero__title--line2 {
  letter-spacing: 0.06em;
}

p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--silver-mid);
}

a {
  color: var(--gold-bright);
  text-decoration: none;
  transition: color var(--t-fast);
}

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

img, svg { max-width: 100%; display: block; }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s6);
}

.container--narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--s4);
}

.container--mid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s4);
}

/* ── Utilitários de texto ── */
.txt-gold        { color: var(--gold-bright); }
.txt-gold-pale   { color: var(--gold-pale); }
.txt-silver      { color: var(--silver-bright); }
.txt-blue        { color: var(--blue-energy); }
.txt-emerald     { color: var(--emerald-glow); }
.txt-blood       { color: var(--blood-glow); }
.txt-inf         { color: var(--inf-glow); }
.txt-upper       { text-transform: uppercase; letter-spacing: 0.2em; }
.txt-center      { text-align: center; }
.txt-lore        { font-family: var(--font-lore); font-size: 1.15rem; font-style: italic; }
.txt-display     { font-family: var(--font-display); }

/* ── Ocultar/mostrar ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Canvas de partículas ── */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-fx);
}

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
  :root {
    --s12: 4rem;
    --s16: 6rem;
    --s24: 8rem;
  }
  .container { padding: 0 var(--s4); }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  .container { padding: 0 var(--s3); }
  :root {
    --s12: 3rem;
    --s16: 4rem;
    --s24: 6rem;
  }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
  .container { padding: 0 var(--s2); }
}