/* ═══════════════════════════════════════════════════════════════
   LF Academy v8.1 — Kids/Student Design Tokens
   2026-06-05 · Warm · Playful · Human · Claymorphism
   Fonts: Baloo 2 (headings) + Comic Neue (body) for kids
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Comic+Neue:wght@300;400;700&family=Noto+Sans+HK:wght@400;500;700&family=Noto+Serif+HK:wght@600;700;900&display=swap');

:root {
  /* ═══ Warm Kids Palette ═══ */
  --blue-warm: #2D5AA0;
  --blue-light: #5B8CDE;
  --blue-soft: #E8F0FE;
  --blue-bg: #F0F5FF;

  --coral: #FF6B6B;
  --coral-light: #FFF0F0;
  --sunshine: #FFB347;
  --sunshine-light: #FFF8EE;
  --mint: #4ECDC4;
  --mint-light: #EDFFFD;
  --leaf: #7BC67E;
  --leaf-light: #F0FFF1;

  /* ═══ Neutrals ═══ */
  --warm-white: #FFFAF5;
  --warm-gray: #F5F0EB;
  --cream: #FFF8F0;
  --charcoal: #3D3D3D;
  --text-soft: #6B6B6B;

  /* ═══ Typography ═══ */
  --font-kids: 'Baloo 2', 'Noto Sans HK', cursive, sans-serif;
  --font-body: 'Comic Neue', 'Noto Sans HK', sans-serif;
  --font-serif: 'Noto Serif HK', serif;

  /* ═══ Shapes ═══ */
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  /* ═══ Shadows (softer, warmer) ═══ */
  --shadow-card: 0 4px 16px rgba(45,90,160,0.06);
  --shadow-hover: 0 8px 28px rgba(45,90,160,0.10);
}

/* ═══ Reset (warm base) ═══ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--warm-white);color:var(--charcoal);line-height:1.7;-webkit-font-smoothing:antialiased}

/* ═══ Kids Typography ═══ */
h1,h2,h3{font-family:var(--font-kids);font-weight:700;letter-spacing:-0.01em}
h1{font-size:clamp(24px,5vw,40px);line-height:1.2}
h2{font-size:clamp(18px,3.5vw,28px)}
h3{font-size:1.1em}

/* ═══ Buttons (friendly, rounded) ═══ */
.kids-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;border-radius:var(--radius-full);font-family:var(--font-kids);font-weight:600;font-size:0.95em;cursor:pointer;border:none;transition:all 0.2s ease;text-decoration:none}
.kids-btn:hover{transform:translateY(-2px)}
.kids-btn:active{transform:translateY(0)}

.kids-btn-primary{background:var(--blue-warm);color:white;box-shadow:0 4px 14px rgba(45,90,160,0.25)}
.kids-btn-primary:hover{background:var(--blue-light);box-shadow:0 6px 20px rgba(45,90,160,0.35)}

