/**
 * MagnusPrime — 00. Design Tokens
 * Loads site-wide, first, before every other MagnusPrime stylesheet.
 * Pure variables — no selectors. Change a value here, it updates everywhere.
 */

:root{
  /* Base */
  --mp-bg:        #05070b;
  --mp-fg:        rgba(245,248,255,.92);
  --mp-dim:       rgba(245,248,255,.70);
  --mp-faint:     rgba(245,248,255,.45);

  /* Lines / borders */
  --mp-line:      rgba(120,200,255,.18);
  --mp-line-soft: rgba(120,200,255,.14);
  --mp-focus:     rgba(140,220,255,.32);

  /* Energy (brand accent system — cyan primary, violet used sparingly) */
  --mp-cyan:      rgba(140,220,255,.78);
  --mp-cyan-dim:  rgba(140,220,255,.45);
  --mp-violet:    rgba(190,160,255,.78);
  --mp-violet-dim:rgba(190,160,255,.12);

  /* Surfaces */
  --mp-panel:     rgba(10,12,18,.55);
  --mp-panel-deep:rgba(10,12,18,.40);

  /* Shape */
  --mp-radius-panel: 1.5rem;
  --mp-radius-pill:  999px;

  /* Motion */
  --mp-ease: .18s ease;
}

*,*::before,*::after{ box-sizing:border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background: var(--mp-bg) !important;
}
@supports (overflow: clip){
  html, body{ overflow-x:clip; }
}

/* Room for the fixed mini player — applied via body class when a player is present */
body.mp-has-miniplayer{
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

/* Below 768px the mini player reflows to two rows (art+text, then controls
   on their own line below — see mp-sticky-player.php / single-project.php's
   own player CSS), making it noticeably taller than the single-row desktop
   bar. The reserved space above must grow to match, or the taller player
   overlaps the last bit of real page content (e.g. footer social icons). */
@media (max-width: 768px){
  body.mp-has-miniplayer{
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
}