/* ═══════════════════════════════════════════════════════════════════════
   jointheparty.ai — SHARED THEME TOKENS  ·  theme.css
   Single source of truth for the two party times. Edit here → every page
   that links this file updates on next load.

     10pm (default) — Pool Party Flamingo Neon. Colour EMITS light into a
                      dark room. This is the brand; it is the default for
                      every visitor, always.
     2pm  (opt-in)  — Pool Party, 2pm. Colour can't emit in daylight, so it
                      SOAKS UP sun and CASTS. Same font, same motion, same
                      flamingo, same lime highlighter — eight hours earlier.

   USAGE (both lines, in <head>, BEFORE the page's own <style>):
     <link rel="stylesheet" href="/jointheparty-assets/theme.css">
     <script src="/jointheparty-assets/theme.js"></script>

   WHY THE `html[data-theme="day"]` SELECTOR: specificity (0,1,1) beats a
   plain `:root` (0,1,0), so a page keeps its own inline dark token block
   and day mode still wins — even though the page's <style> loads later.
   That is deliberate. Do NOT weaken it to `:root[data-theme="day"]`.

   THE ONE RULE WHEN ADDING A PAGE: neon hues are GRAPHICS (fills, art,
   the ball). If a hue is carrying a WORD, it must use `--ink-pink` /
   `--ink-aqua` / `--ink-purple`, which deepen in day mode. Raw `#00E5CC`
   is 1.51:1 on Warm White — invisible. Aliased surface tokens are handled
   below; text colour is the one thing this file cannot fix for you.

   See the `jointheparty-brand` skill for the full rationale.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 10pm — the default. Values match the locked homepage kit exactly. ── */
:root{
  --midnight:#08050E;
  --midnight-2:#0e0916;
  --pink:#FF4D9A;
  --aqua:#00E5CC;
  --purple:#BF5FFF;
  --lime:#E0FF4F;
  --white:#FAF8F3;
  --muted:#b7b0c4;
  --muted-2:#7d768c;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  /* text-safe hues — at 10pm the neon IS the text colour */
  --ink-pink:#FF4D9A;
  --ink-aqua:#00E5CC;
  --ink-purple:#BF5FFF;
  --ink-lime:#E0FF4F;
  /* emphasis: dark mode emits light into the room */
  --emph-pink:0 0 8px var(--pink),0 0 26px rgba(255,77,154,.45);
  --emph-aqua:0 0 8px var(--aqua),0 0 26px rgba(0,229,204,.45);
  --emph-purple:0 0 8px var(--purple),0 0 26px rgba(191,95,255,.45);
  --shadow-card:0 18px 40px rgba(0,0,0,.5);
  --shadow-thumb:0 8px 22px -10px rgba(255,77,154,.5);
  --flamingo-shadow:3px 5px 0 rgba(8,5,14,.55);
  --nav-bg:rgba(8,5,14,.7);
  --nav-bg-scrolled:rgba(8,5,14,.88);
  --on-lime:#08050E;   /* lime is lime in both modes — its text never flips */
  --on-neon:#2a0016;   /* text on a saturated neon FILL (pink chip, CTA). Also fixed:
                          the fill doesn't flip, so its text mustn't either. Using
                          --midnight here is the classic bug — it inverts to warm
                          white in day mode and drops the chip to 2.92:1. */
  --scheme:dark;
}

/* ══════════════════════════════════════════════════════════════════════
   2pm — the daylight inversion.
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme="day"]{
  --midnight:#FAF8F3;        /* sun-bleached deck, never stark white */
  --midnight-2:#FFFFFF;      /* raised surface: paper in direct sun */
  --white:#08050E;           /* ink */
  --muted:#5B5368;           /* 6.87:1 */
  --muted-2:#726A80;         /* 4.84:1 */
  --line:rgba(8,5,14,.10);
  --line-2:rgba(8,5,14,.20);
  --ink-pink:#D61E78;        /* 4.58:1 */
  --ink-aqua:#00806F;        /* 4.58:1 */
  --ink-purple:#7A2ED6;      /* 6.20:1 */
  /* Lime has no bright deep twin — a legible lime IS an olive. #5F6B00 keeps the
     yellow-green family at 5.51:1. Note this is for lime used as TEXT only; lime
     as the HIGHLIGHTER (solid bar, --on-lime text) is unchanged in both modes. */
  --ink-lime:#5F6B00;        /* 5.51:1 */

  /* Emphasis inverted. At 10pm the word emits into the dark; at 2pm it can't —
     so it BLOOMS a little and casts. A wide glow on light fills the line box
     and reads as a slab, so the halo stays TIGHT and the depth comes from a
     soft coloured shadow dropping onto the deck, the way 2pm sun works.
     Do not widen the 13px halo. That is the whole trick. */
  --emph-pink:0 1px 0 rgba(250,248,243,.85),0 0 13px rgba(255,77,154,.42),0 6px 16px rgba(214,30,120,.20);
  --emph-aqua:0 1px 0 rgba(250,248,243,.85),0 0 13px rgba(0,229,204,.5),0 6px 16px rgba(0,128,111,.22);
  --emph-purple:0 1px 0 rgba(250,248,243,.85),0 0 13px rgba(191,95,255,.42),0 6px 16px rgba(122,46,214,.22);

  /* daylight shadows are cast, not glowing — shorter, warmer, more opaque */
  --shadow-card:0 16px 34px -14px rgba(122,46,214,.32);
  --shadow-thumb:0 8px 18px -8px rgba(214,30,120,.45);
  --flamingo-shadow:3px 5px 0 rgba(214,30,120,.42);
  --nav-bg:rgba(250,248,243,.72);
  --nav-bg-scrolled:rgba(250,248,243,.9);
  --scheme:light;
  color-scheme:light;

  /* ── Compatibility aliases ──────────────────────────────────────────
     Older pages named their surfaces differently before the kit was
     locked. Mapping them here means those pages get day mode by linking
     this file, with no edit to their own :root block.
     ONLY surface/ink/hairline tokens are aliased. Neon hue tokens
     (--pink/--aqua/--purple/--flamingo) are deliberately NOT aliased:
     they are graphics, and a deep-pink button fill drops the CTA ink to
     3.89:1. Neon fills stay neon in daylight; only TEXT deepens. */
  --midnight2:#FFFFFF;       /* player.css spelling of --midnight-2 */
  --panel:#FFFFFF;           /* prompt-party / challenge / who-is-disco / etc. */
  --panel-2:#F7F3EC;         /* the more-raised panel inverts to slightly warmer */
  --line2:rgba(8,5,14,.18);  /* player.css spelling of --line-2 */
  --muted-dark:#5B5368;
  --muted-dark2:#726A80;
}

