/* =====================================================
   inveni — light-theme.css  (paper mode)

   Scoped to html[data-theme="paper"]. Default state (no
   attribute) is the original dark theme — this file MUST
   NEVER mutate that default.

   Layered as the LAST stylesheet so its overrides win.
   ===================================================== */

/* ---------- Token re-bindings (most rules auto-flip via these) ---------- */
html[data-theme="paper"] {
  /* EXACT gold-reference paper palette — verbatim from
     `inveni - Light Theme (1).html` :root. Do not "improve" these
     values; the user wants byte-identical colours to that file. */
  /* Surfaces — ink → paper */
  --ink-900: #F2EDE0;   /* deepest paper, page bg */
  --ink-800: #F7F2E6;   /* primary canvas */
  --ink-700: #FFFFFF;   /* card / panel surface */
  --ink-600: #FAF7F0;   /* raised surface */
  --ink-500: #E6DFCD;   /* subtle divider, hover */
  --ink-400: #C9C0AB;   /* disabled stroke */

  /* Foreground — invert */
  --fg-1: #1B1A14;
  --fg-2: #4A4A3D;
  --fg-3: #8E8770;
  --fg-4: #B5AC92;

  /* Surface / border / scrim — switch alpha base from white→ink */
  --surface-glass:   rgba(27, 26, 20, 0.03);
  --surface-raised:  rgba(255, 255, 255, 0.85);
  --surface-sunken:  rgba(27, 26, 20, 0.05);
  --border-hair:     rgba(27, 26, 20, 0.10);
  --border-soft:     rgba(27, 26, 20, 0.20);
  --border-ink:      rgba(27, 26, 20, 0.10);
  --border-ink-soft: rgba(27, 26, 20, 0.18);
  --scrim-strong:    rgba(27, 26, 20, 0.55);
  --scrim-soft:      rgba(27, 26, 20, 0.25);

  /* Elevation — warm paper shadows replace the inky drop-shadows */
  --elev-1: 0 1px 2px rgba(27,26,20,0.06);
  --elev-2: 0 4px 18px rgba(27,26,20,0.08);
  --elev-3: 0 12px 40px rgba(27,26,20,0.10);
  --elev-4: 0 24px 80px rgba(27,26,20,0.14);

  /* Glow rings — much softer on paper */
  --glow-azure:  0 0 22px rgba(111,168,255,0.18);
  --glow-violet: 0 0 22px rgba(167,139,250,0.18);

  /* Signal hues — azure a touch deeper for legibility on warm cream */
  --signal-azure:  #2F6CDB;
  --signal-violet: #7B5DD1;
  --signal-amber:  #B4811E;
  --signal-leaf:   #3F8B5E;
  --signal-rose:   #C4544A;

  /* Legacy bridge (app-shell.css) — surfaces that hard-coded dark */
  --bg-primary:    var(--ink-800);
  --bg-secondary:  var(--ink-700);
  --bg-dark:       var(--ink-900);
  --bg-card:       rgba(255, 255, 255, 0.78);
  --bg-glass:      var(--surface-glass);
  --border-glass:  var(--border-hair);
  --text-primary:   var(--fg-1);
  --text-secondary: var(--fg-2);
  --text-muted:     var(--fg-3);
  --shadow-card:   var(--elev-2);
  --shadow-glow:   0 0 30px rgba(111, 168, 255, 0.14);

  --gradient-primary: linear-gradient(135deg, var(--signal-azure), var(--signal-violet));
  --gradient-score:   linear-gradient(90deg,  var(--signal-azure), var(--signal-violet), var(--signal-amber));
}

/* ---------- Page chrome ---------- */
/* THE STARS FIX. #starsCanvas is z-index:-1 (behind body). The old rule
   painted the cream on `body` itself → an opaque layer directly over the
   canvas → every star hidden. Mirror the dark architecture instead: put
   the paper colour on `html`, keep `body` TRANSPARENT, keep the canvas
   transparent at z-index:-1. Stars (drawn dark-on-transparent by
   App.StarField in paper mode) then sit on the html cream and read
   through the transparent body, exactly like the gold reference. */
