/* ============================================================
   FFXIV SITE — SHARED DESIGN TOKENS
   All pages in the ffxiv/ subfolder link to this file.
   Page-specific component styles stay in each HTML file.
   ============================================================ */

:root {
  /* Brand colours */
  --brand-gold:      #c9a84c;
  --brand-teal:      #4dd9c0;
  --brand-teal-dim:  #2a8a78;

  /* Dark surface scale */
  --surface-0: #08090d;
  --surface-1: #0e1018;
  --surface-2: #141720;
  --surface-3: #1c2030;
  --surface-4: #222840;

  /* Borders */
  --border-base: #2a3050;
  --border-glow: #3a4870;

  /* Text */
  --text-bright: #e8f0ff;
  --text-base:   #c8d4e8;
  --text-muted:  #7a8aaa;

  /* Expansion accent colours */
  --exp-arr: #e07840;
  --exp-hw:  #60a8e0;
  --exp-sb:  #e05060;
  --exp-shb: #a070e0;
  --exp-ew:  #50c878;
  --exp-dt:  #e8c040;

  /* Font stacks (pages load the actual Google Fonts they need) */
  --font-display: 'Cinzel', serif;
  --font-mono:    'Share Tech Mono', monospace;
  --font-body:    'Exo 2', sans-serif;
  --font-sans:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

/* Shared scrollbar */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--surface-0); }
::-webkit-scrollbar-thumb  { background: var(--border-glow); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-base); }

/* Shared base page styles */
body {
  background:
    radial-gradient(ellipse at 20% 30%, #0d1a2e, transparent 60%),
    radial-gradient(ellipse at 80% 70%, #0a1428, transparent 55%),
    var(--surface-0);
  color: var(--text-base);
  font-family: var(--font-body);
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--brand-gold);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Shared Site Nav (.site-nav) ─────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(8,9,13,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-base);
  padding: 0 1.75rem;
  display: flex; align-items: center; gap: 1.5rem;
  height: 54px;
}
.site-nav::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-teal-dim), transparent);
}
.site-nav-brand {
  font-family: var(--font-display); font-size: .95rem;
  color: var(--brand-teal); text-decoration: none;
  letter-spacing: .08em; white-space: nowrap; flex-shrink: 0;
}
.site-nav-brand span { color: var(--text-muted); font-size: .72em; }
.site-nav-links { display: flex; gap: 1.25rem; flex: 1; }
.site-nav-links a {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--text-muted); text-decoration: none;
  letter-spacing: .12em; text-transform: uppercase; transition: color .2s;
}
.site-nav-links a:hover { color: var(--brand-teal); text-decoration: none; }
.site-nav-links a.nav-current { color: var(--brand-gold); }
.site-nav-badge {
  font-family: var(--font-mono); font-size: .62rem;
  color: var(--brand-teal); border: 1px solid var(--brand-teal-dim);
  padding: 2px 8px; letter-spacing: .12em; flex-shrink: 0;
  animation: site-nav-pulse 3s ease-in-out infinite;
}
@keyframes site-nav-pulse {
  0%,100% { border-color: var(--brand-teal-dim); }
  50%      { border-color: var(--brand-teal); box-shadow: 0 0 8px rgba(77,217,192,.15); }
}
@media (max-width: 700px) {
  .site-nav { padding: 0 .85rem; gap: .75rem; }
  .site-nav-links { display: none; }
}