/* =====================================================================
   JPP MUSIC • 01 — DESIGN TOKENS  ("THE KNOBS")  ·  DARK SKIN
   ---------------------------------------------------------------------
   This is the ONE place to change the look of the whole site.
   Every color, the gold, the spacing, the highlight, the button shape —
   all defined here once, used everywhere else by name.

   JPP is a DARK / black-background art-music skin (the inverse of JMS's
   white theme). Derived from the site's existing palette: GOLD accent
   (#f6c945) + a PURPLE secondary on near-black, light text, hairline
   light borders, and GLOW instead of drop-shadow on dark surfaces.

   Want the gold warmer? change --jms-gold.
   Page darker? change --jms-page-bg.   Panels lighter? --jms-panel.

   NOTE: variable names stay --jms-* (internal identifiers only — they do
   NOT collide across sites and renaming them buys nothing). Only the
   VALUES invert for dark. PHP handles/functions are rebranded jpp-* in
   functions.php where collisions actually matter.
   ===================================================================== */

:root{

  /* ---- INK / TEXT  (LIGHT on dark) ------------------------------- */
  --jms-ink:        rgba(255,255,255,.90);  /* primary body text       */
  --jms-ink-2:      #ffffff;                /* headings / emphasis     */
  --jms-muted:      rgba(255,255,255,.66);  /* secondary text          */

  /* ---- SURFACES  (near-black page, elevated dark panels) --------- */
  --jms-page-bg:    #0d0e13;                /* site background base (NEAR-BLACK) */
  --jms-page-grad:  linear-gradient(0deg,#010101 0%,#202020 94%); /* LIVE JPP bg: subtle near-black→#202020 (measured 2026-06-09) */
  --jms-panel:      #16171e;                /* card / panel background — a subtle lift */
  --jms-panel-2:    #1c1e27;                /* alt / hover surface     */
  --jms-panel-tl:   rgba(255,255,255,.03);  /* translucent panel wash (matches current site) */
  --jms-panel-tl-2: rgba(255,255,255,.05);  /* translucent hover wash  */

  /* ---- LINES / BORDERS  (hairline LIGHT) ------------------------- */
  --jms-line:        rgba(255,255,255,.18);  /* default borders (live JPP panel border) */
  --jms-line-strong: rgba(255,255,255,.26);  /* emphasized borders     */
  --jms-line-ink:    rgba(255,255,255,.85);  /* strong light keyline   */

  /* ---- BRAND GOLD  (accent — brightens on hover for dark) -------- */
  --jms-gold:       #f6c945;                /* brand gold              */
  --jms-gold-2:     #f9d94d;                /* gold hover — BRIGHTER on dark */
  --jms-gold-3:     #ffd166;                /* soft gold alt           */
  --jms-gold-wash:  rgba(246,201,69,.12);   /* faint gold hover fill   */
  --jms-gold-line:  rgba(246,201,69,.55);   /* gold hairline / focus   */

  /* ---- PURPLE  (secondary accent — JPP's signature) -------------- */
  --jms-purple:       #5d2488;              /* deep purple (menu bg etc) */
  --jms-purple-light: #e9b7ff;              /* light-purple text/link    */
  --jms-purple-grad:  linear-gradient(180deg,#bf5bcc 3%,#4c1a4c 92%); /* pill gradient (home buttons) */

  /* ---- HIGHLIGHTS (the marker chip look) ------------------------- */
  --jms-hl:         #ffd400;                /* title highlight chip    */
  --jms-hl-soft:    #f6c945;               /* softer inline highlight */

  /* ---- BUTTONS — gold (JPP's primary action = gold OUTLINE pill;
          the full-fill face below drives generic wp:button) -------- */
  --jms-btn-face:   #f6c945;                /* CTA fill (generic gutenberg button) */
  --jms-btn-hover:  #f9d94d;                /* hover — brighter        */

  /* ---- SHADOWS / GLOW — on dark, drop-shadow is invisible, so we
          use deeper shadow + an optional gold glow for hover -------- */
  --jms-shadow:     0 2px 8px rgba(0,0,0,.50), 0 12px 32px rgba(0,0,0,.45);
  --jms-shadow-sm:  0 2px 6px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.38);
  --jms-shadow-lg:  0 4px 12px rgba(0,0,0,.55), 0 22px 52px rgba(0,0,0,.55);
  --jms-glow:       0 0 0 1px var(--jms-gold-line), 0 6px 22px rgba(246,201,69,.18);

  /* ---- SHAPE ------------------------------------------------------ */
  --jms-radius:     14px;                   /* cards / panels (live JPP = 14px) */
  --jms-radius-btn: 14px;                   /* buttons                 */
  --jms-radius-sm:  10px;                   /* inputs                  */

  /* ---- LAYOUT LANES ---------------------------------------------- */
  --jms-lane:       980px;                  /* main content width      */
  --jms-lane-wide:  1080px;                 /* rule / CTA width         */
  --jms-lane-form:  760px;                  /* form width              */
  --jms-pad-x:      14px;                   /* horizontal page padding */
  --jms-pad-x-sm:   10px;                   /* mobile padding          */

  /* ---- BUTTONS (CTA system) -------------------------------------- */
  --jms-btn-h:      52px;                    /* button height           */
  --jms-btn-min:    200px;                   /* button min-width        */

  /* ---- INLINE LINKS  (light text, gold underline on dark) -------- */
  --jms-link:        var(--jms-ink);
  --jms-link-hover:  var(--jms-gold-2);
  --jms-uline:       rgba(246,201,69,.70);
  --jms-uline-hover: rgba(249,217,77,.95);

  /* ---- TYPE (theme.json declares families; sizes are clamps) ----- */
  --jms-h1:   clamp(32px, 4.2vw, 52px);
  --jms-h2:   clamp(22px, 2.6vw, 34px);

  /* ---- BODY LEADING — the ONE knob for body-copy line-height ----- */
  --jms-leading: 1.6;
  --jms-line-height: var(--jms-leading);   /* legacy alias */
}