/* ── Room light: sunlight pooling instead of neon spill. Same choreography,
      same hue order, same 1200ms crossfade — just readable on white, plus a
      fixed warm sun off-frame top-right. It's 2pm; the source never moves. ── */
html[data-theme="day"] .rl-pink{background:
  radial-gradient(880px 620px at 78% 8%, rgba(255,77,154,.20), transparent 66%),
  radial-gradient(680px 520px at 10% 88%, rgba(191,95,255,.13), transparent 70%)}
html[data-theme="day"] .rl-aqua{background:
  radial-gradient(880px 620px at 20% 12%, rgba(0,229,204,.22), transparent 66%),
  radial-gradient(680px 520px at 88% 80%, rgba(255,77,154,.12), transparent 70%)}
html[data-theme="day"] .rl-purple{background:
  radial-gradient(880px 620px at 72% 16%, rgba(191,95,255,.18), transparent 66%),
  radial-gradient(680px 520px at 12% 84%, rgba(0,229,204,.12), transparent 70%)}
html[data-theme="day"] .rl-lime{background:
  radial-gradient(880px 620px at 50% 22%, rgba(224,255,79,.30), transparent 66%),
  radial-gradient(680px 520px at 84% 86%, rgba(255,77,154,.12), transparent 70%)}
html[data-theme="day"] .room-light::after{content:"";position:absolute;inset:0;
  background:radial-gradient(520px 380px at 88% -6%, rgba(255,241,180,.55), transparent 68%)}

/* ── Disco ball at 2pm: it no longer emits, it CATCHES the sun. ── */
html[data-theme="day"] .rays{opacity:.34;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,214,102,.20) 0deg 7deg, transparent 7deg 26deg,
    rgba(255,77,154,.14) 26deg 33deg, transparent 33deg 52deg,
    rgba(0,229,204,.13) 52deg 59deg, transparent 59deg 78deg)}
html[data-theme="day"] .disco .ball{
  box-shadow:0 26px 50px -18px rgba(122,46,214,.45), inset 0 0 50px rgba(255,255,255,.30)}
html[data-theme="day"] .disco .grid{background:
  repeating-linear-gradient(0deg, rgba(8,5,14,.16) 0 2px, transparent 2px 22px),
  repeating-linear-gradient(90deg, rgba(8,5,14,.16) 0 2px, transparent 2px 22px)}
html[data-theme="day"] .disco .halo{background:
  radial-gradient(circle,rgba(255,241,180,.55),rgba(255,77,154,.16) 45%,transparent 66%)}
html[data-theme="day"] .disco .cord{background:linear-gradient(rgba(8,5,14,0),var(--line-2))}

/* ── Emphasis primitives (pages may override; these are the defaults) ── */
.glow-pink{color:var(--ink-pink);text-shadow:var(--emph-pink)}
.glow-aqua{color:var(--ink-aqua);text-shadow:var(--emph-aqua)}
.glow-purple{color:var(--ink-purple);text-shadow:var(--emph-purple)}

/* ── Theme toggle. Add `data-theme-toggle` to any button; theme.js wires it. ── */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;cursor:pointer;padding:0;
  background:transparent;border:1px solid var(--line-2);border-radius:999px;
  color:var(--muted);font-size:17px;line-height:1;
  transition:color .15s,border-color .2s,transform .15s cubic-bezier(.4,0,.2,1)}
.theme-toggle:hover{color:var(--ink-pink);border-color:var(--ink-pink);transform:translateY(-2px)}
.theme-toggle .t-day{display:none}
html[data-theme="day"] .theme-toggle .t-day{display:block}
html[data-theme="day"] .theme-toggle .t-night{display:none}

/* Floating variant, for pages with no site header to hang a toggle in. */
.theme-toggle-float{position:fixed;right:18px;bottom:18px;z-index:400;
  background:var(--midnight-2);box-shadow:var(--shadow-card)}
@media print{.theme-toggle,.theme-toggle-float{display:none}}
