/* =========================================================
   LIGHT THEME
   ========================================================= */

body:not(.dark) {
  --bg: #f3f5f8;
  --bg-soft: #edf0f4;
  --bg-elevated: #ffffff;

  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e7ebef;

  --text: #15181d;
  --text-soft: #454c56;
  --muted: #7a828d;
  --muted-2: #a1a8b0;

  --line: rgba(18, 25, 35, .10);
  --line-strong: rgba(18, 25, 35, .17);

  --shadow-sm:
    0 4px 14px rgba(20, 30, 40, .08);

  --shadow:
    0 10px 30px rgba(20, 30, 40, .11);

  --shadow-lg:
    0 20px 60px rgba(20, 30, 40, .15);
}

body:not(.dark) {
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(75, 105, 140, .08),
      transparent 34%
    ),
    var(--bg);
}

body:not(.dark) .site-header {
  background: rgba(255, 255, 255, .84);
}

body:not(.dark) .theme-btn {
  background: #e8ebef;
}

body:not(.dark) .theme-btn .sun {
  background: var(--accent);
  color: #151208;
}

body:not(.dark) .theme-btn .moon {
  color: #737d8a;
}

body:not(.dark) .movie-search {
  background: rgba(255, 255, 255, .75);
}

body:not(.dark) .movie-search:focus {
  background: #fff;
}

body:not(.dark) .catalog-controls {
  background: rgba(255, 255, 255, .7);
}

body:not(.dark) .collection-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .02) 20%,
      rgba(0, 0, 0, .78) 100%
    );
}


/* =========================================================
   DARK THEME
   ========================================================= */

body.dark {
  --bg: #080b10;
  --bg-soft: #0d1118;
  --bg-elevated: #111722;

  --surface: #111720;
  --surface-2: #171e29;
  --surface-3: #1c2532;

  --text: #f5f7fa;
  --text-soft: #d6dbe3;
  --muted: #8d96a5;
  --muted-2: #687281;

  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .15);
}

body.dark .site-header {
  background: rgba(8, 11, 16, .82);
}

body.dark .theme-btn {
  background: #171d27;
}

body.dark .theme-btn .sun {
  background: #343c49;
  color: #8e97a5;
  box-shadow: none;
}

body.dark .theme-btn .moon {
  background: var(--accent);
  color: #151208;
}

body.dark .movie-search {
  background: rgba(255, 255, 255, .035);
}

body.dark .movie-search:focus {
  background: rgba(255, 255, 255, .055);
}


/* =========================================================
   DARK MOVIE DESCRIPTION
   ========================================================= */

body.dark .description:not(.is-expanded)::after {
  background:
    linear-gradient(
      transparent,
      var(--bg)
    );
}