/* Direction 6: background layer only. Tokens are from the existing CriaHub template.
   Content and shell will be added after this layer's visual review.
   Study heights are provisional; integrated sections must grow with their content. */
:root {
  color-scheme: dark;
  --bg-base: #08090D;
  --bg-deep: #06070B;
  --bg-surface-1: #0E1018;
  --bg-surface-2: #14171F;
  --bg-surface-3: #1B1F2A;
  --brand-primary: #2D7FF9;
  --brand-primary-2: #5BA0FF;
  --accent-lime: #D4FF5A;
  --text-primary: #F4F4F7;
  --text-secondary: #B4B6C2;
  --text-tertiary: #6E7183;
  --border-soft: rgb(255 255 255 / 8%);
  --border-strong: rgb(255 255 255 / 14%);
  --glow-wide: color-mix(in srgb, var(--brand-primary) 17%, transparent);
  --glow-close: color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --glow-faint: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  --study-hero-height: clamp(640px, 54vw, 800px);
  --study-content-height: 900px;
  --study-cta-height: 360px;
}

* {
  box-sizing: border-box;
}

html {
  min-inline-size: 0;
  background: var(--bg-base);
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
}

.background-study {
  inline-size: 100%;
  /* One continuous canvas. Light is centred on the viewport, not on a column.
     All gradients fade into the same base; section wrappers have no paint.
     Study heights are temporary and must follow real content at integration. */
  background:
    radial-gradient(
      ellipse 56vw calc(var(--study-hero-height) * 0.49)
      at 50% calc(var(--study-hero-height) * 0.55),
      var(--glow-close), transparent 100%
    ),
    radial-gradient(
      ellipse 110vw calc(var(--study-hero-height) * 0.78)
      at 50% calc(var(--study-hero-height) * 0.56),
      var(--glow-faint), transparent 100%
    ),
    radial-gradient(
      ellipse 90vw 520px at 50% calc(100% - 220px),
      var(--glow-wide), transparent 100%
    ),
    var(--bg-base);
}

.background-hero {
  block-size: var(--study-hero-height);
}

.background-content {
  block-size: var(--study-content-height);
}

.background-cta {
  block-size: var(--study-cta-height);
}

@media (max-width: 1023px) {
  :root {
    --study-hero-height: 820px;
    --study-content-height: 1100px;
  }
}

@media (max-width: 639px) {
  :root {
    --study-hero-height: 760px;
    --study-content-height: 1500px;
    --study-cta-height: 420px;
  }

  .background-study {
    background:
      radial-gradient(
        ellipse 135vw 410px at 50% 410px,
        var(--glow-wide), transparent 100%
      ),
      radial-gradient(
        ellipse 155vw 520px at 50% calc(100% - 220px),
        var(--glow-faint), transparent 100%
      ),
      var(--bg-base);
  }
}