html[data-theme="paper"] {
  background-color: var(--ink-900) !important;
  color: var(--fg-1) !important;
}
html[data-theme="paper"] body {
  background-color: transparent !important;
  color: var(--fg-1) !important;
}
html[data-theme="paper"] ::selection { background: rgba(123, 93, 209, 0.22); }

/* Canvas transparent so the html cream shows through; opacity 1
   everywhere (incl. the signed-in shell) so stars never vanish — the
   base `…#protected-layout… {opacity:0.45}` rule is overridden here. */
html[data-theme="paper"] #starsCanvas {
  background: transparent !important;
  opacity: 1 !important;
}
html[data-theme="paper"] body:has(#protected-layout:not(.hidden)) #starsCanvas {
  opacity: 1 !important;
}

/* #2 — signed-in background = the SAME beige (#F2EDE0 + stars) as the
   landing. The white veil + blur made the app read far brighter than
   the landing; drop it so the protected shell is the bare paper canvas.
   Everything else (sidebar, cards, components) is left as the ref. */
html[data-theme="paper"] .layout-protected {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* ---------- Landing ---------- */

html[data-theme="paper"] .inveni-landing nav.landing-nav .brand img,
html[data-theme="paper"] .inveni-landing .galaxy .mark {
  filter: drop-shadow(0 6px 18px rgba(180, 129, 30, 0.18));
}
/* Wordmark: pure black on paper. Drop the warm halo text-shadow that
   was muddying the ink — the user wants the inveni mark crisp black. */
html[data-theme="paper"] .inveni-landing .galaxy .wordmark,
html[data-theme="paper"] .inveni-landing .foot-grid .brand-cell .word {
  color: #000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
}

/* Core-glow — warm cream halo instead of cool violet */
html[data-theme="paper"] .inveni-landing .galaxy .core-glow {
  background: radial-gradient(circle,
      rgba(229, 178, 93, 0.30) 0%,
      rgba(229, 178, 93, 0.18) 14%,
      rgba(180, 140, 80, 0.10) 28%,
      rgba(167, 139, 250, 0.06) 44%,
      transparent 64%);
  filter: blur(4px);
}

/* Nav links + actions */
html[data-theme="paper"] .inveni-landing .lbtn {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--border-soft);
  color: var(--fg-1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="paper"] .inveni-landing .lbtn:hover {
  border-color: var(--fg-2);
  background: #fff;
}
html[data-theme="paper"] .inveni-landing .lbtn--primary {
  background: var(--fg-1);
  color: var(--ink-900);
  border-color: var(--fg-1);
}
html[data-theme="paper"] .inveni-landing .lbtn--primary:hover {
  background: #2A2920;
  color: #fff;
  box-shadow: 0 8px 24px rgba(27, 26, 20, 0.22);
}

/* Headline accents */
html[data-theme="paper"] .inveni-landing .pull .accent { color: var(--signal-amber); }
html[data-theme="paper"] .inveni-landing .l-eyebrow .dot {
  background: var(--signal-amber);
  box-shadow: 0 0 8px rgba(180, 129, 30, 0.45);
}

/* Diagram panel */
html[data-theme="paper"] .inveni-landing .diagram {
  border-color: var(--border-hair);
  background:
    radial-gradient(circle at 50% 65%, rgba(123, 93, 209, 0.10), transparent 55%),
    radial-gradient(circle at 30% 30%, rgba(47, 108, 219, 0.07), transparent 55%),
    rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--elev-2);
}
html[data-theme="paper"] .inveni-landing .diagram .node {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border-soft);
  color: var(--fg-1);
}
html[data-theme="paper"] .inveni-landing .diagram .merge {
  background: linear-gradient(135deg, rgba(123, 93, 209, 0.18), rgba(47, 108, 219, 0.18));
  border-color: rgba(27, 26, 20, 0.18);
  color: var(--fg-1);
}
html[data-theme="paper"] .inveni-landing .diagram .pulse {
  background: var(--signal-violet);
  box-shadow: 0 0 16px rgba(123, 93, 209, 0.6);
}

/* University marquee */
html[data-theme="paper"] .inveni-landing .uni-card img { filter: none; opacity: 0.78; }
html[data-theme="paper"] .inveni-landing .uni-card img:hover { opacity: 1; }

