:root {
  --bg-primary: #0f1722;
  --bg-accent: #22323f;
  --bg-highlight: #6fc3c9;
  --text-color: #e6eef6;
    /* Light theme palette */
  --green-light: #c8e6c9;
  --rose-light:  #fddede;
  --pink-light:  #ee9494;
  --border-light: rgba(225, 160, 64, 0.377);
  --gray-light: #444;
  /* Dark theme palette */
  --green-dark: #4b6d4c;
  --rose-dark:  #7a5a5a;
  --pink-dark:  #7d3d3d;
  --border-dark: #E1A140;
  --gray-dark: #ccc;
}

body {
  margin: 0;
  color: var(--text-color);
  transition: background 0.6s ease, color 0.6s ease;
  box-sizing: border-box;
  padding: 0 2rem 2rem;
  height: 100%;
  font-weight: 400;
  font-style: normal;
}

* {
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.1px;
    line-height: normal;
}

li {
  font-family: "Roboto", sans-serif;
}

/* ---------- THEME VARIANTS ---------- */
body.light {
  --bg-primary: #E8E4D8;
  --bg-accent: rgba(225, 160, 64, 0.584);
  --bg-highlight: #914110;
  --text-color: #0b1220;  
  --green: var(--green-light);
  --rose:  var(--rose-light);
  --pink:  var(--pink-light);
  --border: var(--border-light);
  --gray: var(--gray-light);
}

body.dark {
  --bg-primary: #532200;
  --bg-accent: #914110;
  --bg-highlight: #E1A140;
  --text-color: #e6eef6;
  --green: var(--green-dark);
  --rose:  var(--rose-dark);
  --pink:  var(--pink-dark);
  --border: var(--border-dark);
  --gray: var(--gray-dark);
}

/* ---------- STYLE 1: Gradient ---------- */
body.gradient {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 20%),
    radial-gradient(1200px 600px at 10% 10%, rgba(111,195,201,0.08), transparent 20%),
    linear-gradient(220deg, var(--bg-primary), var(--bg-accent));
  background-attachment: fixed;
  background-size: cover;
}

/* ---------- STYLE 2: Animated Subtle Motion ---------- */
body.animated,
body.dark.animated *:not(.theme-btn, .content, p, ul, .property-url, a,strong, span, li, h2, h3, .summary, header, .case-header, .platform, .property-info, .property-img-wrapper, i, img) {
  background: linear-gradient(120deg,
    var(--bg-primary) 0%,
    var(--bg-accent) 40%,
    var(--bg-highlight) 60%,
    var(--bg-primary) 100%);
  background-size: 300% 300%;
  /* animation: bgPulse 18s ease-in-out infinite; */
}
@keyframes bgPulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.dark.animated .case-header {
  color: #e6eef6;
}

.light .case-header {
  background-color: #E8E4D8;
}

.dark .property {
  box-shadow: 2px 0px 7px rgba(225, 161, 64, 0.129);
}

.dark .case-header {
  background-color: transparent;
}

body.dark {
  background: saddlebrown;
}

#siteLogo {
  max-width: 150px;
  margin: 30px auto 50px auto;
  display: block;
}
/* ---------- SWITCHER BUTTON ---------- */
.theme-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  padding: 0.6rem 0.9rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--bg-highlight);
  color: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.3s ease, transform 0.2s ease;
  line-height: 21px;
  height: 45px;
  width: 45px;
}
.theme-btn:hover {
  transform: scale(1.05);
}

.property {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1.5rem;
  max-width: 1400px;
  margin: 1rem auto 2rem auto;
}

.property header h2 {
  margin: 0 0 1rem;
  font-family: "Raleway", sans-serif;
}

.property-url a {
  margin-right: 3px;
  z-index: 999;
  text-decoration: none;
}

.case {
  margin-bottom: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Accordion button */
.case-header {
  width: 100%;
  border: none;
  padding: 1.1rem 1.2rem;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  position: relative;
  padding-right: 40px; /* space for arrow */
  cursor: pointer;
}

.case-header::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform-origin: center;
  transition: transform 0.2s ease;
  transform: translateY(-50%) rotate(-45deg);
}

.case-header.open::after {
  transform: translateY(-50%) rotate(45deg);
}

.case-header:hover {
  filter: brightness(0.9);
}

.case-header.main-header {
  padding: 0;
  display: flex;
  gap: 40px;
}

.case-header.main-header:after {
  right: 15px;
  top: 15px;
}

.light .case-header.main-header {
  background-color: transparent;
}

.case-header.main-header .property-info {
  display: flex;
  flex-direction: column;
  width: 75%;
}

.property-img-wrapper {
  width: 25%;
}

i {
  font-size: 14px;
  font-weight: 300;
  text-align: right;
  color: var(--gray);
}

.summary.main {
  margin-top: 30px;
}

.property-img {
  max-width: 100%;
  border-radius: 15px;
}

.property-info p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}

.property-info .summary {
  margin-top: 10px;
}

.property-info p,
.property-info h2 {
  margin-top: 0;
}

.case-content {
  display: none;
  padding: 1.2rem;
  background: #fafafa;
}

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.4rem;
  font-weight: 500;
}

.summary span {
  padding: 0.6rem 1rem 0.5rem;
  border-radius: 8px;
  background: #eee;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  line-height: 22px;
}

.summary .lowest { background: var(--pink) }
.summary .highest { background: var(--rose); }
.summary .match.good { background: var(--green); }
.summary .match.bad { background: var(--pink); }

.summary.main {
  display: none;
  flex-direction: column;
}

.platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 1rem;
}
.dark .platform {
  background-color: var(--bg-primary);
}
.platform {
  background: #fff;
  border: 3px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

.platform h3 {
  margin-top: 0;
  font-size: 18px;
}

.platform ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.platform li {
  font-size: 16px;
  margin: 0.7rem 0;
}

@media (max-width: 600px) {
  .platforms {
    grid-template-columns: 1fr; /* stack on small screens */
  }
}