/*
  SonnySounds / artist-site theme controls
  =======================================

  This file is the edit map for the visual identity of the site.
  The page CSS files still handle layout, sizing, and page-specific structure.
  This file controls what things look like.

  How to edit safely:
  1. Start with Foundation if you want to change the whole artist identity.
  2. Use Component tokens if only one kind of UI should change everywhere.
  3. Use Page tokens if one page needs to break from the global style.
  4. Avoid changing colors inside media queries. Mobile should inherit these
     same tokens unless a token explicitly says mobile is different.

  Token naming rule:
  --color-*     raw colors and gradients
  --surface-*   backgrounds, borders, shadows
  --header-*    logo/nav/header controls
  --hero-*      eyebrow, title, emphasis, intro controls
  --button-*    all normal CTA buttons
  --social-*    connect/social icon buttons
  --release-*   release page/player/list controls
  --lesson-*    lesson form controls
  --product-*   merch card controls
  --show-*      shows list/ticket controls
*/

:root {
  /* Foundation: raw artist palette. Change these first for a new artist. */
  --color-bg: #050408;
  --color-bg-mid: #0b0714;
  --color-bg-deep: #170721;
  --color-ink: #fff7ff;
  --color-logo-white: #fefefe;
  --color-ink-strong: var(--color-logo-white);
  --color-muted: #d5c6dd;
  --color-soft: #ac9bb4;
  --color-soft-pink: #ffc2f5;
  --color-soft-pink-strong: #ffc8f3;
  --color-hot-pink: #ff3fc8;
  --color-accent-pink: #ff73dc;
  --color-purple: #8f5cff;
  --color-violet: #4f22d8;
  --color-primary-button-edge: #5715cf;
  --color-line: rgba(255,255,255,.1);

  --gradient-page-bg:
    radial-gradient(circle at 83% 14%, rgba(255,63,200,.22), transparent 34rem),
    radial-gradient(circle at 15% 18%, rgba(143,92,255,.22), transparent 30rem),
    radial-gradient(circle at 70% 95%, rgba(255,63,200,.08), transparent 32rem),
    linear-gradient(135deg, #050408 0%, #0b0714 45%, #170721 100%);
  --gradient-shell-bg:
    radial-gradient(circle at 82% 18%, rgba(255,63,200,.18), transparent 28rem),
    radial-gradient(circle at 26% 0%, rgba(143,92,255,.16), transparent 28rem),
    linear-gradient(135deg, rgba(5,5,14,.92), rgba(13,8,25,.9) 55%, rgba(24,7,34,.86));
  --gradient-panel-bg:
    linear-gradient(145deg, rgba(6,7,18,.84), rgba(17,9,31,.9));
  --gradient-primary-text: linear-gradient(120deg, #ff3fc8 0%, #9b26d9 42%, #4411b8 100%);
  --gradient-primary-text-start: #ff3fc8;
  --gradient-primary-text-mid: #9b26d9;
  --gradient-primary-text-end: #4411b8;
  --gradient-primary-button: linear-gradient(90deg, #ff3fc8 0%, #d72bd5 24%, #9b35f0 52%, #5715cf 72%, #5715cf 100%);
  --gradient-primary-line: linear-gradient(90deg, var(--color-hot-pink), var(--color-purple));
  --gradient-scrollbar: linear-gradient(180deg, var(--color-hot-pink), var(--color-purple));

  /* Legacy aliases used by older page CSS. Keep these until the page files are fully collapsed. */
  --bg: var(--color-bg);
  --text: var(--color-ink);
  --muted: var(--color-muted);
  --soft: var(--color-soft);
  --pink: var(--color-hot-pink);
  --purple: var(--color-purple);
  --violet: var(--color-violet);
  --line: var(--color-line);

  /* Page frame and global surfaces. */
  --page-bg: var(--gradient-page-bg);
  --page-grid-line: rgba(255,255,255,.025);
  --page-grid-line-vertical: rgba(255,255,255,.018);
  --page-vignette: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.24) 76%, rgba(0,0,0,.78) 100%);
  --shell-border: 1px solid rgba(255,91,220,.34);
  --shell-bg: var(--gradient-shell-bg);
  --shell-shadow: 0 32px 120px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.035);
  --panel-border: 1px solid rgba(255,91,220,.18);
  --panel-bg: var(--gradient-panel-bg);
  --panel-shadow: 0 20px 60px rgba(0,0,0,.28);

  /* Header and navigation. */
  --header-bg: rgba(5,5,14,.72);
  --header-border: 1px solid rgba(255,255,255,.06);
  --header-logo-main-color: var(--color-ink);
  --header-logo-accent-color: var(--color-hot-pink);
  --header-logo-accent-shadow: none;
  --header-nav-link-color: rgba(255,194,245,.84);
  --header-nav-hover-color: var(--color-ink-strong);
  --header-nav-hover-shadow: none;

  /* Hero typography. These are the knobs Sonny has been tuning. */
  --hero-eyebrow-color: var(--color-accent-pink);
  --hero-eyebrow-shadow: none;
  --hero-title-main-color: var(--color-soft-pink);
  --hero-title-main-shadow: none;
  /* Hero emphasis uses color stops, not a whole background token, so Safari cannot collapse it to black. */
  --hero-title-emphasis-start: var(--gradient-primary-text-start);
  --hero-title-emphasis-mid: var(--gradient-primary-text-mid);
  --hero-title-emphasis-end: var(--gradient-primary-text-end);
  --hero-title-emphasis-gradient: linear-gradient(120deg, var(--hero-title-emphasis-start) 0%, var(--hero-title-emphasis-mid) 42%, var(--hero-title-emphasis-end) 100%);
  --hero-title-emphasis-filter: none;
  --hero-copy-color: rgba(255,194,245,.78);
  --accent-line-bg: var(--gradient-primary-line);
  --accent-line-shadow: none;

  /* General section/card headings. Keep these in the SonnySounds soft-pink family. */
  --section-title-color: var(--color-soft-pink-strong);
  --section-note-color: rgba(255,194,245,.56);
  --card-title-color: var(--color-soft-pink-strong);
  --card-body-color: rgba(255,194,245,.76);
  --tag-bg: rgba(255,63,200,.13);
  --tag-color: var(--color-soft-pink-strong);

  /* Buttons. Primary controls Open SoundCloud, Open Twitch, Prepare Lesson Request, etc. */
  --button-text-color: var(--color-logo-white);
  --button-border: 1px solid rgba(255,255,255,.13);
  --button-bg: rgba(255,255,255,.055);
  --button-shadow: none;
  --button-primary-bg-color: var(--color-primary-button-edge);
  --button-primary-bg-image: var(--gradient-primary-button);
  --button-primary-border-color: var(--color-primary-button-edge);
  --button-primary-shadow: none;
  --button-outline-text-color: var(--color-logo-white);
  --button-outline-border-color: rgba(255,122,221,.64);
  --button-outline-bg: rgba(12,7,22,.54);
  --button-disabled-text-color: rgba(255,194,245,.82);
  --button-disabled-border-color: rgba(255,122,221,.46);

  /* Home connect/social controls. Platform colors are available for hover or full-color modes. */
  --social-bg: rgba(255,255,255,.055);
  --social-border: 1px solid rgba(255,255,255,.12);
  --social-icon-color: var(--color-logo-white);
  --social-hover-border-color: rgba(255,63,200,.48);
  --social-hover-color: var(--color-ink-strong);
  --social-soundcloud-color: #ff7700;
  --social-instagram-color: #ff4fd8;
  --social-tiktok-color: var(--color-logo-white);
  --social-youtube-color: #ff2d2d;
  --social-twitch-color: #a970ff;
  --social-facebook-color: #5c8dff;
  --social-threads-color: var(--color-logo-white);
  --social-discord-color: #8ea1ff;

  /* Releases. */
  --release-title-main-color: var(--color-soft-pink);
  --release-title-emphasis-start: var(--gradient-primary-text-start);
  --release-title-emphasis-mid: var(--gradient-primary-text-mid);
  --release-title-emphasis-end: var(--gradient-primary-text-end);
  --release-meta-color: rgba(255,194,245,.62);
  --release-kicker-color: rgba(255,194,245,.46);
  --release-selector-bg: rgba(255,255,255,.045);
  --release-selector-active-bg: rgba(255,255,255,.07);
  --release-selector-border: 1px solid rgba(255,255,255,.075);
  --release-selector-active-border-color: rgba(255,63,200,.44);
  --release-play-bg: linear-gradient(120deg, var(--color-hot-pink), var(--color-purple));
  --release-play-shadow: none;
  --release-badge-color: var(--color-soft-pink-strong);

  /* Lessons/forms. */
  --lesson-pill-bg: rgba(255,255,255,.045);
  --lesson-pill-border: 1px solid rgba(255,255,255,.075);
  --lesson-pill-color: rgba(255,194,245,.76);
  --form-field-bg: rgba(4,4,12,.62);
  --form-field-border: 1px solid rgba(255,255,255,.12);
  --form-field-text: rgba(255,194,245,.82);
  --form-field-placeholder: rgba(255,194,245,.35);
  --form-label-color: rgba(255,194,245,.82);
  --form-focus-border-color: rgba(255,63,200,.55);
  --form-focus-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  --form-upload-border: 1px dashed rgba(255,91,220,.34);

  /* Merch/product cards. */
  --product-card-bg: rgba(255,255,255,.04);
  --product-card-border: 1px solid rgba(255,255,255,.09);
  --product-art-bg: linear-gradient(135deg, rgba(143,92,255,.20), rgba(5,4,8,.45));
  --product-title-color: var(--color-soft-pink-strong);
  --product-title-shadow: none;
  --product-price-color: var(--color-soft-pink-strong);
  --product-meta-color: rgba(255,194,245,.57);
  --product-status-color: rgba(255,194,245,.48);

  /* Shows. */
  --show-row-bg: linear-gradient(90deg, rgba(255,63,200,.045), rgba(143,92,255,.025), transparent);
  --show-date-color: var(--color-logo-white);
  --show-title-color: var(--color-soft-pink-strong);
  --show-meta-color: rgba(255,194,245,.55);
  --show-location-color: rgba(255,194,245,.84);
  --ticket-bg: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  --ticket-border: 1px solid rgba(255,255,255,.18);
  --ticket-hover-bg: linear-gradient(120deg, rgba(255,63,200,.72), rgba(143,92,255,.66));
  --ticket-hover-border-color: rgba(255,63,200,.5);
  --ticket-unavailable-bg: rgba(255,255,255,.055);
  --ticket-unavailable-border: 1px solid rgba(255,255,255,.10);
  --ticket-unavailable-color: rgba(255,247,255,.48);

  /* Footer. */
  --footer-bg: rgba(8,9,22,.58);
  --footer-border: 1px solid rgba(255,255,255,.07);
  --footer-text-color: var(--color-logo-white);
}

