/* ============================================================
   RK Alarmen — light theme
   White background, black text, red headings and accents.

   Loaded after style.css when site.theme = "light" in content.json.
   Set theme to "dark" for the black theme.
   ============================================================ */

:root{
  /* surfaces */
  --paper:#ffffff;
  --band:#f4f6f7;
  --band-2:#e7eaed;
  --surface:#ffffff;
  --line:#dfe3e7;

  /* type */
  --ink:#101114;
  --mist:#5c646d;

  /* accent — every --blue token in the base sheet becomes red */
  --blue:#d71d2e;
  --blue-dark:#a8101f;
  --blue-soft:#fdebed;
  --red:#d71d2e;
  --red-light:#e23c4b;
  --sun:#d71d2e;
}

body{background:var(--paper);color:var(--ink)}

/* ---------- headings ---------- */
.hero h1,
.h2{color:var(--blue)}

/* the emphasised word inverts, so the heading stays two-tone */
.hl{color:var(--ink)}

/* red rule under the main heading, as on the banner */
.hero h1::after{content:"";display:block;width:74px;height:4px;background:var(--red);
  margin-top:1.05rem;border-radius:2px}

/* card headings stay black — they should read easily, not shout */
.card h3,.dev-card h3,.step h3,.pay-cell h3,.faq summary,.answer-box h3{color:var(--ink)}

/* ---------- buttons ---------- */
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn-out:hover{background:var(--ink);color:#fff}

/* ---------- promo + header ---------- */
.promo{background:var(--blue-dark);color:#fff}
.head{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--blue)}

/* ---------- hero ---------- */
.hero-lead{color:#3a4047}
.pill{background:var(--blue-soft);color:var(--blue-dark)}
.tag{background:var(--red);color:#fff;box-shadow:0 12px 26px rgba(16,17,20,.22)}
.tag b,.tag span{opacity:.92}

/* ---------- cards ---------- */
.dev-shot{background:#fff}
.card.pop{border-color:var(--red);box-shadow:0 12px 34px rgba(215,29,46,.14)}
.flag{background:var(--red);color:#fff}
.dev-card{background:#fff;border-color:var(--line)}
.dev-model{color:var(--blue)}
.chips li{border-color:var(--line);color:var(--ink)}

/* ---------- calculator ---------- */
.fill.sub{background:#9aa1a9}
.fill.us{background:var(--red)}
.verdict{background:var(--blue-soft);color:var(--ink)}
.verdict small{color:#3a4047}

/* ---------- reviews ---------- */
.stars svg{fill:var(--red)}
.answer-box{background:var(--ink);color:#fff}
.answer-box h3{color:#fff}
.answer-box p{color:rgba(255,255,255,.82)}
.answer-box .nums a{background:#fff;color:var(--ink)}

/* ---------- form ---------- */
.field input,.field textarea{background:#fff;color:var(--ink);border-color:var(--line)}
.field input::placeholder,.field textarea::placeholder{color:#8e959c}
.field input:focus,.field textarea:focus{border-color:var(--red)}
.consent input,.ctrl input[type=range]{accent-color:var(--red)}
.form-msg.is-error{color:#b3121f}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.7)}
.foot-links a:hover{color:#fff}

input,textarea,select{color-scheme:light}