/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --color-navy:      #2E3D4F; /* fonts and dark UI elements */
  --color-navy-mid:  #1e2a38; /* dark card/panel backgrounds */
  --color-navy-deep: #111c28; /* evening routine section background */
  --color-blue:      #7B9EA8; /* darker accents */
  --color-sage:      #D6E8E2; /* lighter accents */
  --color-blush:     #E8CEC8; /* main pink */
  --color-off-white: #F5F2EE; /* page backgrounds, anywhere white would be used */

  --font-display: 'Cinzel Decorative', cursive;
  --font-body:    'Montserrat', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-off-white);
  color: var(--color-navy);
  font-family: var(--font-body);
}

main {
  padding: 6rem 7.5rem;
}

.brand-name {
  font-family: var(--font-display);
}

@media (max-width: 640px) {
  main {
    padding: 3rem 1.5rem;
  }
}

/* ─── Dark mode overrides ───────────────────────────────── */
/* Restores the original dark appearance: navy body, navy header, off-white text */

body.dark-mode {
  background-color: var(--color-navy);
  color: var(--color-off-white);
}

/* ── Header ─────────────────────────────────────────────── */

body.dark-mode .site-header {
  background-color: var(--color-navy);
}

body.dark-mode .site-title,
body.dark-mode .site-slogan {
  color: var(--color-off-white);
}

/* ── Home page ──────────────────────────────────────────── */

body.dark-mode .home-hero__heading,
body.dark-mode .home-hero__tagline,
body.dark-mode .how-it-works__step-title,
body.dark-mode .how-it-works__step-body {
  color: var(--color-off-white);
}

body.dark-mode .how-it-works__step {
  border-color: rgba(245, 242, 238, 0.1);
}

/* ── Quiz ───────────────────────────────────────────────── */

body.dark-mode .quiz-page__heading,
body.dark-mode .quiz-step__title,
body.dark-mode .quiz-question__label {
  color: var(--color-off-white);
}

body.dark-mode .quiz-progress__line {
  background-color: var(--color-blue);
}

body.dark-mode .quiz-card__label {
  background-color: var(--color-navy-mid);
  border-color: var(--color-blue);
  color: var(--color-off-white);
}

body.dark-mode .quiz-card__label:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-off-white);
}

body.dark-mode .quiz-card input:checked + .quiz-card__label {
  background-color: var(--color-sage);
  border-color: var(--color-sage);
  color: var(--color-navy);
}

body.dark-mode .quiz-btn--next,
body.dark-mode .quiz-btn--submit {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-off-white);
}

body.dark-mode .quiz-btn--next:hover,
body.dark-mode .quiz-btn--submit:hover {
  background-color: var(--color-sage);
  border-color: var(--color-sage);
  color: var(--color-navy);
}

body.dark-mode .quiz-btn--back {
  color: var(--color-off-white);
  border-color: var(--color-blue);
}

body.dark-mode .quiz-btn--back:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

/* ── Results page ───────────────────────────────────────── */

body.dark-mode .results-page__heading {
  background-image: linear-gradient(
    90deg,
    var(--color-off-white) 30%,
    var(--color-blush)     50%,
    var(--color-off-white) 70%
  );
  background-size: 200% auto;
}

body.dark-mode .results-profile {
  background-color: var(--color-navy-mid);
}

body.dark-mode .results-profile__description {
  color: var(--color-off-white);
}

body.dark-mode .ingredients-heading {
  color: var(--color-off-white);
}

body.dark-mode .results-ingredient {
  background-color: var(--color-navy-mid);
  border-color: var(--color-navy-deep);
}

body.dark-mode .results-ingredient__name {
  color: var(--color-blush);
}

body.dark-mode .results-ingredient__one-liner,
body.dark-mode .results-ingredient__detail {
  color: var(--color-off-white);
}

body.dark-mode .results-ingredient__arrow {
  border-right-color: var(--color-blush);
  border-bottom-color: var(--color-blush);
}

body.dark-mode .results-ingredient__body {
  border-top-color: var(--color-navy-deep);
}

body.dark-mode .results-ingredient__for-you {
  color: var(--color-blush);
  opacity: 1;
}

body.dark-mode .results-ingredient__for-you::before {
  background-color: var(--color-blush);
}

body.dark-mode .results-section--morning {
  background-color: var(--color-navy-deep);
  border-color: rgba(232, 206, 200, 0.18);
}

body.dark-mode .results-section--evening {
  background-color: var(--color-navy-mid);
  border-color: rgba(214, 232, 226, 0.18);
}

body.dark-mode .results-section--morning .results-period {
  color: var(--color-blush);
  border-bottom-color: rgba(232, 206, 200, 0.12);
}

body.dark-mode .results-section--evening .results-period {
  color: var(--color-sage);
  border-bottom-color: rgba(214, 232, 226, 0.15);
}

body.dark-mode .results-product--morning {
  background-color: var(--color-navy-mid);
  border-color: rgba(232, 206, 200, 0.2);
}

body.dark-mode .results-product--morning .results-product__step {
  color: var(--color-blush);
  border-color: rgba(232, 206, 200, 0.4);
  background-color: rgba(232, 206, 200, 0.06);
}

body.dark-mode .results-product--morning .results-product__step::after {
  border-color: var(--color-blush);
}

body.dark-mode .results-product--evening {
  background-color: rgba(214, 232, 226, 0.05);
  border-color: rgba(214, 232, 226, 0.12);
}

body.dark-mode .results-product__name {
  color: var(--color-off-white);
}

body.dark-mode .results-product--morning .results-product__category {
  color: var(--color-blush);
  opacity: 0.65;
}

body.dark-mode .results-product--morning .results-product__why {
  color: var(--color-blush);
  opacity: 0.8;
}

body.dark-mode .results-product--morning .results-product__arrow {
  border-right-color: var(--color-blush);
  border-bottom-color: var(--color-blush);
}

body.dark-mode .results-product--morning .results-product__body {
  border-top-color: rgba(232, 206, 200, 0.1);
}

body.dark-mode .results-product--morning .results-product__timing {
  color: var(--color-blush);
  opacity: 0.65;
}

body.dark-mode .results-product__detail {
  color: var(--color-off-white);
}

body.dark-mode .results-product__benefit {
  color: var(--color-blush);
}

body.dark-mode .results-product__benefit::before {
  background-color: var(--color-blush);
}

body.dark-mode .quiz-btn--ghost {
  color: var(--color-off-white);
  border-color: rgba(245, 242, 238, 0.25);
}

body.dark-mode .quiz-btn--ghost:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

body.dark-mode .results-prototype-notice {
  background-color: rgba(30, 42, 56, 0.8);
}

body.dark-mode .results-prototype-notice__text {
  color: var(--color-off-white);
}

body.dark-mode .prototype-banner {
  background-color: rgba(30, 42, 56, 0.8);
}

body.dark-mode .prototype-banner__text {
  color: var(--color-off-white);
  opacity: 0.8;
}

/* ─── Theme toggle bar (dev only, hidden in prod via ENV) ── */

.theme-toggle-bar {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
}

.theme-toggle-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border-radius: 2rem;
  border: 1.5px solid var(--color-navy);
  background-color: var(--color-off-white);
  color: var(--color-navy);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.theme-toggle-btn:hover {
  background-color: var(--color-navy);
  color: var(--color-off-white);
  border-color: var(--color-navy);
}

body.dark-mode .theme-toggle-btn {
  background-color: var(--color-navy-mid);
  color: var(--color-off-white);
  border-color: var(--color-blue);
}

body.dark-mode .theme-toggle-btn:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}