@font-face {
  font-family: 'STALPH';
  src: url('../assets/fonts/STALPH.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --pink-dark:   #f177ae;
  --pink-med:    #f494be;
  --pink-light:  #f0cbd9;
  --yellow:      #fad448;
  --blue:        #6581b8;
  --blue-light:  #9baad1;
  --black:       #231F20;
  --go-live:     #e63946;
  --wallet-green:#2ecc71;
  --white:       #ffffff;
  --off-white:   #fefefe;
  --surface-1:   #f0cbd9;
  --surface-2:   #ffffff;
  --surface-3:   #9baad1;
  --surface-nav: #ffffff;
  --font-display: 'STALPH', Georgia, serif;
  --font-body: var(--font-display);
  --font-ui: var(--font-display);
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --shadow-card:   0 2px 12px rgba(35,31,32,0.10);
  --shadow-pop:    0 6px 24px rgba(241,119,174,0.25);
  --shadow-nav:    0 2px 8px rgba(35,31,32,0.08);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-med:      280ms;
  --dur-slow:     500ms;
  --nav-h: 80px;
  --sidebar-w: 160px;
  
  /* Theme variables - will be overridden by dark-mode.js */
  --body-bg: var(--white);
  --surface-color: var(--white);
  --text-primary: var(--black);
  --text-secondary: rgba(0,0,0,0.6);
  --border-color: rgba(35,31,32,0.12);
  --transition-dur: 0.2s;

  /* Account-type accents */
  --accent-musician:    var(--blue);
  --accent-artist:      var(--pink-dark);
  --accent-creator:     var(--go-live);
  --accent-brand:       var(--yellow);
  --accent-lover:       var(--pink-med);
  --accent-label:       var(--blue-light);
  --accent-vintage:     #c9a96e;
  --accent-studio:      var(--black);

  /* Z-index scale */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(241,119,174,0.45);

  /* Extended shadows */
  --shadow-inset:       inset 0 2px 8px rgba(35,31,32,0.08);
  --shadow-glow-pink:   0 0 20px rgba(241,119,174,0.30);
  --shadow-glow-blue:   0 0 20px rgba(101,129,184,0.30);
  --shadow-glow-yellow: 0 0 20px rgba(250,212,72,0.35);

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  48px;
  --lh-tight:  1.15;
  --lh-base:   1.5;
  --lh-loose:  1.75;
  --ls-tight:  -0.02em;
  --ls-wide:   0.06em;
  --ls-wider:  0.10em;
}

/* Theme is auto-only (clock-driven). Day/night contrast now comes from
   css/sky-theme.css via body[data-sky-lum]. The old .dark-mode override
   block was removed so it can't fight that layer. */

body {
  background: transparent !important;
  color: var(--text-primary) !important;
  transition: color var(--transition-dur) ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
/* Sky fallback on html — shows day-blue if #tp-sky JS never mounts. Body must be transparent so the fixed #tp-sky div shows through. */
html { background: linear-gradient(180deg,#5badf0 0%,#7ec8f8 25%,#b8defa 55%,#eef6fd 100%); }
body { font-family: var(--font-body); background: transparent; color: var(--black); min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img, svg { display: block; max-width: 100%; }
input, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pink-light); }
::-webkit-scrollbar-thumb { background: var(--pink-med); border-radius: var(--radius-pill); }
.stalph { font-family: var(--font-display); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes drip { 0% { transform: translateY(-8px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } }
.anim-fade-up   { animation: fadeUp  var(--dur-med) var(--ease-smooth) both; }
.anim-fade-in   { animation: fadeIn  var(--dur-med) var(--ease-smooth) both; }
.anim-drip      { animation: drip    var(--dur-slow) var(--ease-bounce) both; }
.anim-heartbeat { animation: heartbeat 1.4s ease-in-out infinite; }

/* ── GSAP / GoHollywood motion tokens ──────────────────────────────────────── */
:root {
  /* Durations (seconds — GSAP uses floats, not ms) */
  --gsap-dur-snap:    0.15;
  --gsap-dur-ripple:  0.6;
  --gsap-dur-reveal:  0.9;
  --gsap-dur-prism:   1.2;

  /* Stagger */
  --gsap-stagger-tight: 0.04;
  --gsap-stagger-loose: 0.12;

  /* Eases (CSS equivalents — pass string to GSAP as "power2.out" etc.) */
  --gsap-ease-cosmic:   cubic-bezier(0.34, 1.56, 0.64, 1); /* spring/bounce */
  --gsap-ease-flow:     cubic-bezier(0.4,  0,    0.2,  1); /* standard */
  --gsap-ease-drift:    cubic-bezier(0.25, 1,    0.5,  1); /* decelerate */

  /* Proud Prism LGBTQIA+ intro palette */
  --prism-red:    #e63946;
  --prism-orange: #f9844a;
  --prism-yellow: #fad448;
  --prism-green:  #52b788;
  --prism-blue:   #6581b8;
  --prism-purple: #9b5de5;
  --prism-pink:   #f177ae;
  --prism-fog:    rgba(241, 119, 174, 0.12);

  /* aud-three-sixty Web Audio visualizer */
  --aud360-bg:         rgba(35, 31, 32, 0.92);
  --aud360-bar-color:  #f177ae;
  --aud360-ring-color: #fad448;
  --aud360-glow:       rgba(241, 119, 174, 0.4);
}

/* ── Accessibility: honor the OS "reduce motion" setting platform-wide ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}