/* ============================================================================
   TUTOR Design System v3 candidate - "CORE 3"
   Philosophy: ONLY 3 core interface colours (Indigo brand / page background /
   card surface). Bright colours appear ONLY as feedback: success, warning,
   error, info, reward. Progress and active states are INDIGO (brand), not teal.
   Calm slate neutrals. Feedback fills keep the spec hexes; text variants are
   AA-verified (raw #22C55E / #EF4444 fail as text - fills only).
   ========================================================================== */

:root{
  /* ---- LIGHT ---- */
  --canvas:#F8FAFC;         /* page background (spec)                        */
  --pad:#EEF2FF;            /* section / pad (spec)                          */
  --surface:#FFFFFF;        /* card (spec)                                   */
  --inner:#FAFBFF;          /* inner surface (spec)                          */
  --hover:#F1F4FF;          /* elevated / hover (spec)                       */
  --hair:#E2E8F0;
  --ink:#0F172A;            /* 17.9:1 on card                                */
  --ink-2:#1E293B;          /* 13.6:1 on card (spec's "13.9")                */
  --muted:#475569;          /* 7.6:1                                         */
  --faint:#64748B;

  /* CORE COLOUR 1 - Brand Indigo: buttons, links, active, progress, brand */
  --primary:#4F46E5;        /* white text 6.3:1                              */
  --primary-hover:#6366F1;  /* spec: hover is the lighter step               */
  --primary-active:#4338CA;
  --primary-disabled:#C7D2FE;
  --primary-wash:#EEF2FF;
  --primary-text:#4F46E5;
  --primary-ink:#3730A3;

  /* FEEDBACK ONLY - fills per spec; -text tokens are the AA variants */
  --ok:#22C55E;    --ok-wash:#F0FDF4;   --ok-text:#15803D;   --ok-ink:#14532D;
  --warn:#F59E0B;  --warn-wash:#FFFBEB; --warn-text:#B45309; --warn-ink:#78350F;
  --err:#EF4444;   --err-wash:#FEF2F2;  --err-text:#B91C1C;  --err-ink:#7F1D1D;
  --info:#3B82F6;  --info-wash:#EFF6FF; --info-text:#1D4ED8; --info-ink:#1E3A8A;
  --reward:#8B5CF6;--reward-wash:#F5F3FF;--reward-text:#6D28D9;--reward-ink:#4C1D95;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 2px 8px -2px rgba(79,70,229,.06);
  --shadow-md:0 2px 4px rgba(15,23,42,.05),0 10px 26px -10px rgba(79,70,229,.12);
  --shadow-lg:0 4px 8px rgba(15,23,42,.06),0 18px 44px -16px rgba(79,70,229,.16);

  --r-ctl:12px; --r:16px; --r-lg:20px; --r-pill:999px;
  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Baloo 2','Inter',sans-serif;
  --dur-fast:150ms; --dur:220ms; --ease:cubic-bezier(.2,.8,.3,1);
}

/* ---- DARK (built coherent from the spec's own #0F172A slate family) ---- */
[data-theme="dark"],[data-color-mode="dark"]{
  --canvas:#0F172A; --pad:#1B2540; --surface:#1E293B; --inner:#24334B; --hover:#2B3B57;
  --hair:#334155;
  --ink:#F1F5F9; --ink-2:#E2E8F0; --muted:#CBD5E1; --faint:#94A3B8;
  --primary:#4F46E5; --primary-hover:#6366F1; --primary-active:#4338CA;
  --primary-disabled:#31347A; --primary-wash:#26295B;
  --primary-text:#A5B4FC; --primary-ink:#C7D2FE;
  --ok:#22C55E;    --ok-wash:#12301F;   --ok-text:#4ADE80;   --ok-ink:#BBF7D0;
  --warn:#F59E0B;  --warn-wash:#33270D; --warn-text:#FCD34D; --warn-ink:#FDE68A;
  --err:#EF4444;   --err-wash:#3A1A1E;  --err-text:#F87171;  --err-ink:#FECACA;
  --info:#3B82F6;  --info-wash:#152743; --info-text:#93C5FD; --info-ink:#BFDBFE;
  --reward:#8B5CF6;--reward-wash:#2A2149;--reward-text:#C4B5FD;--reward-ink:#DDD6FE;
  --shadow-sm:0 0 0 1px rgba(148,163,184,.10);
  --shadow-md:0 0 0 1px rgba(148,163,184,.12),0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-lg:0 0 0 1px rgba(148,163,184,.14),0 22px 52px -18px rgba(0,0,0,.6);
}

