/* ============================================
   KidsLang — Design Tokens & Base
   ============================================ */

:root {
  /* الألوان الأساسية */
  --color-sun:     #FFD93D;
  --color-coral:   #FF6B6B;
  --color-mint:    #4ECDC4;
  --color-sky:     #95E1D3;
  --color-cream:   #FFF8E7;
  --color-ink:     #2D2A4A;
  --color-ink-2:   #5A557A;
  --color-success: #6BCB77;
  --color-warn:    #FF9F43;
  --color-error:   #FF6B6B;

  /* خلفيات */
  --bg-page: var(--color-cream);
  --bg-card: #FFFFFF;
  --bg-soft: #FFF3D6;

  /* النصوص */
  --text-strong: var(--color-ink);
  --text-soft:   var(--color-ink-2);
  --text-onfill: #FFFFFF;

  /* الحدود والظلال */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 6px rgba(45, 42, 74, 0.08);
  --shadow-md: 0 8px 20px rgba(45, 42, 74, 0.12);
  --shadow-lg: 0 16px 40px rgba(45, 42, 74, 0.18);
  --shadow-press: 0 4px 0 rgba(45, 42, 74, 0.15);

  /* المسافات */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* الخطوط */
  --font-en: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font-ar: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --font-base: var(--font-en);

  /* الحجوم — كبيرة عمداً للأطفال */
  --fs-xs:  14px;
  --fs-sm:  16px;
  --fs-md:  18px;
  --fs-lg:  22px;
  --fs-xl:  28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;

  /* مدد الحركة */
  --t-fast:   150ms;
  --t-normal: 250ms;
  --t-slow:   400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* أبعاد آمنة للمس */
  --tap-min: 60px;
}

/* وضع العربي */
html[lang="ar"] {
  --font-base: var(--font-ar);
}

/* ============================================
   Reset
   ============================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  font-family: var(--font-base);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-strong);
  background: var(--bg-page);
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 217, 61, 0.15), transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.15), transparent 40%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}

img, svg {
  max-width: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid var(--color-mint);
  outline-offset: 3px;
}

/* الأطفال يحبون اللمس — منع تحديد النص العشوائي */
.app * {
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================
   Boot screen
   ============================================ */

.boot-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  background: var(--bg-page);
  z-index: 9999;
  transition: opacity var(--t-slow) var(--ease-out);
}

.boot-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.boot-mascot {
  font-size: 96px;
  animation: bounce 1.2s var(--ease-bounce) infinite;
}

.boot-title {
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-coral);
  letter-spacing: 0.5px;
}

.boot-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(78, 205, 196, 0.2);
  border-top-color: var(--color-mint);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   App container
   ============================================ */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  animation: fadeUp var(--t-slow) var(--ease-out);
}

/* ============================================
   Responsive — Mobile first
   ============================================ */

@media (min-width: 768px) {
  :root {
    --fs-md: 20px;
    --fs-lg: 26px;
    --fs-xl: 32px;
    --fs-2xl: 44px;
    --fs-3xl: 60px;
  }
  .screen { padding: var(--sp-6); }
}

@media (min-width: 1200px) {
  .screen { padding: var(--sp-7); }
}

/* تابلت في الوضع الأفقي */
@media (orientation: landscape) and (max-height: 600px) {
  .screen { padding: var(--sp-4) var(--sp-5); }
}

/* الوضع المظلم - نتركه فاتح للأطفال دائماً، لكن نحترم تفضيل النظام للأهل */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}