@charset "UTF-8";

html[data-theme='light'] {
  /* Text color style */
  --text-main: 33, 33, 40;

  /* Background color style */
  --bg-level-0: 237, 241, 247;
  --bg-level-1: 223, 234, 248;
  --bg-level-2: 232, 237, 244;
  --bg-modal: 237, 241, 247;
  --bg-telegram-header: #edf1f7;

  /* Shadows style */
  --shadow-base:
    2px 2px 5px rgba(174, 184, 199, 0.38),
    -2px -2px 5px rgba(255, 255, 255, 0.86);
  --shadow-level-1:
    7px 7px 14px rgba(174, 184, 199, 0.8),
    -7px -7px 14px rgba(255, 255, 255, 0.92);
  --shadow-level-2:
    5px 5px 11px rgba(174, 184, 199, 0.38),
    -5px -5px 11px rgba(255, 255, 255, 0.86);
  --shadow-inset:
    inset 2px 2px 5px rgba(174, 184, 199, 0.38),
    inset -2px -2px 5px rgba(255, 255, 255, 0.86);
  --shadow-inset-active:
    inset 2px 2px 5px rgba(174, 184, 199, 0.42),
    inset -2px -2px 5px rgba(255, 255, 255, 0.9);

  /* Borders style */
  --border-level-1: 216, 223, 233;
  --border-level-2: 203, 212, 224;
}

/* Light theme: subtle neumorphism */
html[data-theme='light'] .appHeader {
  background-color: rgba(var(--bg-level-0));
  box-shadow: 0 7px 5px -7px rgba(174, 184, 199, 0.38);
}

html[data-theme='light'] .appHeader .headerButton {
  background: rgba(var(--bg-level-1));
  border: 1px solid rgba(var(--border-level-1));
  border-radius: var(--border-radius-circle);
  box-shadow: var(--shadow-base);
}

html[data-theme='light'] .home-page .achievements-section .progress-text {
  filter: brightness(0.7);
}

html[data-theme='light'] :is(
    .puzzles-game-page .puzzle-header .puzzle-info .puzzle-moves .move-turn,
    .puzzles-game-page .puzzle-header .puzzle-info .puzzle-moves .moves-count
  ) {
  background: rgba(var(--bg-level-0));
  box-shadow: var(--shadow-inset);
}

html[data-theme='light'] :is(
    .puzzles-game-page .puzzle-header .puzzle-info .puzzle-moves .move-turn span,
    .puzzles-game-page .puzzle-header .puzzle-info .puzzle-moves .moves-count span
  ) {
  filter: brightness(0.7);
}

html[data-theme='light'] .form-group.boxed .form-control,
html[data-theme='light'] .puzzles-game-page .form-group.boxed .form-control {
  background: rgba(var(--bg-level-0));
  box-shadow: var(--shadow-inset) !important;
}

html[data-theme='light'] .form-group.boxed .form-control:focus {
  border-color: rgba(var(--primary), 0.7) !important;
  box-shadow:
    var(--shadow-inset),
    0 0 0 3px rgba(var(--primary), 0.22) !important;
}

html[data-theme='light'] .progress-bar-container {
  box-shadow: var(--shadow-inset);
}

html[data-theme='light'] .puzzles-game-page #boardWrapper {
  border-radius: var(--border-radius-s);
  box-shadow: var(--shadow-level-1);
}

html[data-theme='light'] .is-animated:hover {
  box-shadow: var(--shadow-level-2) !important;
}

html[data-theme='light'] .is-animated:active {
  box-shadow: var(--shadow-inset-active) !important;
}

html[data-theme='light'] .btn-secondary {
  background-color: rgba(var(--bg-level-1)) !important;
}

html[data-theme='light'] .is-animated.btn-secondary:active {
  color: rgba(var(--text-main)) !important;
  background-color: rgba(var(--bg-level-2)) !important;
}

html[data-theme='light'] :where(button, .btn):disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none !important;
  transform: none !important;
}