/* ==========================================================================
   Nacodex — Day theme and the Day/Night button (assets/js/theme.js)
   Night (dark) is the site's own look and stays the default. Day is a stored choice: theme.js sets
   <html data-theme="light"> before the first paint. Same control as pukapasoft.xyz: one button, the sun
   shows at night (press for day), the moon by day.
   Loaded after style.css; every rule is scoped to [data-theme="light"], so Night is untouched.
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f3f6fe;
  --bg-elev:     #ffffff;
  --bg-elev-2:   #eaeffb;
  --border:      #d5dcf1;
  --border-2:    #b6c1e5;
  --text:        #121835;
  --text-dim:    #47507c;
  --text-mute:   #737da8;
  --accent:      #1c66cc;
  --accent-soft: rgba(28,102,204,.10);
  --violet:      #6a4bd4;
  --gold:        #9c6a06;
  --gold-soft:   rgba(156,106,6,.10);
  --good:        #0c8a5f;
  --warn:        #9c6a06;
  --bad:         #c23d47;
  --crit:        #d02a31;
  --info:        #1c66cc;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Ground: no starfield by day, a softer nebula. */
:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] body::before { display: none; }
:root[data-theme="light"] body::after { opacity: .55; }

/* Hero wordmark: the night gradients start near white; by day they start darker. */
:root[data-theme="light"] .hero-name .a { background: linear-gradient(170deg, #4d8bff 6%, #1c66cc 50%, #123f8a 100%); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .hero-name .b { background: linear-gradient(170deg, #e0a52c 6%, #b57a0c 50%, #7a4f04 100%); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .hero-logo { filter: drop-shadow(0 10px 24px rgba(18,24,53,.18)); }

/* Cards and modal by day: a light shadow instead of the night glow. */
:root[data-theme="light"] .card { box-shadow: 0 6px 20px -12px rgba(18,24,53,.25); }
:root[data-theme="light"] .nx-modal { background: rgba(18,24,53,.45); }
:root[data-theme="light"] .chip.high,
:root[data-theme="light"] .sev-tile.high,
:root[data-theme="light"] .score-ring.concerning { color: #c4561c; border-color: #c4561c; }

/* Top bar (its own colours live in common.js). */
:root[data-theme="light"] .nx-bar { background: rgba(255,255,255,.86); border-bottom-color: var(--border); }
:root[data-theme="light"] .nx-word { color: var(--text); }
:root[data-theme="light"] .nx-word b { background: linear-gradient(100deg, #b57a0c, #e0a52c); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .nx-home { color: var(--text-mute); border-left-color: var(--border); }
:root[data-theme="light"] .nx-nav a { color: var(--text-dim); }
:root[data-theme="light"] .nx-nav a:hover { color: var(--text); background: var(--accent-soft); }
:root[data-theme="light"] .nx-nav a.active { color: var(--text); background: var(--bg-elev-2); border-color: var(--border-2); }
:root[data-theme="light"] .nx-pill { background: var(--bg-elev-2); border-color: var(--border-2); color: var(--text-dim); }
:root[data-theme="light"] .nx-pill.on { color: var(--good); border-color: var(--good); }
:root[data-theme="light"] .nx-toggle { background: var(--bg-elev-2); border-color: var(--border-2); color: var(--text); }
@media (max-width: 960px) {
  :root[data-theme="light"] .nx-menu { background: rgba(255,255,255,.98); border-bottom-color: var(--border); }
  :root[data-theme="light"] .nx-menu .nx-home-m { color: var(--text-mute); border-top-color: var(--border); }
}

/* The Day/Night button. */
.nx-theme {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0; margin-left: 10px;
  background: #11142b; border: 1px solid #2b3268; border-radius: 8px; color: #9aa1cf; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nx-theme:hover { color: #f0b43c; border-color: #f0b43c; }
.nx-theme:focus-visible { outline: 2px solid #46a8ff; outline-offset: 2px; }
.nx-theme svg { width: 17px; height: 17px; display: block; }
.nx-theme .i-moon { display: none; }
:root[data-theme="light"] .nx-theme { background: var(--bg-elev-2); border-color: var(--border-2); color: var(--text-dim); }
:root[data-theme="light"] .nx-theme:hover { color: var(--gold); border-color: var(--gold); }
:root[data-theme="light"] .nx-theme .i-sun { display: none; }
:root[data-theme="light"] .nx-theme .i-moon { display: block; }
@media (max-width: 960px) { .nx-theme { margin-left: 8px; } }