.logo.logo-image {
  display: inline-flex;
  align-items: center;
  width: clamp(155px, 13.1vw, 235px);
  height: clamp(44px, 4.4vw, 72px);
  font-size: 0;
  line-height: 0;
  flex: 0 0 auto;
  margin-left: 0;
}

.logo.logo-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

body header .header-socials {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(.28rem, .48vw, .5rem);
  min-width: 0;
}

body header .header-social {
  width: clamp(29px, 2.47vw, 40px);
  height: clamp(29px, 2.47vw, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--header-nav-link-color);
  text-decoration: none;
  border: var(--social-border);
  border-radius: 999px;
  background: var(--social-bg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
  font-size: clamp(.84rem, 1.07vw, 1.16rem);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

body header .header-social span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body header .header-social:hover {
  transform: translateY(-1px);
  border-color: var(--social-hover-border-color);
  color: var(--social-hover-color);
}

body header .header-social.soundcloud:hover { color: var(--social-soundcloud-color); }
body header .header-social.instagram:hover { color: var(--social-instagram-color); }
body header .header-social.tiktok:hover { color: var(--social-tiktok-color); }
body header .header-social.youtube:hover { color: var(--social-youtube-color); }
body header .header-social.twitch:hover { color: var(--social-twitch-color); }
body header .header-social.facebook:hover { color: var(--social-facebook-color); }
body header .header-social.threads:hover { color: var(--social-threads-color); }
body header .header-social.discord:hover { color: var(--social-discord-color); }

body header nav a,
body header .nav-menu-trigger {
  font-size: 1.17rem;
  color: var(--header-nav-link-color);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.1;
}

body header .nav-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
}

body header .nav-menu-trigger::after {
  content: "";
  width: .42rem;
  height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-.08rem);
}

