/* ============================================================
   maths-extension1-theme.css — Mathematics Extension 1
   Palette: Amber / gold / deep orange (distinct from Advanced indigo)
   ============================================================ */
:root {
  --primary:       #d97706;
  --primary-mid:   #b45309;
  --primary-light: rgba(217, 119, 6, 0.12);
  --accent:        #f59e0b;
  --accent-dark:   #d97706;
  --accent-light:  rgba(245, 158, 11, 0.12);
  --accent-bg:     rgba(255, 255, 255, 0.88);
  --surface:       rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --mesh-1: #fef3c7;
  --mesh-2: #ffedd5;
  --mesh-3: #fff7ed;
  --mesh-gradient: radial-gradient(ellipse at 20% 20%, var(--mesh-1) 0%, transparent 55%),
                   radial-gradient(ellipse at 80% 80%, var(--mesh-2) 0%, transparent 55%),
                   radial-gradient(ellipse at 50% 50%, var(--mesh-3) 0%, transparent 70%),
                   #fafaf9;
  --h2-color:      var(--heading-color);
  --shadow-accent: 0 4px 20px var(--accent-light);
}

body {
  background: radial-gradient(ellipse at 10% 20%, rgba(254, 243, 199, 0.9) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 10%, rgba(255, 237, 213, 0.85) 0%, transparent 50%),
              radial-gradient(ellipse at 60% 80%, rgba(254, 243, 199, 0.8) 0%, transparent 50%),
              linear-gradient(155deg, #fff7ed 0%, #fef3c7 40%, #ffedd5 75%, #fffbeb 100%);
  min-height: 100vh;
}

body[data-subject="maths-extension1"] .hero {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(120, 53, 15, 0.94) 0%, rgba(180, 83, 9, 0.82) 48%, rgba(245, 158, 11, 0.34) 100%),
    url('assets/heroes/maths-ext1-subject-hero.webp') 56% center/cover no-repeat;
}

body[data-subject="maths-extension1"] .hero h1,
body[data-subject="maths-extension1"] .hero-hook {
  color: #fff;
}

body[data-subject="maths-extension1"] .hero-hook {
  border-left-color: rgba(255, 255, 255, 0.35);
  opacity: 0.9;
}

body[data-subject="maths-extension1"] .hero::after,
body[data-subject="maths-extension1"] .hero-emoji {
  display: none;
}

body[data-subject="maths-extension1"] .badge-outline {
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.82);
}