/* ============================================================
   THEME — LIGHT is the default; [data-theme="dark"] restores the
   original cinematic midnight palette. Accents (gold / burgundy /
   rose) are shared. Toggle lives next to the language switch.
   ============================================================ */

/* ---------- LIGHT (default) ---------- */
:root[data-theme="light"]{
  --midnight:   #FBF9F4;   /* base canvas — warm ivory white */
  --midnight-2: #F1EBDF;   /* raised panels */
  --navy:       #ECE4D4;   /* feature bands (were deep blue) */
  --navy-2:     #E4DAC6;
  --cream:      #E7DCC6;   /* the "types" island — kept distinct on ivory */
  --cream-ink:  #1A1714;

  --paper:      #1C1814;   /* primary text = dark ink */
  --paper-2:    rgba(28,24,20,.66);
  --paper-3:    rgba(28,24,20,.42);
  --hair:       rgba(28,24,20,.14);
  --hair-2:     rgba(28,24,20,.07);

  --gold-glow:  rgba(201,162,75,.30);
}

/* text that sits ON gold must stay dark in light mode */
:root[data-theme="light"] .btn{ color:#1C1814; }
:root[data-theme="light"] .cursor__label{ color:#1C1814; }
:root[data-theme="light"] .pcard.pop::before{ color:#1C1814; }
:root[data-theme="light"] .prev__tabs button.on{ color:#1C1814; }
:root[data-theme="light"] .btn--ghost:hover{ color:#FBF9F4; }   /* dark fill → light text */
:root[data-theme="light"] .lang-btn .lab,
:root[data-theme="light"] .theme-btn{ color:var(--paper); }

/* translucent dark glasses → light glass */
:root[data-theme="light"] .hdr.shrink,
:root[data-theme="light"] .lib-hdr,
:root[data-theme="light"] .pj-hdr{ background:rgba(251,249,244,.78); border-bottom:1px solid var(--hair-2); }

/* cards / hovers read better on ivory */
:root[data-theme="light"] .tcard{ background:rgba(0,0,0,.025); }
:root[data-theme="light"] .pcard{ background:var(--midnight-2); }
:root[data-theme="light"] .lib-hdr .mark,
:root[data-theme="light"] .pj-hdr .mark,
:root[data-theme="light"] .hdr__mark{ background:#1b1e25; }

/* the custom cursor blends with multiply on light, difference on dark */
:root[data-theme="light"] .cursor{ mix-blend-mode:multiply; }

/* selection keeps white text on the burgundy */
:root[data-theme="light"] ::selection{ background:var(--ink); color:#fff; }

/* soften the film-grain on the bright canvas */
:root[data-theme="light"] body::after{ opacity:.03; }

/* ---------- Theme toggle button ---------- */
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-pill);
  border:1px solid var(--hair); color:var(--paper);
  transition:border-color .4s var(--ease), color .4s, transform .3s var(--ease);
}
.theme-btn:hover{ border-color:var(--gold); color:var(--gold); }
.theme-btn:active{ transform:scale(.93); }
.theme-btn svg{ width:18px; height:18px; }
.theme-btn .i-sun{ display:none; }
.theme-btn .i-moon{ display:block; }
:root[data-theme="dark"] .theme-btn .i-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .i-moon{ display:none; }

/* ---------- Quill cursor + Hebrew-letter ink trail ---------- */
body.quill-on{ cursor:none; }
body.quill-on a,
body.quill-on button,
body.quill-on input,
body.quill-on select,
body.quill-on textarea,
body.quill-on [data-cursor]{ cursor:none; }

.quill{
  position:fixed; top:0; left:0; z-index:9600; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease); will-change:transform;
}
.quill svg{ display:block; width:40px; height:40px; transform:translate(-4px,-38px);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.quill .plume{ fill:var(--gold); opacity:.92; }
.quill .spine{ stroke:#7a5a16; stroke-width:1.4; fill:none; opacity:.5; }
.quill .nib{ stroke:var(--gold); stroke-width:2.4; stroke-linecap:round; }

.ink-layer{ position:fixed; inset:0; z-index:9590; pointer-events:none; overflow:hidden; }
.ink-letter{
  position:absolute; top:0; left:0; will-change:transform,opacity;
  font-family:var(--serif); font-weight:700; font-size:19px; color:var(--gold);
  text-shadow:0 1px 6px var(--gold-glow);
}

/* cursor toggle button shares the .theme-btn shell; dims when off */
.theme-btn.is-off{ opacity:.5; }
@media (hover:none),(pointer:coarse){ #cursorBtn{ display:none; } }