/* public/assets/css/base.css */

/* ── Google Fonts ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap');

/* ── Body ──────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--ink);
  background: var(--bg);
  line-height: var(--lh-base);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Typography Scale ──────────────────────────── */
.text-xs     { font-size: var(--text-xs);   }
.text-sm     { font-size: var(--text-sm);   }
.text-base   { font-size: var(--text-base); }
.text-md     { font-size: var(--text-md);   }
.text-lg     { font-size: var(--text-lg);   }
.text-xl     { font-size: var(--text-xl);   }
.text-2xl    { font-size: var(--text-2xl);  }

.fw-regular  { font-weight: var(--fw-regular);   }
.fw-semibold { font-weight: var(--fw-semibold);  }
.fw-bold     { font-weight: var(--fw-bold);      }
.fw-extrabold{ font-weight: var(--fw-extrabold); }

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

.text-muted   { color: var(--muted); }
.text-active  { color: var(--active); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-gold    { color: var(--gold); }
.text-center  { text-align: center; }

/* ── Core Keyframe Animations ──────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-8px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes gemFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(5deg); }
}

@keyframes streakFire {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.15); }
}

/* ── Animation Utilities ───────────────────────── */
.anim-fadeIn  { animation: fadeIn  var(--dur-base) var(--ease) both; }
.anim-fadeUp  { animation: fadeUp  var(--dur-slow) var(--ease) both; }
.anim-scaleIn { animation: scaleIn var(--dur-base) var(--ease-spring) both; }
.anim-pulse   { animation: pulse   1.5s ease-in-out infinite; }
.anim-bounce  { animation: bounce  0.8s ease infinite; }

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0ms;   }
.stagger > *:nth-child(2) { animation-delay: 50ms;  }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }

/* ── Skeleton Loading ──────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--bg-alt) 50%,
    var(--border) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

/* ── Utility Classes ───────────────────────────── */
.hidden        { display: none !important; }
.invisible     { visibility: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-xs        { gap: var(--space-xs); }
.gap-sm        { gap: var(--space-sm); }
.gap-md        { gap: var(--space-md); }
.gap-lg        { gap: var(--space-lg); }

.w-full        { width: 100%; }
.h-full        { height: 100%; }

.rounded-sm    { border-radius: var(--r-sm); }
.rounded-md    { border-radius: var(--r-md); }
.rounded-lg    { border-radius: var(--r-lg); }
.rounded-pill  { border-radius: var(--r-pill); }

.p-xs          { padding: var(--space-xs); }
.p-sm          { padding: var(--space-sm); }
.p-md          { padding: var(--space-md); }
.p-lg          { padding: var(--space-lg); }

.mt-sm         { margin-top: var(--space-sm); }
.mt-md         { margin-top: var(--space-md); }
.mt-lg         { margin-top: var(--space-lg); }
.mb-md         { margin-bottom: var(--space-md); }
.mb-lg         { margin-bottom: var(--space-lg); }

.overflow-hidden { overflow: hidden; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Safe Area (iOS notch) ─────────────────────── */
.safe-bottom   { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-top      { padding-top:    env(safe-area-inset-top, 0); }