/* Night Room — Theme System */
/* Same color story: warm parchment tones, aged library aesthetic */

:root {
  /* ── Dark (default) ── */
  --nr-bg-rgb: 12,20,30;
  --nr-void-rgb: 7,15,25;
  --nr-surface-rgb: 26,32,48;
  --nr-text-rgb: 234,221,206;
  --nr-accent-rgb: 212,184,149;
  --nr-accent-muted-rgb: 201,168,124;
  --nr-ink-rgb: 44,36,27;
  --nr-rust-rgb: 140,58,36;
  --nr-muted-rgb: 107,92,75;
  /* Overlay: parchment glow on dark backgrounds */
  --nr-overlay-rgb: 212,184,149;
  /* Modal background */
  --nr-modal-bg-rgb: 20,28,39;
  /* Meta / PWA */
  --nr-theme-color: #0c141e;

  /* Five Elements lens — aliases over existing Night Room palette tokens (no new hex).
     Water uses chalk text token (light cool) at reduced opacity to read as cool/dim
     against the dark diagram without disappearing into the surface token. */
  --nr-element-wood:    rgba(var(--nr-muted-rgb), 0.85);
  --nr-element-fire:    rgba(var(--nr-rust-rgb), 0.95);
  --nr-element-earth:   rgba(var(--nr-accent-rgb), 0.9);
  --nr-element-metal:   rgba(var(--nr-text-rgb), 0.95);
  --nr-element-water:   rgba(var(--nr-text-rgb), 0.55);
  --nr-element-special: rgba(var(--nr-accent-muted-rgb), 0.95);
}

html.light {
  /* ── Light: Terracotta Morning ── */
  --nr-bg-rgb: 242,232,216;
  --nr-void-rgb: 232,220,202;
  --nr-surface-rgb: 224,210,188;
  --nr-text-rgb: 62,42,28;
  --nr-accent-rgb: 176,104,48;
  --nr-accent-muted-rgb: 150,88,40;
  --nr-ink-rgb: 242,232,216;
  --nr-rust-rgb: 140,46,24;
  --nr-muted-rgb: 160,128,96;
  /* Overlay: warm umber on golden sand */
  --nr-overlay-rgb: 110,68,40;
  /* Modal background */
  --nr-modal-bg-rgb: 20,28,39;
  /* Meta / PWA */
  --nr-theme-color: #F2E8D8;
}

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
}

/* Body background — driven by variable */
body {
  background-color: rgb(var(--nr-bg-rgb)) !important;
  scrollbar-width: none;               /* Firefox */
}
body::-webkit-scrollbar { display: none; } /* WebKit */

/* Focus visible — driven by variable */
:focus-visible {
  outline-color: rgba(var(--nr-accent-rgb), 0.6) !important;
}

/* Light mode — select/option readability */
html.light select option {
  background-color: rgb(var(--nr-bg-rgb));
  color: rgb(var(--nr-text-rgb));
}

/* House/Table subtab nav row — horizontal scroll on mobile when items overflow.
   Added a later pass when House subtab count grew to 6 + Home. */
.nr-subtab-row {
  overflow-x: auto;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nr-subtab-row::-webkit-scrollbar { display: none; }

/* Light mode — nav bar: opaque, not transparent */
html.light nav.nr-nav {
  background-color: rgb(var(--nr-bg-rgb)) !important;
  backdrop-filter: none !important;
  border-top-color: rgba(var(--nr-overlay-rgb), 0.12);
}

/* Light mode — parchment-card: aged clay parchment on golden sand */
html.light .parchment-card {
  background-color: #D8C4A4 !important;
  color: #3E2A1C;
  box-shadow: 0 2px 12px -2px rgba(var(--nr-overlay-rgb), 0.12) !important;
}

/* Light mode — parchment-card text: force dark tones for readability */
html.light .parchment-card .text-ink { color: #3E2A1C !important; }
html.light .parchment-card .text-muted { color: rgba(62,42,28,0.6) !important; }
html.light .parchment-card .font-serif { color: #3E2A1C; }
html.light .parchment-card [style*="color:rgba(44,36,27"] { color: rgba(62,42,28,0.5) !important; }

/* Light mode — supplement buttons: boost opacity for visibility on cream */
html.light [id^="supp-"] {
  filter: saturate(1.4) contrast(1.3);
}

/* Light mode — entry modal keeps dark bg */
html.light #entry-modal form {
  background-color: #1a2030 !important;
}

/* Light mode — Records glow: hide entirely, cream bg doesn't need it */
html.light #glow-wrapper {
  display: none !important;
}