/* Dark theme, applied automatically when the browser or OS prefers dark.
   Linked last in every <head> (after styles.css, learn.css and the inline
   page styles), so these rules win at equal specificity.
   Course figures, the QR code and the App Store badges stay on white. */
@media (prefers-color-scheme: dark){
  :root{
    --green-deep:#3ccf83;
    --green-ink:#a6e5c3;
    --mint:#163023;
    --mint-2:#121d17;
    --ink:#e3ede7;
    --muted:#8fa398;
    --line:#26362d;
    --bg:#0e1612;
    --surface:#15201a;
    --body:#bccbc3;
    --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  }

  /* Surfaces that are white in the light theme */
  .card,.module,.lang-list li,.faq details,.lang-panel,.rating-badge,.review-btn,.tcard,
  .beta-pill,.beta-steps li,.facts,.mods article,.cmp-wrap,
  .sec-card,.quiz-opt,.quiz-topic,.fc-face,.fc-btn,.gl-search{background:var(--surface)}
  .gl-search{color:var(--ink)}
  .how-strip{background:var(--bg)}

  /* Secondary text that is a fixed dark grey in the light theme */
  .nav-links,.lede,.page-hero p,.legal p,.legal li,.faq p,.lang-list li,.lang-menu>summary,
  .lang-opt,.hero-trust,.hero-qr span,.rating-badge,.tcard cite,.facts dd,.cmp td{color:var(--body)}

  /* Header, mobile menu, mobile download bar */
  .site-header{background:rgba(14,22,18,.8)}
  .mobile-cta{background:rgba(14,22,18,.93)}
  @media (max-width:1024px){
    .nav-links{background:var(--bg)}
  }

  /* Page backgrounds */
  .hero{background:linear-gradient(180deg,#14281d 0%,#111d17 40%,var(--bg) 100%)}
  .section-tint{background:linear-gradient(180deg,var(--bg),var(--mint-2))}
  .page-hero{background:linear-gradient(180deg,#14281d,var(--bg))}
  .learn-hero{background:linear-gradient(180deg,var(--mint-2),var(--bg))}

  /* Borders and hovers */
  .card:hover{border-color:#355044}
  .review-btn:hover:not(:disabled){border-color:#3d5a4b}
  .shot-rail::-webkit-scrollbar-thumb{background:#2c4136}

  /* Green fills keep white text readable (--green-deep is a text colour here) */
  .btn-primary:hover{background:#0e9a53}
  .cta{background:linear-gradient(140deg,#12a05c,#0b7442)}
  .learn-cta,.quiz-banner{background:#0f3b26}
  .module-badge.module-badge-pv{background:#fff;color:#0e9a53}

  /* Black phone frames and the black App Store badge need an edge on a dark page */
  .phone,.how-phone{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 50px -20px rgba(0,0,0,.7)}
  .appstore:not(.appstore-light){box-shadow:inset 0 0 0 1px #a6a6a6}

  /* Footer sits a step darker than the page */
  .site-footer{background:#080e0b;border-top:1px solid var(--line)}

  /* Quiz feedback */
  .quiz-opt.wrong{border-color:#e2574c;background:#3a1a17;color:#ffb3aa}
  .quiz-fb.no{color:#ff8b7e}

  /* Draft placeholders */
  .ph{background:#3a3018;border-color:#a8873a;color:#f0d58c}
}