/* ==========================================================================
   BOSTON STUDY HUB ACADEMY — light "study" theme
   Loaded after styles.css: overrides the dark palette and component skins.
   ========================================================================== */
:root{
  --bg:#faf8f5;
  --bg-2:#fdfbf7;
  --panel:#FFFFFF;
  --panel-2:#f7f3ed;
  --panel-3:#f3ede5;
  --line:#ebe4da;
  --line-2:#d9cfc2;
  --text:#0f172a;
  --ink:#0f172a;            /* main text colour; alias of --text, used by pathway.css and app-games.js */
  --dim:#475569;
  --dim-2:#5a6577;
  --mint:#12B886;
  --mint-2:#0EA372;
  --mint-soft:#E4F8F1;
  --amber:#D98A0B;
  --amber-soft:#FFF3DC;
  --rose:#DF4B52;
  --rose-soft:#FDECEC;
  --violet:#2c4a9a;
  --violet-soft:#e9eef9;
  --sky:#3B7DE8;
  --sky-soft:#E8F1FE;
  --brand:#c81e1e;
  --brand-2:#e52e2e;
  --brand-soft:#fbecec;
  --shadow:0 10px 30px -18px rgba(15,23,42,.35);
  --shadow-sm:0 4px 14px -10px rgba(15,23,42,.4);
}

body{
  background:var(--bg);
  color:var(--text);
}
body::before{
  background:
    radial-gradient(900px 600px at 88% -10%, rgba(19,35,74,.18), transparent 62%),
    radial-gradient(700px 520px at 2% 4%, rgba(94,234,212,.12), transparent 60%),
    radial-gradient(700px 700px at 65% 110%, rgba(255,196,141,.14), transparent 60%);
}
body::after{opacity:.18}

