/* /public/css/night.css
   Color source of truth: memory/companion/Art-Style.md — edit there first, this file holds the working values.
   The Tenari NIGHT surface kit — the home screen's world palette (black, mint,
   mystical purples and blues) for the 2D app layer. Settings + its sub-menus and
   All Apps sit on this; the home screen (home.html) paints its own animated sky
   and only shares the colours.

   HOW TO USE IT: exactly like parchment.css — load it LAST, after app-theme.css
   AND after settings-page.css. That's the whole conversion:

     <link rel="stylesheet" href="/css/app-theme.css">
     <link rel="stylesheet" href="/css/settings-page.css">
     <link rel="stylesheet" href="/css/night.css">   <-- LAST

   It remaps BOTH parchment's token names (--paper/--ink/--wood…) and app-theme's
   (--bg/--panel/--accent…), so a page written against either set follows without
   edits. Pages converting FROM parchment must also drop their own brown literals
   (paper-tooth body backgrounds, rgba(91,65,38,…) washes) and any :root.pf-night
   rules — there is no day/night toggle here; the night IS the theme.

   Theme-agnostic ON PURPOSE, same as parchment: it overrides :root,
   [data-theme=dark] and [data-theme=light] alike. No appearance-apply.js needed.

   Palette source: public/home.html (the home screen) — kept in step by hand;
   the home is the reference, this file is the kit. */

/* ── PALETTE + BRIDGE ─────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --paper:      #05030f;              /* page base — the night */
  --surface:    #150f2e;              /* cards / inputs — dark glass */
  --surface-2:  #1b1440;              /* insets / hovers */
  --wood:       #8f7dd8;              /* muted violet — lesser accents, arrows */
  --wood-deep:  #6ee7b7;              /* mint — headers, icons, the live colour */
  --ink:        #eae6f7;              /* primary text */
  --ink-soft:   #b7b0d8;              /* secondary text */
  --ink-dim:    rgba(234, 230, 247, .45);
  --amber:      #6ee7b7;              /* "the glow" on parchment pages → mint here */
  --line:       rgba(124, 92, 255, .26);
  --line-strong:rgba(124, 92, 255, .50);

  /* app-theme.css token names, repainted for the night. This is what makes
     settings-page.css work unchanged. */
  --bg:            var(--paper);
  --panel:         var(--surface);
  --panel-solid:   var(--surface);
  --panel-hover:   var(--surface-2);
  --border:        var(--line);
  --border-strong: var(--line-strong);

  --text:      var(--ink);
  --text-body: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim:  var(--ink-dim);

  --accent:     #6ee7b7;
  --accent-dim: rgba(110, 231, 183, .14);
  --accent-fg:  #04140c;              /* text/icon on accent fills */
  --danger:     #e0775c;
  --warn:       #e0ad5c;
  --success:    #6acf73;

  /* Cards are glass on the night: deep drop, a breath of violet glow, a hairline
     top light. */
  --card-bg-top: var(--surface);
  --card-bg-bot: var(--surface-2);
  --card-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(124, 92, 255, .10),
                 inset 0 1px 0 rgba(255, 255, 255, .05);

  /* Control / field fills — washes of violet light over the dark. */
  --control-bg:       rgba(124, 92, 255, .10);
  --control-bg-hover: rgba(124, 92, 255, .18);
  --btn-bg-hover:     rgba(124, 92, 255, .14);
  --field-bg:         rgba(124, 92, 255, .07);
  --field-bg-focus:   rgba(124, 92, 255, .12);
  --track-bg:         rgba(124, 92, 255, .22);
  --knob:             #d8d2f0;
  --knob-on:          #04140c;
  --pill-bg:          rgba(124, 92, 255, .07);
  --code-bg:          rgba(0, 0, 0, .38);

  /* The shared corner back-chevron (js/ce-back-button.js): light ink, mint glow —
     its native look; it was born on a dark theme. */
  --ce-back:      var(--ink);
  --ce-back-glow: rgba(110, 231, 183, .35);
}

/* The chevron in a select is a data-URI and can't read a variable. */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='rgba(234,230,247,.62)' d='M6 9L1 4h10z'/></svg>") !important;
}

/* Notices: dark tints, light text. */
.notice.info    { background: rgba(120, 160, 255, .10); border-color: rgba(120, 160, 255, .30); color: #a8c4ff; }
.notice.warn    { background: rgba(224, 173, 92, .10);  border-color: rgba(224, 173, 92, .30);  color: #ffd28a; }
.notice.danger  { background: rgba(224, 119, 92, .10);  border-color: rgba(224, 119, 92, .30);  color: #ffb3a0; }
.notice.success { background: rgba(106, 207, 115, .10); border-color: rgba(106, 207, 115, .30); color: #a4e3aa; }

/* ── THE NIGHT ──────────────────────────────────────────────────────────────
   Painted on html/body directly (same reasoning as parchment: app-theme's
   body::before backdrop must not sit between the sky and the content). The two
   nebula pools echo the home screen's canvas sky, statically — flat app pages
   don't animate their background. */
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  background-image:
    radial-gradient(120% 70% at 78% 0%,  rgba(124, 92, 255, .12) 0%, rgba(124, 92, 255, 0) 55%),
    radial-gradient(100% 60% at 14% 60%, rgba(79, 127, 232, .09) 0%, rgba(79, 127, 232, 0) 55%),
    linear-gradient(180deg, #02010a 0%, #080418 45%, #0d0724 80%, #0a0620 100%);
  background-attachment: fixed;
}
body::before { background-image: none; }

/* ── TYPE — same voices as the home screen. ────────────────────────────────── */
.pf-display {
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: .01em;
}
.pf-display-caps {
  font-family: "Crimson Pro", Georgia, serif;
  font-variant: small-caps;
  letter-spacing: .14em;
  color: var(--wood-deep);
}

/* A drawn rule — the divider, brightest in the middle. */
.pf-rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}