/* NUS logo: image is swapped in JS (App._swapThemedImages) to the
   light-theme asset (uni-nus-light.png) — full-color crest + black
   "NUS" text. CSS just keeps the opacity consistent with the other
   uni cards. */
html[data-theme="paper"] .inveni-landing .uni-card img[src*="nus"],
html[data-theme="paper"] .uni-card img[src*="nus"] {
  opacity: 0.92;
  filter: none;
}

/* End-CTA */
html[data-theme="paper"] .inveni-landing .end-cta .start-btn {
  background: var(--fg-1);
  color: var(--ink-900);
  box-shadow: 0 0 0 1px rgba(27, 26, 20, 0.08), 0 10px 32px rgba(27, 26, 20, 0.16);
}
html[data-theme="paper"] .inveni-landing .end-cta .start-btn:hover {
  background: #2A2920;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(27, 26, 20, 0.12), 0 14px 44px rgba(27, 26, 20, 0.22);
}

/* Footer */
html[data-theme="paper"] .inveni-landing footer.landing-foot {
  background: rgba(242, 237, 224, 0.72);
  border-top: 1px solid var(--border-hair);
  backdrop-filter: blur(8px);
}

/* ---------- Sidebar / protected shell ---------- */
/* .layout-protected is intentionally handled up in "Page chrome" (#2:
   bare paper canvas, same beige as the landing). The old white-veil
   rule that used to live here was removed so it can't re-whiten the
   signed-in background. Sidebar/cards below stay as the gold ref. */
html[data-theme="paper"] #sidebar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border-soft);
  box-shadow: 4px 0 18px rgba(27, 26, 20, 0.05);
}
html[data-theme="paper"] .sidebar__logo,
html[data-theme="paper"] .sidebar-logo { color: var(--fg-1); }
html[data-theme="paper"] .nav-link {
  color: var(--fg-3);
  border-left-color: transparent;
}
html[data-theme="paper"] .nav-link:hover {
  background: rgba(27, 26, 20, 0.04);
  color: var(--fg-1);
}
html[data-theme="paper"] .nav-link.active {
  color: var(--signal-azure);
  background: rgba(47, 108, 219, 0.08);
  border-left-color: var(--signal-azure);
}
html[data-theme="paper"] .sidebar-footer { border-top-color: var(--border-hair); }
/* Signout button — default state was reading as olive/green on cream
   because var(--fg-2) is a warm dark grey. Force a calm blue so it
   visually pairs with the other azure accents in paper mode. The hover
   stays rose-tinted (signout is destructive). */
html[data-theme="paper"] .signout-btn {
  background: transparent;
  border: 1px solid rgba(47, 108, 219, 0.30) !important;
  color: var(--signal-azure) !important;
  border-radius: var(--r-pill);
}
html[data-theme="paper"] .signout-btn svg,
html[data-theme="paper"] .signout-btn [data-icon] svg { color: var(--signal-azure); }
html[data-theme="paper"] .signout-btn:hover {
  background: rgba(196, 84, 74, 0.06) !important;
  color: var(--signal-rose) !important;
  border-color: var(--signal-rose) !important;
  box-shadow: 0 0 16px rgba(196, 84, 74, 0.18);
}

/* ---------- Cards ---------- */
html[data-theme="paper"] .glass-card,
html[data-theme="paper"] .card.glass-card,
html[data-theme="paper"] .auth-card.glass-card,
html[data-theme="paper"] .card {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--border-hair) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--elev-2);
}
html[data-theme="paper"] .glass-card:hover,
html[data-theme="paper"] .card:hover {
  border-color: var(--border-soft) !important;
  box-shadow: var(--elev-3);
}

/* Paper-card / scored-card — EXACT gold-ref rule. */
html[data-theme="paper"] .paper-card,
html[data-theme="paper"] .scored-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--elev-2);
}
html[data-theme="paper"] .paper-card:hover,
html[data-theme="paper"] .scored-card:hover {
  border-color: var(--border-soft) !important;
  box-shadow: var(--elev-3);
}
html[data-theme="paper"] .scored-card-header:hover { background: rgba(27, 26, 20, 0.025); }
html[data-theme="paper"] .scored-card-body { border-top-color: var(--border-soft); }