body header nav a:hover,
body header .nav-menu-trigger:hover {
  color: var(--header-nav-hover-color);
  text-shadow: var(--header-nav-hover-shadow);
}

body header .nav-menu {
  position: relative;
}

body header .nav-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 190px;
  height: .7rem;
  transform: translateX(-50%);
}

body header .nav-submenu {
  position: absolute;
  top: calc(100% + .58rem);
  left: 50%;
  z-index: 60;
  display: grid;
  gap: .22rem;
  min-width: 176px;
  padding: .52rem;
  border: 1px solid rgba(255,91,220,.28);
  border-radius: 10px;
  background: rgba(8,5,16,.96);
  box-shadow: 0 18px 40px rgba(0,0,0,.36);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -.34rem);
  transition: opacity .18s ease, transform .18s ease;
}

body header .nav-submenu a {
  display: block;
  padding: .54rem .68rem;
  border-radius: 7px;
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
}

body header .nav-submenu a:hover {
  background: rgba(255,63,200,.12);
}

body header .nav-menu:hover .nav-submenu,
body header .nav-menu:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

@media (min-width: 721px) {
  body header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
  }

  body header .logo.logo-image {
    grid-column: 2;
    justify-self: center;
    width: clamp(186px, 15.72vw, 282px);
    height: clamp(53px, 5.28vw, 86px);
  }

  body header .logo.logo-image img {
    object-position: center center;
  }

  body header .header-socials {
    grid-column: 1;
    justify-self: start;
  }

  body header nav {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  body header .header-socials {
    order: 2;
    justify-content: center;
    flex-wrap: wrap;
    max-width: min(100%, 18rem);
  }

  body header .logo.logo-image {
    order: 1;
  }

  body header nav {
    order: 3;
  }

  body header .nav-submenu {
    left: 50%;
    transform: translate(-50%, -.34rem);
  }

  body header .nav-menu:hover .nav-submenu,
  body header .nav-menu:focus-within .nav-submenu {
    transform: translate(-50%, 0);
  }
}

