/* ============================================================================
   megalithTheme.css — SINGLE SOURCE OF TRUTH for Megalith UI colors.

   Linked in the <head> of index.html, splash.html, and studio_index.html, so
   every path (gallery, splash→studio in-place, and direct studio_index) reads
   the SAME palette. Change UI colors HERE and nowhere else.

   Rule: do NOT redefine these --mg-* color tokens in any other file
   (studio_index.html inline <style>, studioStyles.js, etc.). Those files should
   only ever reference them via var(--mg-...). A later definition elsewhere would
   silently override this file — that's the duplication this file exists to end.
   ============================================================================ */
:root {
  /* ── PALETTE PRIMITIVES — the raw hues, as "R,G,B" triplets ──────────────────
     Everything else (and the whole UI) derives from these. To recolor the entire
     project, change a triplet here. Used as rgba(var(--mg-cream-rgb), <alpha>) so
     any opacity variant flows from one source.
     (Pure black 0,0,0 and white 255,255,255 stay literal — they're structural
      shadow/highlight, not brand color.) */
  /* FULLY NEUTRAL GRAYSCALE — no cream, no teal, no gold, no color anywhere.
     Every value below is R=G=B. (Functional status colors are further down.) */
  --mg-cream-rgb:     235,235,235;  /* light neutral — lines, wash, glow (was cream 232,226,196) */
  --mg-cream-hi-rgb:  248,248,248;  /* brighter neutral — active/emphasis lines */
  --mg-cream-tx-rgb:  240,240,240;  /* high text — neutral near-white (was cream #ece5c6) */
  --mg-warmwhite-rgb: 235,235,235;  /* neutral off-white — text / tints (was warm 232,228,222) */
  --mg-teal-rgb:      200,200,200;  /* accent — neutral gray (was teal 128,204,188) */
  --mg-gold-rgb:      210,210,210;  /* glow — neutral gray (was gold 219,199,136) */
  --mg-khaki-rgb:     185,185,185;  /* border — neutral gray (was khaki 185,175,134) */
  --mg-ink-rgb:       4,4,4;        /* deepest near-black base — neutral */
  --mg-panel-rgb:     9,9,9;        /* panel / section / active base — neutral */
  --mg-cyan-rgb:      200,200,200;  /* header aberration — neutral (was cyan 77,207,236) */
  --mg-scarlet-rgb:   200,200,200;  /* header aberration — neutral (was red 235,88,55) */
  --mg-txmid-rgb:     235,235,235;  /* mid text — neutral gray/white */
  --mg-txlo-rgb:      235,235,235;  /* low text — neutral gray/white; dimmed via opacity */

  /* ── surfaces ──────────────────────────────────────────────────────────────
     Near-black, neutral. Warmth comes from the panel cream-wash, not these bases. */
  --mg-black:      rgb(var(--mg-ink-rgb));   /* #030505 — deepest, section headers */
  --mg-bg:         #060606;                  /* page / dock — neutral (was #050707) */
  --mg-surface:    #080808;                  /* section bodies, controls — neutral (was #060808) */
  --mg-raised:     #0d0d0d;                  /* inputs, raised buttons — neutral (was #0c0d0d, matches popup tab) */

  /* ── borders (warm khaki / bone) ────────────────────────────────────────── */
  --mg-border:     rgb(var(--mg-khaki-rgb));       /* #b9af86 */
  --mg-border-hi:  rgba(var(--mg-cream-hi-rgb),.86);
  --mg-border-dk:  rgba(var(--mg-khaki-rgb),.16);
  --mg-border-md:  rgba(var(--mg-khaki-rgb),.34);

  /* ── text hierarchy (warm off-white; tiers via opacity, matches popup) ─────── */
  --mg-text-hi:    rgb(var(--mg-cream-tx-rgb));    /* #ece5c6 cream high */
  --mg-text-mid:   rgba(var(--mg-txmid-rgb),.72);
  --mg-text-lo:    rgba(var(--mg-txlo-rgb),.54);
  --mg-text-faint: rgba(var(--mg-txlo-rgb),.28);

  /* ── accents ──────────────────────────────────────────────────────────────── */
  --mg-aqua:       rgba(var(--mg-teal-rgb),.74);
  --mg-aqua-soft:  rgba(var(--mg-teal-rgb),.22);
  --mg-amber-soft: rgba(var(--mg-gold-rgb),.18);
  --mg-red:        rgb(var(--mg-khaki-rgb));

  /* ── active / selected ─────────────────────────────────────────────────────── */
  --mg-active-bg:  rgba(var(--mg-panel-rgb),.84);
  --mg-active-bd:  rgba(var(--mg-cream-rgb),.58);

  /* ── POPUP PANEL TRAY SYSTEM (neutral grays) ─────────────────────────────────
     The popup's info-panel cells/tabs/cards. These are pure neutral gray (R=G=B),
     lighter than the studio's cool near-black trays. Change these to shift the
     popup tray undertone (e.g. give them the same cool base as the studio). */
  --mg-tray-cell:   #141414;   /* key cells / surface (was T.surface) */
  --mg-tray-bg:     #101010;   /* value cells / panel base (was T.bg) */
  --mg-tray-tab:    #0d0d0d;   /* tabs (was T.bgTab) */
  --mg-tray-footer: #0a0a0a;   /* footer (was T.bgFooter) */
  --mg-tray-active: #181818;   /* active tab / card */
  --mg-tray-line:   #282828;   /* dark divider (was T.borderDk) */
  --mg-tray-line-2: #383838;   /* mid divider (was T.borderMd) */

  /* ── deep inks (near-black surface variants) ─────────────────────────────── */
  --mg-ink-2:  #030303;   /* deepest input / tuner background — neutral */
  --mg-ink-3:  #070707;

  /* ── cream variants (bone family) ────────────────────────────────────────── */
  --mg-cream-soft: #ffffff;   /* popup body text / border */
  --mg-cream-hdr:  #ffffff;   /* popup header */
  --mg-cream-hdr2: #ffffff;
  --mg-cream-brt:  #ffffff;   /* brightest */
  --mg-tan:        #ffffff;   /* tuner input text */

  /* ── semantic ────────────────────────────────────────────────────────────── */
  --mg-success:    #9a9a9a;   /* status — neutralized (was green #5a9a78) */
  --mg-success-hi: #b0b0b0;
  --mg-danger:     #909090;   /* error — neutralized (was red #c0392b) */
  --mg-danger-hi:  #b8b8b8;
  --mg-loader:     #cccccc;   /* loader — neutralized (was blue #6cf) */
}


