@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poiret+One&display=swap');

/* =========================
   Theme variables (default: dark)
   ========================= */
:root {
  /* Typography */
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Poiret One", sans-serif;

  /* Dark theme colors (album-cover inspired) */
  --bg-overlay: rgba(7, 7, 11, 0.72);
  --page-text: #F3EEE8;
  --text-secondary: #C8BFD3;
  --text-muted: #9A93A3;

  --link: #E29BFF;
  --link-hover: #F0B7FF;
  --link-active: #D98BFF;
  --link-visited: #E29BFF;

  --heading-solid: #F3EEE8; /* fallback if gradient clipping isn't supported */
  --brand-gradient-text-fallback: #F3EEE8;

  /* Reusable brand gradient */
  --brand-gradient: linear-gradient(
    90deg,
    #F6EECF 0%,
    #F1C7D8 48%,
    #D98BFF 100%
  );

  /* Slightly brighter hover version for gradient text links */
  --brand-gradient-hover: linear-gradient(
    90deg,
    #FFF4D8 0%,
    #FFD8E6 48%,
    #E8AEFF 100%
  );

  /* Optional subtle borders/shadows */
  --panel-border: rgba(255, 255, 255, 0.08);

  /* Background image (dark mode) */
  --bg-image: url("../images/background_dark.jpg");
  --bg-color: #07070B;
}

/* =========================
   Base page
   ========================= */
/* Make sure overlay covers the whole screen */
html, body{
  min-height: 100vh;
}

html {
  background-image: var(--bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--bg-color);

  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-body);

}

body {
  background: var(--bg-overlay);
  color: var(--page-text);
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  border: 0;
  font-family: var(--font-body);
  height: 100%;
}

/* =========================
   Reusable brand utilities
   ========================= */
.brand-gradient-text {
  color: var(--brand-gradient-text-fallback); /* fallback if clipping unsupported */
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-gradient-bg {
  background: var(--brand-gradient);
  color: #120F16; /* readable on the lightest part of the gradient */
  border: 1px solid var(--panel-border);
}

/* Optional helper for future buttons */
.btn-brand {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 9999px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  background: var(--brand-gradient);
  color: #120F16;
  border: 1px solid var(--panel-border);
}

/* Keep button text stable across link states */
.btn-brand:link,
.btn-brand:visited,
.btn-brand:hover,
.btn-brand:active {
  color: #120F16;
  text-decoration: none;
}

/* =========================
   Headings / branding
   ========================= */
h1 {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-weight: 300;
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: 90px;

  color: var(--heading-solid); /* fallback */
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-weight: 300;
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: 50px;

  color: var(--heading-solid); /* fallback */
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   Text / lists
   ========================= */
p,
li {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 0.02em;
  list-style: none;
  text-align: center;
  padding-left: 0;
  margin-left: 0;
}

ul {
  padding: 0;
}

p {
  text-align: center;
}

.verse-quote {
  font-size: 24px;
  line-height: 1.8;
}

.musicservice {
  font-size: 26px;
}

/* =========================
   Links
   ========================= */
a:link {
  color: var(--link);
  text-decoration: none;
}

a:visited {
  color: var(--link-visited);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

a:active {
  color: var(--link-active);
  text-decoration: none;
}

/* Service links use the same gradient as the header */
.musicservice a {
  transition: filter 120ms ease, opacity 120ms ease;
}

.musicservice a,
.musicservice a:visited,
.musicservice a:active {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

.musicservice a:hover {
  background: var(--brand-gradient-hover);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

/* =========================
   Media
   ========================= */
#spotify_player {
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  height: 750px;
  display: block;

  width: 100%;
  max-width: 500px;

  opacity: 0.85;
  border: 1px solid var(--panel-border);
}

/* =========================
   Light mode
   ========================= */
@media screen and (prefers-color-scheme: light) {
  :root {
    /* Light theme colors (same identity, brighter surface) */
    --bg-overlay: rgba(255, 252, 248, 0.78);
    --page-text: #241F29;
    --text-secondary: #5E556A;
    --text-muted: #7F758D;

    --link: #B05BD6;
    --link-hover: #D07AF2;
    --link-active: #9447BA;
    --link-visited: #B05BD6;

    --heading-solid: #2A2232;
    --brand-gradient-text-fallback: #2A2232;

    --brand-gradient: linear-gradient(
      90deg,
      #B38D2F 0%,
      #C96D9B 45%,
      #A14ED6 100%
    );

    --brand-gradient-hover: linear-gradient(
      90deg,
      #C79D35 0%,
      #D97AA9 45%,
      #B45EEA 100%
    );

    --panel-border: rgba(36, 31, 41, 0.12);

    /* Daytime image */
    --bg-image: url("../images/background_light.jpg");
    --bg-color: #F6F1FA;
  }

  #spotify_player {
    opacity: 0.92;
  }
}

/* =========================
   Small-screen polish
   ========================= */
@media screen and (max-width: 700px) {
  h1 {
    font-size: 56px;
    line-height: 1.05;
    padding-top: 12px;
  }

  p,
  li {
    font-size: 18px;
    line-height: 1.75;
  }

  .verse-quote {
    font-size: 20px;
    line-height: 1.7;
  }

  .musicservice {
    font-size: 22px;
  }

  #spotify_player {
    height: 480px;
  }
}

audio {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 500px; /* Match your design */
  border-radius: 12px; /* Rounded edges */
  border: 1px solid var(--panel-border); /* Border style */
}

.song-list li {
  display: inline-block;
  margin: 10px 5px;
  padding: 12px 20px;
  border-radius: 9999px; /* Fully rounded corners */
  background: var(--brand-gradient);
  color: #120F16; /* Text color from your theme */
  border: 1px solid var(--panel-border);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.song-list li:hover {
  background: var(--brand-gradient-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.song-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--panel-border);
}