/* ============================================================
   MRMICHAELPAULA.CLOUD — Cosmic theme (final color revamp, 2026-10-01)
   His spec: black base, royal blue + royal red blended,
   neon green undertones (the spark), white to balance.
   Loaded LAST on every page. Color layer only — layout untouched.
   NOTE: vars use !important because the homepage redefines :root
   in a body-level <style> block.
   ============================================================ */
:root{
  /* shared homepage + albums variable system */
  --navy:#04050c !important;
  --navy-2:#0a0d1a !important;
  --gold:#2bff88 !important;
  --gold-deep:#1fd973 !important;
  --gold-soft:rgba(43,255,136,.08) !important;
  --bg:#04050c !important;
  --bg-lift:#0a0d1a !important;
  --bg-lift2:#0d1122 !important;
  --fg:#f4f6ff !important;
  --fg-mid:#b9c4d8 !important;
  --fg-dim:#8fa0b5 !important;
  --vein:#3b5bff !important;
  --vein-bright:#2bff88 !important;
  --neon:#2bff88 !important;
  --violet:#2440d8 !important;
  --rule:rgba(59,91,255,.30) !important;
  --rule-soft:rgba(59,91,255,.16) !important;
  /* session page variable system */
  --cream:#f4f6ff !important;
  --ink:#04050c !important;
  --card:rgba(12,16,32,.78) !important;
  --line:rgba(43,255,136,.32) !important;
  /* dashboard variable system */
  --paper:#0a0d1a !important;
  --paper2:#0d1122 !important;
  --muted:#b9c4d8 !important;
  --gold2:#7dffb8 !important;
  --gold-hair:rgba(43,255,136,.38) !important;
  --soft:#0d1122 !important;
  --red:#ff6b5e !important;
  --red-deep:#c21336 !important;
  --green:#2bff88 !important;
}
html{color-scheme:dark !important;}
body{
  background-color:#04050c !important;
  background-image:
    radial-gradient(1100px 520px at 12% -4%, rgba(36,64,216,.20), transparent 60%),
    radial-gradient(900px 480px at 88% 108%, rgba(194,19,54,.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1px 1px at 68% 8%, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 64%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(1px 1px at 48% 42%, rgba(43,255,136,.32), transparent 60%) !important;
  background-attachment:fixed;
  color:#f4f6ff !important;
}

/* ---------- header / vein / hero / footer ---------- */
header{
  background:rgba(4,5,12,.94) !important;
  border-bottom:3px solid !important;
  border-image:linear-gradient(90deg,#2440d8,#c21336) 1 !important;
}
.vein-top{
  background:linear-gradient(90deg,#2440d8,#2bff88,#c21336) !important;
}
.hero{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(36,64,216,.30), transparent 65%),
    radial-gradient(700px 380px at 85% 100%, rgba(194,19,54,.22), transparent 60%),
    #04050c !important;
}
footer{
  background:#020308 !important;
  border-top:4px solid !important;
  border-image:linear-gradient(90deg,#2440d8,#c21336) 1 !important;
}

/* ---------- buttons / CTAs ---------- */
.pill{
  background:linear-gradient(135deg,#2440d8,#c21336) !important;
  color:#ffffff !important;
  box-shadow:0 8px 24px rgba(36,64,216,.35) !important;
}
.pill.hollow{
  background:transparent !important;
  border:1.5px solid #2bff88 !important;
  color:#2bff88 !important;
  box-shadow:none !important;
}
.pill.hollow:hover{background:rgba(43,255,136,.12) !important;}
.edge{
  background:linear-gradient(135deg,#2440d8,#c21336) !important;
  color:#ffffff !important;
  box-shadow:-4px 0 26px rgba(36,64,216,.45) !important;
}
.mail{
  background:linear-gradient(135deg,#2440d8,#c21336) !important;
  color:#ffffff !important;
}

/* ---------- nav ---------- */
nav.main a{color:#c9d4e2 !important;}
nav.main a:hover,nav.main a.on{color:#2bff88 !important;}
nav.main a.on::after{background:#2bff88 !important;}
.mark{color:#ffffff !important;}

/* ---------- type accents ---------- */
.eyebrow,.biocard .label,.photo .eyebrow{color:#2bff88 !important;}
.dlist li::before,.blist li::before{color:#2bff88 !important;}
.social-row a:hover{color:#2bff88 !important;border-color:#2bff88 !important;}
footer .flinks a:hover{color:#2bff88 !important;}

/* ---------- forms ---------- */
.cform input,.cform select,.cform textarea{
  background:#0a0d1a !important;color:#f4f6ff !important;
  border-color:rgba(59,91,255,.40) !important;
}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  border-color:#2bff88 !important;
  box-shadow:0 0 0 3px rgba(43,255,136,.15) !important;
}

/* ---------- music player ---------- */
#angelic-player{background:#04050c !important;border-color:#2bff88 !important;}
#angelic-playbtn{
  background:linear-gradient(135deg,#2440d8,#c21336) !important;color:#ffffff !important;
}
#angelic-prev,#angelic-next,#angelic-min,#angelic-volbtn{
  border-color:#2bff88 !important;color:#2bff88 !important;
}
#angelic-track{color:#f4f6ff !important;}
#angelic-seekfill{background:#2bff88 !important;}
#angelic-buy{color:#2bff88 !important;border-color:#2bff88 !important;}
#angelic-buy:hover{background:#2bff88 !important;color:#04050c !important;}