/* ==========================================================================
   Miss Pepper AI — Design Tokens
   Source of truth: miss-pepper-art-bible.md
   Every downstream section must draw from these variables — no ad-hoc hex.
   ========================================================================== */

:root {
  /* --- Base field ------------------------------------------------------- */
  --mp-navy:        #05111b;              /* deep night navy — dominant field   */
  --mp-surface:     #06131e;              /* blue-black surface                 */
  --mp-ink:         #f4f7fb;              /* near-white text / logo             */
  --mp-muted:       rgba(232, 238, 245, 0.72); /* muted text — never pure gray  */

  /* --- Brand & signal --------------------------------------------------- */
  --mp-blue:        #006fbe;              /* Miss Pepper blue — brand           */
  --mp-blue-active: #168fd6;              /* active / status blue               */
  --mp-orange:      #ff6b00;              /* results / CTA / performance        */
  --mp-orange-hot:  #ff7d16;              /* hot orange highlight               */
  --mp-green:       #26d091;              /* positive movement / growth only    */

  /* --- Glass & linework ------------------------------------------------- */
  --mp-line:          rgba(162, 207, 231, 0.22); /* interface line             */
  --mp-panel-border:  rgba(151, 211, 243, 0.27); /* panel border               */
  --mp-panel-fill-1:  rgba(7, 27, 43, 0.56);      /* panel fill (top)           */
  --mp-panel-fill-2:  rgba(5, 20, 34, 0.36);      /* panel fill (bottom)        */
  --mp-panel-blur:    8px;

  /* --- Typography ------------------------------------------------------- */
  --mp-display: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif; /* display */
  --mp-body:    "DM Sans", "Segoe UI", Arial, Helvetica, sans-serif; /* body/UI */

  --mp-tracking-copy: 0.12em;  /* supporting copy — wide but not excessive     */
  --mp-lh-headline:   1.03;    /* tight leading for hero headlines             */

  /* --- Radius & elevation ---------------------------------------------- */
  --mp-radius-cta:   0.78rem;
  --mp-radius-panel: 0.82rem;
  --mp-shadow-panel: 0 1.4rem 4rem rgba(0, 0, 0, 0.25),
                     inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* --- CTA gradient + border ------------------------------------------- */
  --mp-cta-grad:   linear-gradient(180deg, var(--mp-orange-hot), var(--mp-orange));
  --mp-cta-border: rgba(255, 138, 35, 0.85);
  --mp-cta-glow:   0 1.2rem 3.8rem rgba(255, 100, 0, 0.22),
                   inset 0 1px 0 rgba(255, 255, 255, 0.22);

  /* --- Layout rhythm (Art Bible spacing rules) ------------------------- */
  --mp-edge-left:  clamp(1.35rem, 5.85vw, 7rem);  /* left content inset        */
  --mp-edge-top:   clamp(2.15rem, 7vw, 7.55rem);  /* top logo inset            */
  --mp-shell-max:  84rem;                          /* wide-band content max     */
  --mp-topbar-h:   4.6rem;                         /* sticky header bar height  */

  /* --- Motion ----------------------------------------------------------- */
  --mp-ease:        cubic-bezier(.2, .78, .2, 1);  /* premium snap             */
  --mp-ease-scan:   cubic-bezier(.16, .84, .28, 1);
}