/* ============================================================
   LangFlame · ערכת נושא כהה, לכל האתר
   ------------------------------------------------------------
   רוב עמודי האתר נושאים פלטה משלהם ב־<style> פנימי, ולכן אי אפשר
   להפוך אותם ממקום אחד רק על ידי שינוי styles/langflame.css.
   מה שכן אפשר: להתגבר עליהם בסלקטיביות. `:root` הוא (0,1,0),
   ו־`:root[data-theme="dark"]` הוא (0,2,0) — הוא מנצח בלי קשר
   לסדר, גם כשה־<style> הפנימי מופיע אחרי הקישור הזה.

   שלושה מצבים:
     data-theme="dark"    כהה תמיד
     data-theme="light"   בהיר תמיד, גם כשמערכת ההפעלה כהה
     ללא התכונה          לפי מערכת ההפעלה

   הבחירה נשמרת ב־localStorage תחת lf-theme, ו־styles/theme.js
   כותב את התכונה לפני הציור הראשון כדי שלא תהיה הבזקה בהירה.
   ============================================================ */

/* הערכים מוגדרים פעם אחת ומוחלים על שני המצבים דרך @media
   ומחוצה לו. אין דרך לשתף בלוק הצהרות בין שני סלקטורים ב־CSS
   ללא מעבד, ולכן הרשימה מופיעה פעמיים — כל שינוי חייב להיעשות
   בשתיהן. */
:root[data-theme="dark"]{
  --ink:#eceae2; --ink2:#c9c7bf; --paper:#191917; --card:#222220;
  --azul:#5b8fd6; --azul-d:#8ab6ee; --azul-l:#12233a;
  --ochre:#e8c07a; --ochre-l:#3a2d10; --ochre-d:#e8c07a;
  --ochre-ink:#e8c07a; --ochre-soft:#3a2d10;
  --green:#7fd9b8; --green-l:#12301f; --ok:#7fd9b8; --ok-bg:#12301f;
  --red:#f08a7e; --red-l:#3a1d19; --rojo:#f08a7e; --tint:#3a1d19;
  --amber:#e8c07a; --amber-l:#3a2d10;
  --fam:#b3a3e0; --fam-l:#241d38;
  --hom:#79cfc6; --hom-l:#0f2e2c; --pol:#f0a3c8; --pol-l:#3a1428;
  --line:#333330; --muted:#95938b;
  --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-h:0 6px 20px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#eceae2; --ink2:#c9c7bf; --paper:#191917; --card:#222220;
    --azul:#5b8fd6; --azul-d:#8ab6ee; --azul-l:#12233a;
    --ochre:#e8c07a; --ochre-l:#3a2d10; --ochre-d:#e8c07a;
    --ochre-ink:#e8c07a; --ochre-soft:#3a2d10;
    --green:#7fd9b8; --green-l:#12301f; --ok:#7fd9b8; --ok-bg:#12301f;
    --red:#f08a7e; --red-l:#3a1d19; --rojo:#f08a7e; --tint:#3a1d19;
    --amber:#e8c07a; --amber-l:#3a2d10;
    --fam:#b3a3e0; --fam-l:#241d38;
    --hom:#79cfc6; --hom-l:#0f2e2c; --pol:#f0a3c8; --pol-l:#3a1428;
    --line:#333330; --muted:#95938b;
    --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-h:0 6px 20px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* כל סלקטור שצובע משטח כמעט-לבן במפורש, במקום דרך --card. הרשימה
   נאספה אוטומטית מסריקת כל ה-<style> באתר ולא נכתבה ביד — הניסיון
   הראשון פספס את .dlg ו-.turn, וכל טקסט בתוך תיבת דו-שיח נשאר
   בהיר על בהיר. אם נוסף עמוד עם משטח כזה, מריצים את הסריקה שוב. */
:root[data-theme="dark"] :is(.also .chip,
  .btn.ghost,
  .card,
  .chip:not(.on),
  .cyc,
  .cyc tr.clk.now:hover td,
  .dialog,
  .dlg,
  .dlg .r:nth-child(odd),
  .exbox,
  .exbtn:hover,
  .fcard,
  .foot,
  .formula code,
  .gbox,
  .gex,
  .hero .when,
  .lb-card,
  .lesson,
  .links a,
  .mini button,
  .note,
  .opt:not(.on),
  .opt:hover,
  .opts button:not(.on),
  .opts button:hover,
  .ov-btn,
  .ov-card,
  .ovchip,
  .pending,
  .pill:not(.on),
  .pn a,
  .qcard,
  .qsent,
  .rcard,
  .res.bad,
  .res.miss:hover,
  .rev,
  .reveal-btn,
  .rulebox,
  .search,
  .seg button:not(.on),
  .side,
  .site-footer,
  .spk,
  .spk:hover,
  .tcard,
  .tile,
  .turn.b .bub,
  .turn:nth-child(even),
  .vocab tr:nth-child(even) td,
  .warn,
  button.spk,
  code,
  details.vb,
  footer.bottom,
  footer.foot,
  footer.site,
  input.f,
  select.f,
  table.conj,
  table.conj tr:nth-child(even) td,
  table.grid tr:nth-child(even) td,
  table.gt tr:nth-child(even) td,
  table.pron tbody tr:nth-child(even),
  table.tb,
  table.tb tr:nth-child(even) td,
  table.vc tbody tr:nth-child(even),
  table.voc,
  table.voc tr.main:nth-of-type(odd) td,
  tr.catrow:hover td,
  tr.exrow td){
  background-color:var(--card);
  border-color:var(--line);
}
:root[data-theme="dark"] body{ background-color:var(--paper) }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.also .chip,
  .btn.ghost,
  .card,
  .chip:not(.on),
  .cyc,
  .cyc tr.clk.now:hover td,
  .dialog,
  .dlg,
  .dlg .r:nth-child(odd),
  .exbox,
  .exbtn:hover,
  .fcard,
  .foot,
  .formula code,
  .gbox,
  .gex,
  .hero .when,
  .lb-card,
  .lesson,
  .links a,
  .mini button,
  .note,
  .opt:not(.on),
  .opt:hover,
  .opts button:not(.on),
  .opts button:hover,
  .ov-btn,
  .ov-card,
  .ovchip,
  .pending,
  .pill:not(.on),
  .pn a,
  .qcard,
  .qsent,
  .rcard,
  .res.bad,
  .res.miss:hover,
  .rev,
  .reveal-btn,
  .rulebox,
  .search,
  .seg button:not(.on),
  .side,
  .site-footer,
  .spk,
  .spk:hover,
  .tcard,
  .tile,
  .turn.b .bub,
  .turn:nth-child(even),
  .vocab tr:nth-child(even) td,
  .warn,
  button.spk,
  code,
  details.vb,
  footer.bottom,
  footer.foot,
  footer.site,
  input.f,
  select.f,
  table.conj,
  table.conj tr:nth-child(even) td,
  table.grid tr:nth-child(even) td,
  table.gt tr:nth-child(even) td,
  table.pron tbody tr:nth-child(even),
  table.tb,
  table.tb tr:nth-child(even) td,
  table.vc tbody tr:nth-child(even),
  table.voc,
  table.voc tr.main:nth-of-type(odd) td,
  tr.catrow:hover td,
  tr.exrow td){
    background-color:var(--card);
    border-color:var(--line);
  }
  :root:not([data-theme="light"]) body{ background-color:var(--paper) }
}

