/* ============================================================================
   CoachLingua — Shared Design System (Gate 5A)
   ----------------------------------------------------------------------------
   ONE source of truth for palette, type, radius, elevation, and motion across
   /app, /play, /parent, /club. Football-native + language-learning-native +
   premium family/club trust. Not generic SaaS. Not emoji-only.

   USAGE
     <link rel="stylesheet" href="../shared/design-system.css">   (per route)
   Then map any legacy route tokens to these primitives, e.g.:
     :root { --cl-primary: var(--cl-green); --kz-accent: var(--cl-gold); }

   NOTE (Gate 5A): This file only DEFINES tokens + primitives. It does not
   restyle any route yet (that's 5B/5C). Importing it is a harmless,
   non-breaking reference. Storage contracts are untouched.
   ========================================================================== */

:root {
  /* ---- BRAND PALETTE --------------------------------------------------- */
  /* Pitch green = growth / sport. Gold = reward / kids. Sky = trust / data. */
  --cl-green:        hsl(145, 72%, 45%);   /* primary — pitch green          */
  --cl-green-light:  hsl(145, 70%, 58%);
  --cl-green-dark:   hsl(145, 74%, 32%);
  --cl-green-soft:   hsla(145, 72%, 45%, 0.14);

  --cl-orange:       hsl(25, 95%, 56%);    /* accent — energy / warmth       */
  --cl-orange-light: hsl(25, 95%, 66%);
  --cl-orange-soft:  hsla(25, 95%, 56%, 0.14);

  --cl-gold:         hsl(45, 100%, 56%);   /* reward — XP, streaks, badges   */
  --cl-gold-soft:    hsla(45, 100%, 56%, 0.16);

  --cl-sky:          hsl(205, 100%, 65%);  /* info / data (parent + club)    */
  --cl-violet:       hsl(255, 90%, 68%);   /* kid-zone secondary / accent    */

  /* ---- SEMANTIC -------------------------------------------------------- */
  --cl-success:      var(--cl-green);
  --cl-warning:      var(--cl-gold);
  --cl-danger:       hsl(0, 80%, 62%);
  --cl-info:         var(--cl-sky);

  /* ---- SURFACES (dark, shared base) ------------------------------------ */
  --cl-bg:           hsl(222, 24%, 7%);
  --cl-bg-2:         hsl(222, 22%, 9%);
  --cl-card:         hsl(222, 20%, 11%);
  --cl-card-2:       hsl(222, 19%, 14%);
  --cl-elevated:     hsl(222, 18%, 17%);
  --cl-line:         hsla(0, 0%, 100%, 0.09);
  --cl-line-strong:  hsla(145, 72%, 45%, 0.34);
  --cl-glass:        hsla(0, 0%, 100%, 0.04);

  /* Kid Zone keeps a warmer, playful surface ramp (mapped, not invented).  */
  --cl-kid-bg:       hsl(258, 44%, 13%);
  --cl-kid-bg-2:     hsl(258, 42%, 18%);
  --cl-kid-card:     hsl(258, 40%, 22%);

  /* ---- TEXT ------------------------------------------------------------ */
  --cl-text:         hsl(0, 0%, 96%);
  --cl-text-muted:   hsl(0, 0%, 64%);
  --cl-text-subtle:  hsl(0, 0%, 42%);
  --cl-on-brand:     hsl(222, 24%, 7%);    /* text on green/gold fills       */

  /* ---- TYPOGRAPHY ------------------------------------------------------ */
  /* Strategy: ONE display + body family (Inter) app-wide for trust/clarity. */
  /* Kid Zone is allowed ONE playful display face (Nunito) for headings only.*/
  --cl-font:         "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --cl-font-display: "Inter", "SF Pro Display", system-ui, sans-serif;
  --cl-font-kid:     "Nunito", "Inter", system-ui, sans-serif;
  --cl-font-num:     "Inter", ui-monospace, system-ui, sans-serif; /* tabular */

  --cl-fw-regular: 400;  --cl-fw-medium: 500;  --cl-fw-semi: 600;
  --cl-fw-bold:    700;  --cl-fw-black:  900;

  /* Fluid type scale (mobile-first, capped). */
  --cl-fs-hero:   clamp(2.5rem, 6vw, 4.5rem);
  --cl-fs-h1:     clamp(1.75rem, 4.4vw, 2.75rem);
  --cl-fs-h2:     clamp(1.25rem, 2.6vw, 1.75rem);
  --cl-fs-h3:     clamp(1.05rem, 1.8vw, 1.25rem);
  --cl-fs-body:   clamp(0.95rem, 1.1vw, 1.0625rem);
  --cl-fs-sm:     0.875rem;
  --cl-fs-xs:     0.75rem;
  --cl-lh-tight:  1.15;
  --cl-lh-body:   1.55;

  /* ---- SPACING (4px base) --------------------------------------------- */
  --cl-s1: 4px;  --cl-s2: 8px;  --cl-s3: 12px; --cl-s4: 16px;
  --cl-s5: 24px; --cl-s6: 32px; --cl-s7: 48px; --cl-s8: 64px; --cl-s9: 96px;
  --cl-page-pad: clamp(1rem, 4vw, 2.5rem);
  --cl-container: 1200px;

  /* ---- RADIUS (one scale) --------------------------------------------- */
  --cl-r-xs:  8px;
  --cl-r-sm:  12px;
  --cl-r-md:  16px;
  --cl-r-lg:  20px;
  --cl-r-xl:  28px;
  --cl-r-pill: 999px;

  /* ---- ELEVATION (one scale) ------------------------------------------ */
  --cl-e1: 0 1px 2px hsla(222, 40%, 2%, 0.4);
  --cl-e2: 0 6px 18px hsla(222, 40%, 2%, 0.42);
  --cl-e3: 0 16px 44px hsla(222, 44%, 2%, 0.48);
  --cl-glow-green: 0 0 40px hsla(145, 72%, 45%, 0.28);
  --cl-glow-gold:  0 0 36px hsla(45, 100%, 56%, 0.30);

  /* ---- MOTION (one language) ------------------------------------------ */
  --cl-dur-fast: 160ms;
  --cl-dur-med:  300ms;
  --cl-dur-slow: 600ms;
  --cl-ease:        cubic-bezier(0.16, 1, 0.3, 1);   /* standard ease-out    */
  --cl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* reward / celebrate */
  --cl-ease-in:     cubic-bezier(0.4, 0, 1, 1);
}

