/*
 * One atmospheric colour field for both the subject landing and its classes.
 * Page-specific styles control layout only; the subject palette lives here.
 */
body.page.page--subject,
body.page.page--classes {
  --theme-canvas: #dbe5e8;
  --theme-stop-a: color-mix(in srgb, var(--accent) 12%, var(--theme-canvas) 88%);
  --theme-stop-b: color-mix(in srgb, var(--accent-glow) 7%, var(--theme-canvas) 93%);
  --theme-stop-c: color-mix(in srgb, var(--accent-2) 14%, var(--theme-canvas) 86%);
  --theme-left-layer:
    radial-gradient(
      ellipse 58rem 32rem at 7% 8%,
      color-mix(in srgb, var(--accent) 16%, transparent) 0%,
      color-mix(in srgb, var(--accent) 6%, transparent) 48%,
      transparent 74%
    );
  --theme-right-layer:
    radial-gradient(
      ellipse 64rem 34rem at 94% 7%,
      color-mix(in srgb, var(--accent-2) 19%, transparent) 0%,
      color-mix(in srgb, var(--accent-2) 7%, transparent) 50%,
      transparent 76%
    );
  --theme-glow-layer:
    radial-gradient(
      ellipse 54rem 28rem at 52% 108%,
      color-mix(in srgb, var(--accent-glow) 9%, transparent) 0%,
      color-mix(in srgb, var(--accent-glow) 3%, transparent) 52%,
      transparent 76%
    );
  --theme-base-layer:
    linear-gradient(
      128deg,
      var(--theme-stop-a) 0%,
      var(--theme-stop-b) 48%,
      var(--theme-stop-c) 100%
    );

  min-height: 100vh;
  background-color: var(--theme-canvas);
  background-image:
    var(--theme-left-layer),
    var(--theme-right-layer),
    var(--theme-glow-layer),
    var(--theme-base-layer);
  background-blend-mode: normal;
  background-position: 0 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.page.page--subject[data-subject="physics"],
body.page.page--classes[data-subject="physics"] {
  --theme-canvas: #cfe2f3;
  --theme-stop-a: color-mix(in srgb, #3e78ff 21%, #cfe2f3 79%);
  --theme-stop-b: color-mix(in srgb, #78b7ff 11%, #cfe2f3 89%);
  --theme-stop-c: color-mix(in srgb, #3cc8ff 23%, #cfe2f3 77%);
  --theme-left-layer:
    radial-gradient(ellipse 58rem 32rem at 7% 8%, rgba(62, 120, 255, 0.25) 0%, rgba(62, 120, 255, 0.09) 48%, transparent 74%);
  --theme-right-layer:
    radial-gradient(ellipse 64rem 34rem at 94% 7%, rgba(60, 200, 255, 0.26) 0%, rgba(60, 200, 255, 0.1) 50%, transparent 76%);
  --theme-glow-layer:
    radial-gradient(ellipse 54rem 28rem at 52% 108%, rgba(120, 183, 255, 0.12) 0%, rgba(120, 183, 255, 0.04) 52%, transparent 76%);
}

body.page.page--subject[data-subject="chemistry"],
body.page.page--classes[data-subject="chemistry"] {
  --theme-canvas: #d8dfe9;
  --theme-stop-a: color-mix(in srgb, #8a5cff 20%, #d8dfe9 80%);
  --theme-stop-b: color-mix(in srgb, #d8b5ff 10%, #d8dfe9 90%);
  --theme-stop-c: color-mix(in srgb, #45d3c5 21%, #d8dfe9 79%);
  --theme-left-layer:
    radial-gradient(ellipse 58rem 32rem at 7% 8%, rgba(138, 92, 255, 0.24) 0%, rgba(138, 92, 255, 0.09) 48%, transparent 74%);
  --theme-right-layer:
    radial-gradient(ellipse 64rem 34rem at 94% 7%, rgba(69, 211, 197, 0.25) 0%, rgba(69, 211, 197, 0.1) 50%, transparent 76%);
  --theme-glow-layer:
    radial-gradient(ellipse 54rem 28rem at 52% 108%, rgba(216, 181, 255, 0.12) 0%, rgba(216, 181, 255, 0.04) 52%, transparent 76%);
}

body.page.page--subject[data-subject="biology"],
body.page.page--classes[data-subject="biology"] {
  --theme-canvas: #d3e2d5;
  --theme-stop-a: color-mix(in srgb, #32b76b 15%, #d3e2d5 85%);
  --theme-stop-b: color-mix(in srgb, #55d9b3 8%, #d3e2d5 92%);
  --theme-stop-c: color-mix(in srgb, #9ad75f 17%, #d3e2d5 83%);
  --theme-left-layer:
    radial-gradient(ellipse 58rem 32rem at 7% 8%, rgba(50, 183, 107, 0.19) 0%, rgba(50, 183, 107, 0.07) 48%, transparent 74%);
  --theme-right-layer:
    radial-gradient(ellipse 64rem 34rem at 94% 7%, rgba(154, 215, 95, 0.22) 0%, rgba(154, 215, 95, 0.08) 50%, transparent 76%);
  --theme-glow-layer:
    radial-gradient(ellipse 54rem 28rem at 52% 108%, rgba(85, 217, 179, 0.1) 0%, rgba(85, 217, 179, 0.035) 52%, transparent 76%);
}

body.page.page--subject[data-subject="mathematics"],
body.page.page--classes[data-subject="mathematics"] {
  --theme-canvas: #d2ddec;
  --theme-stop-a: color-mix(in srgb, #3e78ff 20%, #d2ddec 80%);
  --theme-stop-b: color-mix(in srgb, #55c9ff 10%, #d2ddec 90%);
  --theme-stop-c: color-mix(in srgb, #8c5cf5 21%, #d2ddec 79%);
  --theme-left-layer:
    radial-gradient(ellipse 58rem 32rem at 7% 8%, rgba(62, 120, 255, 0.23) 0%, rgba(62, 120, 255, 0.085) 48%, transparent 74%);
  --theme-right-layer:
    radial-gradient(ellipse 64rem 34rem at 94% 7%, rgba(140, 92, 245, 0.24) 0%, rgba(140, 92, 245, 0.09) 50%, transparent 76%);
  --theme-glow-layer:
    radial-gradient(ellipse 54rem 28rem at 52% 108%, rgba(85, 201, 255, 0.11) 0%, rgba(85, 201, 255, 0.04) 52%, transparent 76%);
}

body.page.page--subject[data-subject="geography"],
body.page.page--classes[data-subject="geography"] {
  --theme-canvas: #c9ded9;
  --theme-stop-a: color-mix(in srgb, #19a779 21%, #c9ded9 79%);
  --theme-stop-b: color-mix(in srgb, #f0be5f 8%, #c9ded9 92%);
  --theme-stop-c: color-mix(in srgb, #48b8d5 23%, #c9ded9 77%);
  --theme-left-layer:
    radial-gradient(ellipse 58rem 32rem at 7% 8%, rgba(25, 167, 121, 0.27) 0%, rgba(25, 167, 121, 0.1) 48%, transparent 74%);
  --theme-right-layer:
    radial-gradient(ellipse 64rem 34rem at 94% 7%, rgba(72, 184, 213, 0.28) 0%, rgba(72, 184, 213, 0.11) 50%, transparent 76%);
  --theme-glow-layer:
    radial-gradient(ellipse 54rem 28rem at 52% 108%, rgba(240, 190, 95, 0.1) 0%, rgba(240, 190, 95, 0.035) 52%, transparent 76%);
}

body.page.page--subject[data-subject="world-history"],
body.page.page--classes[data-subject="world-history"] {
  --theme-canvas: #e7ded7;
}

body.page.page--subject[data-subject="kazakh-language"],
body.page.page--classes[data-subject="kazakh-language"] {
  --theme-canvas: #d8e8e4;
}

body.page.page--subject[data-subject="russian-language"],
body.page.page--classes[data-subject="russian-language"] {
  --theme-canvas: #e1dfea;
}

/* Preserve the approved Kazakhstan History field exactly on both pages. */
body.page.page--subject[data-subject="kazakhstan-history"],
body.page.page--classes[data-subject="kazakhstan-history"] {
  --theme-canvas: #dde2d7;
  --theme-left-layer:
    radial-gradient(
      ellipse 58rem 32rem at 8% 8%,
      rgba(209, 154, 52, 0.24) 0%,
      rgba(209, 154, 52, 0.1) 46%,
      rgba(209, 154, 52, 0) 72%
    );
  --theme-right-layer:
    radial-gradient(
      ellipse 64rem 34rem at 94% 7%,
      rgba(73, 163, 164, 0.28) 0%,
      rgba(73, 163, 164, 0.11) 50%,
      rgba(73, 163, 164, 0) 76%
    );
  --theme-glow-layer: none;
  --theme-base-layer: linear-gradient(128deg, #e8dec7 0%, #dde2d7 48%, #c8e0de 100%);
}

/*
 * The old classes-only ambient veil changed the perceived hue even when the
 * body colour was correct. Keep the subject artwork and coloured rings, but
 * remove that second page-wide wash.
 */
body.page.page--classes .classes-ambient {
  display: none;
}

@media (max-width: 760px) {
  body.page.page--subject,
  body.page.page--classes {
    background-attachment: scroll;
  }
}