/* --azul does two jobs: link text, and the background of table headers and
   primary buttons that write #fff on top. Lightening it so links stay
   readable makes that white text sit on a pale blue at 1.9:1. These are the
   places it is a background — there the ink flips dark instead. */
:root[data-theme="dark"] :is(table.conj th, table.pron th, table.items th,
  .btn:not(.ghost), .pill.on, .side button.on, .cta:not(.ghost),
  table.conj th *, table.pron th *, table.items th *){
  color:#12233a;
}
/* two badges write their ink as a literal, so the palette cannot reach them */
:root[data-theme="dark"] .tag.pro{ background:var(--ochre-l); color:#e8c07a }
:root[data-theme="dark"] .tag.soon{ background:#2b2b28; color:var(--muted) }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(table.conj th, table.pron th, table.items th,
    .btn:not(.ghost), .pill.on, .side button.on, .cta:not(.ghost),
    table.conj th *, table.pron th *, table.items th *){
    color:#12233a;
  }
  :root:not([data-theme="light"]) .tag.pro{ background:var(--ochre-l); color:#e8c07a }
  :root:not([data-theme="light"]) .tag.soon{ background:#2b2b28; color:var(--muted) }
}


/* .note keeps its ochre panel but writes the ink as #5f4a12, which is a dark
   brown — unreadable once the panel goes dark. Same class, same fix as the
   badges: the palette cannot reach a literal. */
:root[data-theme="dark"] :is(.note, .note *){ color:var(--ochre) }
:root[data-theme="dark"] .note{ background:var(--ochre-l); border-color:#5a4715 }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.note, .note *){ color:var(--ochre) }
  :root:not([data-theme="light"]) .note{ background:var(--ochre-l); border-color:#5a4715 }
}


/* --ink2 is the "slightly quieter than body text" colour. Inverting the
   palette left it darker than the card it sits on, so every gloss and
   secondary line went to ~1.6:1. It has to be lighter than the surface in
   dark mode, not darker. */
:root[data-theme="dark"]{ --ink2:#c9c7bf }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ink2:#c9c7bf } }
:root[data-theme="dark"] :is(.en-gloss,.gloss,.lit,.tr,.sub,.d){ color:var(--ink2) }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.en-gloss,.gloss,.lit,.tr,.sub,.d){ color:var(--ink2) }
}

/* ---------- המתג ---------- */
.lf-theme{
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12); color:#fff;
  border-radius:20px; padding:5px 11px; cursor:pointer;
  font:inherit; font-size:.82rem; line-height:1.2;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.lf-theme:hover{ background:rgba(255,255,255,.22) }
.lf-theme:focus-visible{ outline:2px solid #fff; outline-offset:2px }
/* עמוד בלי כותר כחול — המתג צף בפינה ולובש את צבעי הפלטה */
.lf-theme.float{
  position:fixed; inset-block-start:12px; inset-inline-end:12px; z-index:60;
  border-color:var(--line); background:var(--card); color:var(--ink);
  box-shadow:var(--shadow);
}
.lf-theme.float:hover{ background:var(--azul-l) }
@media print{ .lf-theme{ display:none } }