/* ---------- Buttons ---------- */
html[data-theme="paper"] .btn-primary,
html[data-theme="paper"] .btn.btn--primary {
  background: var(--fg-1);
  color: var(--ink-900);
  border: none;
  box-shadow: 0 2px 8px rgba(27, 26, 20, 0.10);
}
html[data-theme="paper"] .btn-primary:hover,
html[data-theme="paper"] .btn.btn--primary:hover {
  background: #2A2920;
  color: #fff;
  box-shadow: 0 4px 16px rgba(27, 26, 20, 0.18);
}
html[data-theme="paper"] .btn-secondary,
html[data-theme="paper"] .btn.btn--secondary {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--border-soft);
}
html[data-theme="paper"] .btn-secondary:hover,
html[data-theme="paper"] .btn.btn--secondary:hover {
  background: rgba(27, 26, 20, 0.04);
  border-color: var(--fg-2);
  color: var(--fg-1);
}
html[data-theme="paper"] .btn-link { color: var(--signal-azure); }
html[data-theme="paper"] .btn-link:hover { color: var(--signal-violet); }
html[data-theme="paper"] .btn-text { border-color: var(--border-soft); color: var(--fg-1); }
html[data-theme="paper"] .btn-text:hover { background: rgba(27, 26, 20, 0.04); border-color: var(--fg-2); }

/* ---------- Inputs ---------- */
html[data-theme="paper"] .seed-input,
html[data-theme="paper"] .field__input,
html[data-theme="paper"] .field__textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--border-hair) !important;
  color: var(--fg-1) !important;
}
html[data-theme="paper"] .seed-input::placeholder { color: var(--fg-4); }
html[data-theme="paper"] .seed-input:focus,
html[data-theme="paper"] .field__input:focus {
  border-color: var(--signal-azure) !important;
  box-shadow: 0 0 0 3px rgba(47, 108, 219, 0.14);
}

/* ---------- Score bar / progress ---------- */
html[data-theme="paper"] .score-bar-track,
html[data-theme="paper"] .bar,
html[data-theme="paper"] .progress-bar-container {
  background: rgba(27, 26, 20, 0.07) !important;
}
html[data-theme="paper"] .score-bar-fill,
html[data-theme="paper"] .bar > span,
html[data-theme="paper"] .progress-bar-fill {
  background: linear-gradient(90deg, var(--signal-azure), var(--signal-violet), var(--signal-amber));
}

/* ---------- Tags ---------- */
html[data-theme="paper"] .tag {
  background: rgba(123, 93, 209, 0.10);
  color: var(--signal-violet);
  border-color: rgba(123, 93, 209, 0.20);
}

/* ---------- Health / admin ---------- */
html[data-theme="paper"] .health-row { border-bottom-color: var(--border-hair); }
html[data-theme="paper"] .health-badge { background: rgba(27, 26, 20, 0.06); color: var(--fg-2); }
html[data-theme="paper"] .health-badge.ok { background: rgba(63, 139, 94, 0.12); color: var(--signal-leaf); }
html[data-theme="paper"] .health-badge.error { background: rgba(196, 84, 74, 0.12); color: var(--signal-rose); }
html[data-theme="paper"] .pipeline-log {
  background: rgba(27, 26, 20, 0.04);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.8rem;
  color: var(--fg-3);
}

/* ---------- Deck controls ---------- */
html[data-theme="paper"] .ctrl-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border-soft);
  color: var(--fg-1);
  box-shadow: var(--elev-1);
}
html[data-theme="paper"] .ctrl-btn.like:hover {
  border-color: var(--signal-leaf);
  box-shadow: 0 0 24px rgba(63, 139, 94, 0.20);
}
html[data-theme="paper"] .ctrl-btn.dislike:hover {
  border-color: var(--signal-rose);
  box-shadow: 0 0 24px rgba(196, 84, 74, 0.20);
}
html[data-theme="paper"] .ctrl-btn.skip:hover {
  border-color: var(--signal-amber);
  box-shadow: 0 0 16px rgba(180, 129, 30, 0.22);
}

/* ---------- Empty state ---------- */
html[data-theme="paper"] .empty__star,
html[data-theme="paper"] .empty-icon { color: var(--signal-amber); }

/* ---------- Auth shell ---------- */
html[data-theme="paper"] .auth-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--border-hair) !important;
}
html[data-theme="paper"] .auth-footer a { color: var(--signal-azure); }
html[data-theme="paper"] .auth-msg { color: var(--signal-rose); }

