/* ═══════════════════════════════════════
   RESET & ROOT — LIGHT PROFESSIONAL
═══════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --primary: #6c4ef6;        /* slightly softer than #4936e8 */
  --primary-dark: #4936e8;
  --primary-light: #ede8ff;
  --primary-mid: #8b6ff8;
  --coral: #ff6b8a;
  --coral-light: #fff0f3;
  --teal: #0ba5a0;
  --teal-light: #e6f8f8;
  --amber: #f59e0b;
  --amber-light: #fef9ec;
  --green: #16a34a;
  --green-light: #ecfdf5;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --orange: #ea580c;
  --orange-light: #fff7ed;

  /* Secondary accents — Sprint 0.6 (child-friendly playful palette) */
  --sunshine: #ffc547;       /* warm cheerful yellow */
  --sunshine-light: #fff5d6;
  --mint: #4dd4b9;           /* calming mint */
  --mint-light: #defaf2;
  --sky: #6cc1f3;            /* friendly sky-blue */
  --sky-light: #e3f2fd;
  --pink: #ffb3d3;           /* candy pink */
  --pink-light: #ffe9f3;

  --bg: #f4f5fb;
  --surface: #ffffff;
  --surface2: #f5f3fc;
  --border: #d8daec;
  --border-strong: #b8bbda;

  /* Warmer text — dark purple instead of near-black (kinder for kids) */
  --text: #1f1547;
  --text-mid: #3d2f73;
  --text-soft: #6f659a;

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-card: 0 2px 10px rgba(73, 54, 232, 0.1), 0 0 0 1.5px var(--border);

  --nav-h: 90px;
  --top-h: 12px;
  --glass: rgba(255,255,255,0.65);
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  /* Baloo 2 for English display, Noto Sans Hebrew for Hebrew, Nunito as fallback */
  font-family: "Baloo 2", "Noto Sans Hebrew", "Nunito", sans-serif;
  font-weight: 600;
  background: linear-gradient(
    135deg,
    #ede4ff 0%,
    #fff2e0 50%,
    #e0f5ff 100%
  );
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 40% at 8% -8%,  rgba(139, 111, 248, .16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 92%  8%,  rgba(251, 146,  60, .13) 0%, transparent 55%),
    radial-gradient(ellipse 45% 28% at 50% 105%, rgba( 56, 189, 248, .13) 0%, transparent 55%),
    radial-gradient(ellipse 40% 25% at 20%  80%, rgba(236,  72, 153, .11) 0%, transparent 55%);
}

.app {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}