/* Page-level overrides. Change these if one page needs a different personality. */
body.page-home {
  --home-card-heading-color: var(--section-title-color);
  --home-connect-heading-color: var(--section-title-color);
}

body.page-releases {
  --hero-title-main-color: var(--release-title-main-color);
  --hero-title-emphasis-start: var(--release-title-emphasis-start);
  --hero-title-emphasis-mid: var(--release-title-emphasis-mid);
  --hero-title-emphasis-end: var(--release-title-emphasis-end);
  --hero-title-emphasis-gradient: linear-gradient(120deg, var(--hero-title-emphasis-start) 0%, var(--hero-title-emphasis-mid) 42%, var(--hero-title-emphasis-end) 100%);
}

body.page-live,
body.page-lessons,
body.page-merch,
body.page-shows {
  /* These pages currently use the global SonnySounds hero treatment. */
}

/*
  Shared mobile geometry.
  Keep brand colors, gradients, shadows, and component styling in the tokens
  above and in the normal page rules. Mobile rules should only reshape the same
  design so an artist can change one token and get the same look everywhere.
*/
@media (max-width: 720px) {
  .page {
    padding: .75rem;
  }

  .shell {
    border-radius: 26px;
  }

  header {
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  nav {
    justify-content: center;
  }

  .logo.logo-image {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-inline: auto;
    width: clamp(180px, 52.4vw, 290px);
    height: clamp(74px, 19.3vw, 119px);
  }

  .logo.logo-image img {
    object-position: center center;
  }

  footer {
    flex-direction: column;
  }
}