/* ============================ BASE ============================ */
body.core3{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-ui);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.core3 h1,.core3 h2,.core3 h3{font-family:var(--font-display);font-weight:600;line-height:1.25;margin:0;color:var(--ink)}
.core3 h1{font-size:26px}.core3 h2{font-size:20px}.core3 h3{font-size:16px}
.core3 .lead{color:var(--muted)}
.core3 a{color:var(--primary-text)}
.core3 :focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ============================ COMPONENTS ============================ */
.k-pad{background:var(--pad);border-radius:var(--r-lg);padding:18px 20px}
.k-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast)}
.k-card.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--hover)}
.k-inner{background:var(--inner);border:1px solid var(--hair);border-radius:var(--r-ctl);padding:12px 14px}

.k-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);
  background:var(--surface);color:var(--ink);border-radius:var(--r-ctl);padding:10px 18px;
  font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;min-height:44px;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast)}
.k-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.k-btn:active{transform:scale(.97)}
.k-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.k-btn-primary:hover{background:var(--primary-hover)}
.k-btn-primary:active{background:var(--primary-active)}
.k-btn-primary:disabled{background:var(--primary-disabled);border-color:var(--primary-disabled);
  color:#fff;cursor:not-allowed;transform:none;box-shadow:none;opacity:.85}
.k-btn-ghost{background:transparent}
.k-btn-pill{border-radius:var(--r-pill)}

.k-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:4px 12px;font-size:12px;font-weight:600}
.k-badge.brand{background:var(--primary-wash);color:var(--primary-ink)}
.k-badge.ok{background:var(--ok-wash);color:var(--ok-ink)}
.k-badge.warn{background:var(--warn-wash);color:var(--warn-ink)}
.k-badge.err{background:var(--err-wash);color:var(--err-ink)}
.k-badge.info{background:var(--info-wash);color:var(--info-ink)}
.k-badge.reward{background:var(--reward-wash);color:var(--reward-ink)}

/* feedback icon dots - the spec's bright fills live HERE (icons), not in text */
.k-dot{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:14px;flex:none}
.k-dot.ok{background:var(--ok)}.k-dot.warn{background:var(--warn)}.k-dot.err{background:var(--err)}
.k-dot.info{background:var(--info)}.k-dot.reward{background:var(--reward)}

/* progress = BRAND INDIGO (core-3 rule: progress is interface, not feedback) */
.k-progress{height:10px;background:var(--pad);border-radius:var(--r-pill);overflow:hidden}
.k-progress>span{display:block;height:100%;background:var(--primary);border-radius:var(--r-pill);
  transition:width .6s var(--ease)}

.k-xp{display:inline-flex;align-items:center;gap:6px;background:var(--reward-wash);
  color:var(--reward-ink);border-radius:var(--r-pill);padding:5px 13px;font-weight:700;font-size:13px}
.k-medal{width:64px;height:64px;border-radius:50%;background:var(--reward-wash);
  border:3px solid var(--reward);display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--reward-text)}
.k-medal.locked{background:var(--inner);border-color:var(--hair);color:var(--faint);filter:grayscale(1)}

.k-hint{background:var(--info-wash);border-radius:var(--r-ctl);padding:12px 15px;
  color:var(--info-ink);font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.k-retry{background:var(--err-wash);border-radius:var(--r-ctl);padding:12px 15px;
  color:var(--err-ink);font-size:13.5px}
.k-toast{background:var(--surface);border:1px solid var(--hair);border-left:4px solid var(--ok);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0;padding:12px 16px;box-shadow:var(--shadow-md);
  display:flex;gap:10px;align-items:center;font-weight:600;font-size:13.5px}

/* ============================ AGE TIERS ============================ */
[data-tier="early"] .k-btn{min-height:64px;font-size:18px;border-radius:18px}
[data-tier="early"] .k-card{border-radius:var(--r-lg);padding:22px}
[data-tier="early"] .k-progress{height:16px}
[data-tier="early"] .hide-early{display:none!important}
[data-tier="senior"] .k-btn{min-height:40px;font-size:13.5px}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}