/* ========================================
   TOKEN DESAIN (DESIGN TOKENS)
   Variabel CSS Modern buat MathGameSD
   ======================================== */

:root {
  /* === SKALA JARAK (SPACING) === */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */

  /* === DURASI ANIMASI === */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  /* === FUNGSI EASING === */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* === UKURAN TARGET SENTUH === */
  --touch-target-min: 44px;
  --button-height: 48px;

  /* === URUTAN TUMPUKAN (Z-INDEX) === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;
  --z-confetti: 9999;

  /* === KELENGKUNGAN SUDUT (BORDER RADIUS) === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === BAYANGAN (SHADOWS) === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 20px rgba(0, 242, 255, 0.3);

  /* === TIPOGRAFI === */
  --font-base: 16px;
  --font-scale: 1.2;

  --font-xs: calc(var(--font-base) / var(--font-scale) / var(--font-scale));
  --font-sm: calc(var(--font-base) / var(--font-scale));
  --font-md: var(--font-base);
  --font-lg: calc(var(--font-base) * var(--font-scale));
  --font-xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale));
  --font-2xl: calc(
    var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale)
  );

  /* Jarak Baris (Line Height) */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  /* Ketebalan Font */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* === TITIK PECAH RESPONSIF (BREAKPOINTS) === */
/* Pendekatan Mobile First */
:root {
  --breakpoint-sm: 640px; /* Tablet Kecil */
  --breakpoint-md: 768px; /* Tablet */
  --breakpoint-lg: 1024px; /* Laptop */
  --breakpoint-xl: 1280px; /* Desktop */
  --breakpoint-2xl: 1536px; /* Desktop Besar */
}

/* === AKSESIBILITAS: KURANGI GERAKAN === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === KELAS UTILITAS === */

/* Transisi Halus */
.transition-all {
  transition: all var(--duration-normal) var(--ease-smooth);
}

.transition-fast {
  transition: all var(--duration-fast) var(--ease-smooth);
}

.transition-slow {
  transition: all var(--duration-slow) var(--ease-smooth);
}

/* Ramah Sentuhan */
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fokus Terlihat (Aksesibilitas) */
.focus-ring:focus-visible {
  outline: 2px solid #00f2ff;
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Anti blok (biar teks ga keblok pas main game) */
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* Petunjuk Akselerasi Hardware */
.will-animate {
  will-change: transform, opacity;
}

/* Scroll Halus */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* Potong Teks */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === KEYFRAMES ANIMASI === */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

@keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

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

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

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

/* === KELAS ANIMASI === */

.animate-fadeIn {
  animation: fadeIn var(--duration-normal) var(--ease-smooth);
}

.animate-fadeInUp {
  animation: fadeInUp var(--duration-normal) var(--ease-smooth);
}

.animate-fadeInDown {
  animation: fadeInDown var(--duration-normal) var(--ease-smooth);
}

.animate-scaleIn {
  animation: scaleIn var(--duration-normal) var(--ease-bounce);
}

.animate-bounce {
  animation: bounce 1s var(--ease-smooth) infinite;
}

.animate-pulse {
  animation: pulse 2s var(--ease-smooth) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}