/* ============================================================
   Soundspace — design tokens & base styling
   Phase 4 · blocksy-child foundation
   Palette/type ported from the approved mockup (v27).
   Safe global layer: variables, base, reusable components.
   Structural homepage/header/footer styles live in home.css.
   ============================================================ */

:root{
  /* surfaces */
  --bg-950:#05060F; --bg-900:#080A18; --bg-850:#0E1124; --bg-800:#161B34;
  --line:rgba(124,168,255,.24);
  /* accents */
  --green:#00A889; --green-bright:#19CFAC; --teal-neon:#2BD8B6;
  --blue:#6FA8FF; --blue-btn:#86B2FF; --purple:#B79CFF;
  --pink:#F00069; --pink-soft:#FF7DB0; --rose-deep:#9C2F5B;
  --mint:#CFE3FF; --cream:#FFFCEF; --ink:#070A18;
  /* text */
  --text:#E8ECF6; --text-dim:#9FB0C9;
  /* layout */
  --maxw:1240px; --gut:24px;
  /* type */
  --display:"Syne",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",monospace;
}

/* base ---------------------------------------------------------- */
html{overflow-x:hidden}
body{
  background:var(--bg-900);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--cream)}

/* reusable: section kicker (mono // label) --------------------- */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-neon)}

/* reusable: HUD command buttons ------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:13.5px;padding:13px 26px;min-height:46px;border:0;cursor:pointer;transition:.18s;text-transform:uppercase;letter-spacing:.08em;overflow:hidden;text-decoration:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn::before{content:"\00BB";font-size:1.05em;opacity:.8;margin-right:.05em}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-16deg);transition:left .55s ease;pointer-events:none}
.btn:hover::after{left:150%}
.btn--blue{background:linear-gradient(125deg,#A6CBFF,#6FA8FF 55%,#5E96F0);color:var(--ink);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -3px 9px rgba(7,10,24,.22)}
.btn--blue:hover{transform:translateY(-2px);filter:drop-shadow(0 0 18px rgba(134,178,255,.6))}
.btn--out{color:var(--mint);border:1.5px solid transparent;background:linear-gradient(var(--bg-850),var(--bg-850)) padding-box,linear-gradient(120deg,var(--blue),var(--teal-neon) 55%,var(--purple)) border-box}
.btn--out:hover{transform:translateY(-2px);filter:drop-shadow(0 0 14px rgba(43,216,182,.45))}
.btn--pink{background:linear-gradient(125deg,#FFA6C9,#FF4D94 55%,#F0327F);color:var(--ink);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -3px 9px rgba(7,10,24,.22)}
.btn--pink:hover{transform:translateY(-2px);filter:drop-shadow(0 0 18px rgba(255,77,148,.6))}
.btn:focus-visible{outline:3px solid var(--mint);outline-offset:3px}