/* ============================================================
   PRODAO WEBSITE — base.css
   ------------------------------------------------------------
   Shared foundation for index / explorer / docs / brand-story.
   (whitepaper.html deviates from these tokens on purpose and
   keeps its own self-contained styles.)

   Contents: design tokens (mirrored from the design system's
   styles.css — keep in sync), reset, shared primitives (.btn,
   .badge base, .container, .eyebrow, .mono), the shared footer,
   and the cross-page fade overlay (.pt-overlay).

   Page-specific styles live in styles/<page>.css.
   ============================================================ */

:root {
  --bg-primary: #131313;
  --bg-secondary: #1C1B19;
  --bg-elevated: #242220;
  --accent: #FE7213;
  --accent-glow: rgba(254,114,19,0.22);
  --accent-dim: rgba(254,114,19,0.10);
  --border-warm: #A08D86;
  --border-subtle: rgba(160,141,134,0.20);
  --border-accent: rgba(254,114,19,0.28);
  --text-primary: #F5F1EE;
  --text-secondary: #9B8C86;
  --text-muted: #6B5E58;
  --font-sans: 'Pretendard', system-ui, -apple-system, sans-serif;
  --font-mono: 'Pretendard', system-ui, -apple-system, sans-serif;
  --glow-accent: 0 0 32px var(--accent-glow);
  --glow-accent-sm: 0 0 16px var(--accent-glow);
  --container-max: 1200px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ---- reset ---- */
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1,h2,h3,p { margin: 0; }
.mono { font-family: var(--font-mono); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-secondary);
}

/* ---- buttons (base) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--ease-out) .24s, border-color .24s, box-shadow .24s, color .24s, transform .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.btn-primary:hover { background: #FF8534; border-color: #FF8534; box-shadow: var(--glow-accent); }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-warm); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ---- badge (base) — color variants are page-specific ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; line-height: 1;
}

/* ---- footer (shared by index / explorer) ---- */
.footer { border-top: 1px solid var(--border-subtle); padding: 64px 0 0; overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-brand .wordmark { margin-bottom: 10px; }
.footer-logo { height: 30px; width: auto; display: block; margin-bottom: 12px; }
.footer-mark { height: 44px; }
.footer-tag { color: var(--text-secondary); font-size: 15px; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { color: var(--text-secondary); font-size: 15px; font-weight: 600; transition: color .2s; }
.footer-links a:hover { color: var(--text-primary); }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-bottom .copy { color: var(--text-muted); font-size: 13px; }
.disclaimer { color: var(--text-muted); font-size: 12px; line-height: 1.6; max-width: 60ch; margin-top: 14px; }
.footer-wordmark {
  margin-top: 40px;
  font-weight: 800; letter-spacing: -0.04em; line-height: 0.74;
  font-size: clamp(96px, 24vw, 380px);
  color: var(--accent);
  text-align: center; white-space: nowrap;
  margin-bottom: -0.14em;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}

/* ---- page fade transition overlay (used with js/page-transition.js) ---- */
.pt-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--bg-primary);
  opacity: 1; transition: opacity .42s var(--ease-out);
}
.pt-overlay.pt-hide { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pt-overlay { transition: none; }
}