.kids-btn-sunshine{background:var(--sunshine);color:#5C3D00;box-shadow:0 4px 14px rgba(255,179,71,0.3)}
.kids-btn-sunshine:hover{background:#FFC06A}

.kids-btn-coral{background:var(--coral);color:white;box-shadow:0 4px 14px rgba(255,107,107,0.25)}

.kids-btn-mint{background:var(--mint);color:#004D47}

.kids-btn-outline{background:white;color:var(--blue-warm);border:2px solid var(--blue-warm)}
.kids-btn-outline:hover{background:var(--blue-soft)}

/* ═══ Cards (claymorphism) ═══ */
.kids-card{background:white;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);border:1px solid rgba(45,90,160,0.06);transition:all 0.2s}
.kids-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}

/* ═══ Hero (warm gradient) ═══ */
.kids-hero{background:linear-gradient(160deg,#E8F0FE 0%,#FFF8EE 50%,#FFF0F0 100%);border-radius:var(--radius-xl);padding:36px 28px;text-align:center;position:relative;overflow:hidden}
.kids-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:250px;height:250px;background:radial-gradient(circle,rgba(255,179,71,0.15),transparent 70%);border-radius:50%}
.kids-hero::after{content:'';position:absolute;bottom:-20%;left:-10%;width:200px;height:200px;background:radial-gradient(circle,rgba(78,205,196,0.12),transparent 70%);border-radius:50%}

/* ═══ Stat Pills ═══ */
.kids-stat{display:inline-flex;flex-direction:column;align-items:center;padding:14px 22px;background:white;border-radius:var(--radius);box-shadow:var(--shadow-card);min-width:80px}
.kids-stat .val{font-family:var(--font-kids);font-size:1.6em;font-weight:800;line-height:1.1}
.kids-stat .lbl{font-size:0.7em;color:var(--text-soft);margin-top:2px}
.kids-stat.blue .val{color:var(--blue-warm)}
.kids-stat.sunshine .val{color:var(--sunshine)}
.kids-stat.coral .val{color:var(--coral)}
.kids-stat.mint .val{color:var(--mint)}

/* ═══ Alert/Notification ═══ */
.kids-alert{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--radius);font-size:0.88em}
.kids-alert.sunshine{background:var(--sunshine-light);border:1px solid rgba(255,179,71,0.3);color:#5C3D00}
.kids-alert.coral{background:var(--coral-light);border:1px solid rgba(255,107,107,0.2);color:#A33030}
.kids-alert.mint{background:var(--mint-light);border:1px solid rgba(78,205,196,0.2);color:#004D47}

/* ═══ Progress bar ═══ */
.kids-progress{height:10px;background:#E8E8E8;border-radius:5px;overflow:hidden}
.kids-progress-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--sunshine),#FFC06A);transition:width 0.6s ease}

/* ═══ Tag/Chip ═══ */
.kids-chip{display:inline-block;padding:4px 14px;border-radius:var(--radius-full);font-size:0.72em;font-weight:600}
.kids-chip.blue{background:var(--blue-soft);color:var(--blue-warm)}
.kids-chip.coral{background:var(--coral-light);color:var(--coral)}
.kids-chip.mint{background:var(--mint-light);color:var(--mint)}
.kids-chip.sunshine{background:var(--sunshine-light);color:#B87800}

/* ═══ Animations ═══ */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pop{0%{transform:scale(0.9);opacity:0}70%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

.animate-float{animation:float 3s ease-in-out infinite}
.animate-pop{animation:pop 0.4s ease-out}
.animate-wiggle:hover{animation:wiggle 0.5s ease-in-out}

/* ═══ Accessibility ═══ */
:focus-visible{outline:3px solid var(--sunshine);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   LF Kids v8.2 — Design System Enhancements
   2026-06-15 · Dark Mode · Enhanced UX · a11y
   ═══════════════════════════════════════════════════════════════ */

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
  :root {
    --blue-warm: #5B8CDE;
    --blue-soft: #1E3A5F;
    --warm-white: #0F172A;
    --warm-gray: #1E293B;
    --cream: #1A1F2E;
    --charcoal: #E2E8F0;
    --text-soft: #94A3B8;
    --shadow-card: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-hover: 0 8px 28px rgba(0,0,0,0.5);
  }
  body { background: var(--warm-white); color: var(--charcoal); }
  .kids-card { background: #1E293B; border-color: #334155; }
  .kids-hero { background: linear-gradient(160deg,#0F172A,#1E293B,#1A1F2E); }
  .kids-stat { background: #1E293B; }
  .kids-alert.sunshine { background: rgba(255,179,71,0.08); }
  .kids-alert.coral { background: rgba(255,107,107,0.08); }
  .kids-alert.mint { background: rgba(78,205,196,0.08); }
  .kids-chip.blue { background: rgba(45,90,160,0.2); }
  .kids-chip.coral { background: rgba(255,107,107,0.2); }
  .kids-chip.mint { background: rgba(78,205,196,0.2); }
  .kids-chip.sunshine { background: rgba(255,179,71,0.2); }
  input, select, textarea { background: #0F172A; color: #E2E8F0; border-color: #334155; }
}

/* === Smooth Scrollbar === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(45,90,160,0.2); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,90,160,0.4); background-clip: content-box; }

/* === Print Styles === */
@media print {
  body { background: white !important; color: black !important; }
  .no-print, nav, footer, .lf-mobile-nav { display: none !important; }
  a { color: #2D5AA0 !important; text-decoration: underline !important; }
}

/* === Focus States (WCAG 2.4.7) === */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid #2D5AA0 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* === Skip Link (WCAG 2.4.1) === */
.skip-link { position: absolute; top: -100px; left: 0; background: #1E3F73; color: white; padding: 8px 16px; z-index: 10000; font-weight: 700; }
.skip-link:focus { top: 0; }

/* === Reduced Motion (WCAG 2.3.3) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Empty State === */
.lf-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; color: var(--text-soft);
}
.lf-empty-icon { font-size: 3em; margin-bottom: 12px; opacity: 0.5; }
.lf-empty-title { font-weight: 600; margin-bottom: 4px; color: var(--charcoal); }
.lf-empty-desc { font-size: 0.85em; max-width: 300px; }

/* === Enhanced Card Containment === */
.card, .lesson-card, .feature-card, .kids-card { contain: layout style paint; }