/* ---------- Divider / hint / spinner ---------- */
html[data-theme="paper"] .divider::before,
html[data-theme="paper"] .divider::after { background: var(--border-hair); }
html[data-theme="paper"] .divider { color: var(--fg-3); }
html[data-theme="paper"] .hint { color: var(--fg-3); }
html[data-theme="paper"] .spinner {
  border-color: rgba(123, 93, 209, 0.25);
  border-top-color: var(--signal-violet);
}

/* ---------- Status dot ---------- */
html[data-theme="paper"] .status-dot { background: var(--fg-4); }
html[data-theme="paper"] .status-dot.connected {
  background: var(--signal-leaf);
  box-shadow: 0 0 8px rgba(63, 139, 94, 0.4);
}

/* ---------- Comparison cards ---------- */
html[data-theme="paper"] .cmp-paper,
html[data-theme="paper"] .comp-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border-hair) !important;
  box-shadow: var(--elev-1);
}
html[data-theme="paper"] .cmp-paper.rate-green,
html[data-theme="paper"] .paper-card.rate-green {
  border-color: var(--signal-leaf) !important;
  box-shadow: 0 0 0 2px rgba(63, 139, 94, 0.18), var(--elev-1);
}
html[data-theme="paper"] .cmp-paper.rate-red,
html[data-theme="paper"] .paper-card.rate-red {
  border-color: var(--signal-rose) !important;
  box-shadow: 0 0 0 2px rgba(196, 84, 74, 0.18), var(--elev-1);
}
html[data-theme="paper"] .comp-intro-chip.rate-green {
  background: rgba(63, 139, 94, 0.16);
  color: var(--signal-leaf);
}
html[data-theme="paper"] .comp-intro-chip.rate-red {
  background: rgba(196, 84, 74, 0.16);
  color: var(--signal-rose);
}

/* ---------- Scrollbar ---------- */
html[data-theme="paper"] ::-webkit-scrollbar-thumb { background: var(--border-soft); }

/* ---------- History calendar ---------- */
html[data-theme="paper"] .history-cal-btn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--fg-2);
  border-radius: var(--r-sm);
}
html[data-theme="paper"] .history-cal-btn:hover {
  color: var(--fg-1);
  border-color: var(--fg-2);
}
html[data-theme="paper"] .history-week-label { color: var(--fg-1); }

/* ---------- Logo text gradient ---------- */
html[data-theme="paper"] .logo-text {
  background: linear-gradient(135deg, var(--fg-1), var(--signal-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* =====================================================
   THEME TOGGLE PILL
   ===================================================== */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 56px;
  height: 28px;
  padding: 3px;
  border: 1px solid var(--border-hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--border-soft); }
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4);
}
.theme-toggle__thumb {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fg-1);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.theme-toggle__thumb img,
.theme-toggle__thumb svg {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
}
html[data-theme="paper"] .theme-toggle {
  background: rgba(27, 26, 20, 0.06);
  border-color: var(--border-hair);
}
html[data-theme="paper"] .theme-toggle__thumb {
  /* slide right in paper mode */
  transform: translateX(28px);
  background: #1B1A14;
  color: #FAF7F0;
}
/* Hide on mobile — desktop only per spec */
@media (max-width: 1023px) {
  .theme-toggle { display: none !important; }
}

/* ---------- Mobile: paper theme must hold on phones too ----------
   On ≤768px the sidebar becomes a fixed bottom tab bar whose
   mobile.css rule hard-codes a DARK background (rgba(11,14,22,.92)).
   In paper mode that left a dark slab under a cream app. Pin it to
   the same light translucent surface as the desktop sidebar, and
   keep the protected shell on the bare beige canvas (+ stars). */
@media (max-width: 768px) {
  html[data-theme="paper"] #sidebar.sidebar,
  html[data-theme="paper"] nav.sidebar,
  html[data-theme="paper"] .sidebar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-soft) !important;
  }
  html[data-theme="paper"] .nav-link.active {
    color: var(--signal-azure);
    background: rgba(47, 108, 219, 0.08);
  }
  html[data-theme="paper"] .layout-protected {
    background: transparent !important;
  }
}