::selection{background:#fbd5d5;color:var(--text)}

/* ---------------- sidebar ---------------- */
.sidebar{
  background:rgba(255,255,255,.86);
  border-right:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.brand-txt b{color:var(--text);font-size:19px}
.brand-txt span{color:var(--dim-2)}
.mark{color:var(--brand);filter:drop-shadow(0 4px 10px rgba(200,30,30,.25))}
.nav a{color:var(--dim)}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav a.active .ico{color:var(--brand)}
.nav a.active::before{background:var(--brand)}
.nav-label{color:var(--dim-2)}
.nav-count{color:var(--dim-2);border-color:var(--line)}
.nav a.active .nav-count{color:var(--brand);border-color:#efc6c2;background:#fff}

.target-card{
  background:linear-gradient(150deg,#fbf3ef,#fdfbf7);
  border-color:#ece2d8;
}
.target-card .tc-band{color:var(--brand)}
.target-card .tc-bar{background:#efe6dc}
.target-card .tc-bar i{background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.acct{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm)}
.acct-ava{background:var(--brand-soft);color:var(--brand)}
.acct-out:hover{background:var(--rose-soft)}

/* ---------------- topbar ---------------- */
.topbar{background:rgba(255,255,255,.78);border-bottom:1px solid var(--line)}
.crumbs{color:var(--dim-2)}
.crumbs b{color:var(--text)}
.streak{background:#fff;border-color:var(--line);color:var(--dim)}
.hamburger{border-color:var(--line);background:#fff}
.foot{color:var(--dim-2);border-top-color:var(--line)}

/* ---------------- typography & primitives ---------------- */
.eyebrow{color:var(--brand)}
.view-head h1{color:var(--text)}
.view-head h1 em{color:var(--brand)}
.view-head p{color:var(--dim)}
h1,h2,h3,h4{color:var(--text)}
.lead{color:#334155;border-left-color:var(--brand)}

.card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card.flat{background:var(--panel-2);box-shadow:none}
.card.tight{box-shadow:var(--shadow-sm)}
.hoverable:hover{border-color:#e6cfc9;box-shadow:0 16px 36px -22px rgba(15,23,42,.45)}

.btn{
  background:#fff;border-color:var(--line-2);color:var(--text);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.btn:hover{background:var(--panel-2);border-color:#d9cdbf}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;border-color:transparent;
  box-shadow:0 8px 18px -10px rgba(200,30,30,.8);
}
.btn-primary:hover{filter:brightness(1.05);background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.btn-amber{background:linear-gradient(135deg,#F6B94A,#E8A020);color:#3A2600;border-color:transparent}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn.danger{color:var(--rose);border-color:#F6CDCF}

.pill{background:var(--panel-2);border-color:var(--line);color:var(--dim)}
.pill.mint{color:#0B8A63;background:var(--mint-soft);border-color:#C9EEDF}
.pill.amber{color:#9A6206;background:var(--amber-soft);border-color:#F6E1B7}
.pill.rose{color:#B03339;background:var(--rose-soft);border-color:#F7CBCD}
.pill.violet{color:#2c4a9a;background:var(--violet-soft);border-color:#c8d3ee}
.pill.sky{color:#245FAE;background:var(--sky-soft);border-color:#CFE1FB}
.pill.dim{color:var(--dim-2);background:#fff}

.prog{background:#efe8de}
.prog i{background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.prog.amber i{background:linear-gradient(90deg,#F6C05A,#E8A020)}

.note{background:linear-gradient(90deg,#fbf1ee,transparent);border-left-color:var(--brand);color:#334155}
.note.amber{background:linear-gradient(90deg,#FFF5E3,transparent);border-left-color:var(--amber)}
.note.rose{background:linear-gradient(90deg,#FDECEC,transparent);border-left-color:var(--rose)}

.empty{background:#fff;border-color:var(--line-2);color:var(--dim)}
.kbd{background:var(--panel-2);border-color:var(--line)}

/* ---------------- hero / dashboard ---------------- */
.hero{
  background:
    radial-gradient(560px 300px at 90% -20%, rgba(229,46,46,.45), transparent 60%),
    radial-gradient(520px 280px at 8% 120%, rgba(255,205,150,.45), transparent 60%),
    linear-gradient(150deg,#f8ece8 0%,#F8F5FF 55%,#FFF7F0 100%);
  border-color:#ece2d8;
  box-shadow:0 20px 50px -34px rgba(15,23,42,.6);
}
.hero::after{border-color:rgba(200,30,30,.18)}
.hero h1{color:var(--text)}
.hero h1 em{color:var(--brand)}
.hero .h-sub{color:#3f4a5c}
.hero-band b{color:var(--brand)}
.hero-band span{color:var(--dim-2)}
.hero .h-eyebrow{color:var(--brand)}

.skill-panel{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm)}
.skill-panel .lbl{color:var(--text)}
.skill-panel .delta{color:var(--dim-2)}
.stat b{color:var(--text)}
.stat span{color:var(--dim-2)}

.week,.lesson-row,.qcard{background:#fff;border-color:var(--line)}
.lesson-row:hover{background:var(--panel-2);border-color:#e8d6d0}
.week.open{border-color:#e6cfc9}
.week-num{background:var(--panel-2);border-color:var(--line);color:var(--dim)}
.week.done .week-num{background:var(--brand-soft);border-color:#efc6c2;color:var(--brand)}
.session{border-bottom-color:#f1ebe3}
.session .stype{background:var(--panel-2);color:var(--dim)}

/* ---------------- pathway ---------------- */
.path-hero{
  background:
    radial-gradient(520px 280px at 92% -10%, rgba(19,35,74,.35), transparent 60%),
    linear-gradient(150deg,#F1ECFF,#FFFFFF 60%,#FFF8F1);
  border-color:#ece2d8;
  box-shadow:0 18px 44px -30px rgba(15,23,42,.55);
}
.path-hero h2{color:var(--text)}
.path-hero p{color:#3f4a5c}
.path-stat b{color:var(--text)}
.path-stat small{color:var(--dim-2)}
.term-badge.mint{color:#0B8A63;background:var(--mint-soft);border-color:#C9EEDF}
.term-badge.amber{color:#9A6206;background:var(--amber-soft);border-color:#F6E1B7}
.term-badge.violet{color:#2c4a9a;background:var(--violet-soft);border-color:#c8d3ee}
.term-head h3{color:var(--text)}
.term-prog{color:var(--dim)}

.unit-card{
  background:#fff;border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.unit-card:hover{border-color:#e6cfc9;box-shadow:0 14px 30px -20px rgba(15,23,42,.45)}
.unit-card.open{border-color:#e2b9b4;box-shadow:0 0 0 2px #fbecec, var(--shadow-sm)}
.unit-card.done{border-color:#C9EEDF}
.unit-card.done::after{background:linear-gradient(160deg,rgba(18,184,134,.07),transparent 55%)}
.unit-card.locked{opacity:.72}
.unit-card b{color:var(--text)}
.uc-sub{color:var(--dim)}
.uc-type{color:var(--dim-2)}
.uc-n{color:var(--dim-2)}
.unit-card.done .uc-n{color:#0B8A63}
.uc-mark{color:#0B8A63}
.uc-mark.open{color:var(--brand)}

/* ---------------- unit player ---------------- */
.unit-tabs{border-bottom-color:var(--line)}
.unit-tabs button{color:var(--dim)}
.unit-tabs button.on{color:var(--brand);border-color:var(--brand)}
.unit-obj{color:#334155}
.theory-block{border-bottom-color:#f1ebe3}
.theory-n{color:var(--brand)}
.theory-block h3{color:var(--text)}
.theory-block p{color:#3b4558}
.tip-list li{color:#3b4558}
.grammar-rule{background:var(--brand-soft);border-left-color:var(--brand);color:#1e293b}
.ex-row{border-color:var(--line)}
.ex-bad{background:#FDF0F0;color:#8E3035}
.ex-good{background:#E9F8F2;color:#0B6B4E}
.ex-why{background:var(--panel-2);border-top-color:var(--line);color:var(--dim)}
.v-row{border-bottom-color:#f1ebe3}
.v-def{color:#3b4558}
.v-col{color:var(--dim)}
.v-ex{color:var(--dim-2)}
.id-row{border-bottom-color:#f1ebe3}
.id-row span{color:#3b4558}
.id-row em{color:var(--dim-2)}
.task-box{background:#FFF6E6;border-left-color:var(--amber);color:#4A3A22}
.check-list li{color:#3b4558}
.speak-list{color:#3b4558}
.phrase-chip{background:var(--violet-soft);border-color:#c8d3ee;color:#2c4a9a}
.quiz-result.pass{background:#EAF9F3;border-color:#C4EBDD}
.quiz-result.fail{background:#FFF6E3;border-color:#F5E0B5}
.qr-score{color:#0B8A63}

/* ---------------- content surfaces ---------------- */
.prose p,.prose li,.prose td{color:#334155}
.prose h3{color:var(--text)}
.prose h4{color:var(--brand)}
.prose th{background:var(--panel-2);color:var(--dim);border-color:var(--line)}
.prose th,.prose td{border-color:var(--line)}
.prose tr:nth-child(even) td{background:#fdfbf7}
.err-list li{color:#334155;border-bottom-color:#f1ebe3}
.step h4{color:var(--text)}
.step p{color:#334155}
.quote{color:#1e293b;border-left-color:var(--brand)}
.mini{color:var(--dim-2)}

.passage{background:#fffdf9;border-color:var(--line);color:#332C4A}
.editor,.gap-input,.input,select.input,textarea.input{
  background:#fff;border-color:var(--line-2);color:var(--text);
}
.editor:focus,.gap-input:focus,.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(200,30,30,.12)}
.opt{background:#fff;border-color:var(--line)}
.opt:hover{background:var(--panel-2);border-color:#e6cfc9}
.opt.sel{background:var(--brand-soft);border-color:#e0aaa5}
.opt.correct{background:#E9F8F2;border-color:#9FDCC6}
.opt.wrong{background:#FDEDED;border-color:#F3BFC2}
.explain{background:var(--sky-soft);border-left-color:var(--sky);color:#33415C}
.explain b{color:#0B8A63}

.timerbar{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm)}
.timer{color:var(--brand)}
.timer.warn{color:var(--amber)}
.timer.danger{color:var(--rose)}

.seg{border-color:var(--line-2);background:#fff}
.seg button{color:var(--dim);border-right-color:var(--line)}
.seg button.on{background:var(--brand-soft);color:var(--brand)}

.tbl th{color:var(--dim-2);border-bottom-color:var(--line)}
.tbl td{color:#334155;border-bottom-color:#f2ede6}
.tbl tr:hover td{background:var(--panel-2)}

.scoreband{background:linear-gradient(135deg,#fbf1ee,#fdfbf7);border-color:#e6d9cc}
.scoreband b{color:var(--brand)}

.cuecard{background:linear-gradient(160deg,#fbf3ef,#FFFFFF);border-color:#ece2d8}
.cuecard::before{background:radial-gradient(400px 200px at 100% 0,rgba(19,35,74,.28),transparent 60%)}
.cuecard h3{color:var(--text)}
.cuecard ul{color:#3b4558}
.cuecard .cc-tag{color:var(--brand)}

/* ---------------- modal / toast / auth ---------------- */
.modal{background:rgba(15,23,42,.36);backdrop-filter:blur(6px)}
.modal-card{background:#fff;border-color:var(--line);box-shadow:0 30px 80px -40px rgba(15,23,42,.5)}
.modal-card h2{color:var(--text)}
.modal-card .m-sub{color:var(--dim)}
.toast{background:#0f172a;border-color:#1e293b;color:#f8fafc}

.auth-screen{background:var(--bg)}
.auth-brand{
  background:
    radial-gradient(700px 420px at 90% -10%, rgba(19,35,74,.55), transparent 60%),
    radial-gradient(560px 360px at 0% 110%, rgba(255,205,150,.45), transparent 60%),
    linear-gradient(160deg,#EDE7FF,#F9F6FF 70%);
  border-right:1px solid var(--line);
}
.auth-brand::after{border-color:rgba(200,30,30,.2)}
.auth-brand h1{color:var(--text)}
.auth-brand h1 em{color:var(--brand)}
.auth-brand p{color:#3f4a5c}
.ab-name{color:var(--text)}
.ab-sub{color:var(--dim-2)}
.ab-list li{color:#3f4a5c}
.ab-list b{color:var(--text)}
.ab-list li::before{color:#0B8A63}
.ab-foot{color:var(--dim-2);border-top-color:var(--line)}
.auth-card{background:#fff;border-color:var(--line);box-shadow:0 30px 70px -40px rgba(15,23,42,.45)}
.auth-note{color:var(--dim-2)}
.auth-small{color:var(--dim-2)}
.auth-error{background:var(--rose-soft);border-color:#F3C2C5;color:#8E3035}
.auth-offline{color:var(--dim)}
.auth-offline:hover{color:var(--brand)}

/* ---------------- misc ---------------- */
.hr{background:var(--line)}
.foot{border-top-color:var(--line)}
.brand-txt span{color:var(--dim-2)}
.split .card{background:#fff}
.checkline{color:#334155}
.legend{color:var(--dim)}
.mini{color:var(--dim-2)}

@media print{
  body{background:#fff}
  .card{box-shadow:none;border-color:#ddd}
}