/* ============================================================================
   PRIMITIVE COMPONENTS — opt-in classes, namespaced .cl-*
   Routes can adopt these incrementally in 5B/5C without collisions.
   ========================================================================== */

.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.85rem 1.4rem;
  font-family: var(--cl-font); font-weight: var(--cl-fw-bold);
  font-size: var(--cl-fs-sm); line-height: 1;
  border-radius: var(--cl-r-pill); border: 1px solid transparent;
  color: var(--cl-text); background: var(--cl-glass);
  cursor: pointer;
  transition: transform var(--cl-dur-fast) var(--cl-ease),
              box-shadow var(--cl-dur-med) var(--cl-ease),
              background var(--cl-dur-med) var(--cl-ease);
}
.cl-btn:hover  { transform: translateY(-2px); }
.cl-btn:active { transform: scale(0.97); }
.cl-btn:focus-visible { outline: 3px solid var(--cl-green); outline-offset: 3px; }

.cl-btn--primary {
  color: var(--cl-on-brand);
  background: linear-gradient(135deg, var(--cl-green), var(--cl-orange));
  box-shadow: 0 12px 30px hsla(145, 72%, 45%, 0.24);
}
.cl-btn--ghost  { background: var(--cl-glass); border-color: var(--cl-line); }
.cl-btn--gold   { color: var(--cl-on-brand); background: var(--cl-gold); box-shadow: var(--cl-glow-gold); }

.cl-card {
  background: var(--cl-card);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  padding: var(--cl-s5);
  box-shadow: var(--cl-e2);
}
.cl-card--interactive { transition: transform var(--cl-dur-med) var(--cl-ease), border-color var(--cl-dur-med); }
.cl-card--interactive:hover { transform: translateY(-3px); border-color: var(--cl-line-strong); }

.cl-input {
  width: 100%; min-height: 48px; padding: 0.75rem 1rem;
  font: inherit; color: var(--cl-text);
  background: var(--cl-bg-2); border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-md);
  transition: border-color var(--cl-dur-fast) var(--cl-ease);
}
.cl-input:focus { outline: none; border-color: var(--cl-green); }

.cl-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-bold);
  border-radius: var(--cl-r-pill); background: var(--cl-green-soft); color: var(--cl-green-light);
}

/* Reward / celebration primitives (used heavily in 5B Kid Zone) */
.cl-pop      { animation: cl-pop var(--cl-dur-med) var(--cl-ease-spring); }
.cl-count-up { font-variant-numeric: tabular-nums; font-family: var(--cl-font-num); }

@keyframes cl-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes cl-burst {
  0%   { transform: scale(0.2); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes cl-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- ACCESSIBILITY: motion + focus, app-wide ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.cl-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0);
}