/* ============================================================================
   theme.css — CrateTally palette + the quiet one-column homepage (2026-09-08).
   tokens.css supplies structure and site.css the shared components (header, device frames, FAQ,
   prose, footer); this file supplies colour and the ct-* layout of the homepage only.
   Owner decision 2026-09-08, direction A "Rustige eenkoloms editorial" from the design canvas:
   one reading column, at most one device still per section, one primary action. Per-brand, NOT
   sync-checked. Light + dark; dark follows prefers-color-scheme. System fonts only (axiom A3).
   ============================================================================ */

/* ---- light (paper + teal) ---- */
:root {
  --bg: #f5f3eb;
  --bg-2: #ece9df;
  --surface: #ffffff;
  --text: #14191d;
  --text-soft: #586670;
  --accent: #16766d;
  --accent-2: #1d8d81;
  --accent-ink: #ffffff;
  --accent-text: #12665e;
  --line: #dde4e9;
  --verified: #28764f;
  --caution: #ae7b21;
  --caution-text: #805b16;
  --halo: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1117;
    --bg-2: #111a22;
    --surface: #16212b;
    --text: #eaf1f6;
    --text-soft: #a0b0ba;
    --accent: #5bc2b5;
    --accent-2: #7ed8cd;
    --accent-ink: #082521;
    --accent-text: #77d1c6;
    --line: #2c3c46;
    --verified: #7fc9a3;
    --caution: #d9b36a;
    --caution-text: #e0bd79;
  }
}

/* ---- the reading column ----
   Every homepage section shares one measure: wide enough for a 64px headline, narrow enough that
   a paragraph stays around 70 characters. The shared header and footer keep their own .wrap. */
.ct-col { width: min(46rem, 100% - 2 * clamp(1.1rem, 4vw, 2.5rem)); margin-inline: auto; }
.ct-col > .eyebrow { margin-bottom: var(--sp-3); }
.ct-col h2 { margin-bottom: var(--sp-3); }
.ct-col > p { color: var(--text-soft); max-width: var(--measure-wide); }
.ct-col > p + p { margin-top: var(--sp-2); }
.ct-col > p + p:has(> .btn) { margin-top: var(--sp-3); }

/* ---- hero ---- */
.ct-hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
.ct-hero h1 { margin-bottom: var(--sp-3); max-width: 15ch; }
.ct-lede { font-size: var(--step-1); line-height: var(--lh-snug); color: var(--text-soft);
  max-width: 36ch; margin-bottom: var(--sp-4); }
.ct-cta, .ct-cta .launch-live, .ct-cta .launch-prelaunch { display: flex; flex-wrap: wrap;
  gap: 1rem; align-items: center; }
.ct-coming { color: var(--text-soft); font-size: var(--step-0); }
.ct-note { font-size: var(--step--1); color: var(--text-soft); margin-top: var(--sp-3);
  max-width: var(--measure); }
.ct-store { display: inline-flex; align-items: center; gap: .7rem; text-align: left;
  padding: .6rem 1.15rem; border-radius: 12px; background: var(--text); color: var(--bg);
  text-decoration: none; transition: transform var(--dur-1) var(--ease-out); }
.ct-store:hover { color: var(--bg); transform: translateY(-1px); }
.ct-store small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .03em;
  line-height: 1.15; }
.ct-store b { display: block; font-size: 16px; font-weight: 650; line-height: 1.15; }

/* ---- launch swap ----
   Every block that says anything about availability carries data-launch="{{launchState}}", which
   build.mjs resolves from app.toml [store] app_store_url + play_store_url, the same facts that
   resolve {{appStoreAttr}} / {{playStoreAttr}}. Wording and link flip TOGETHER; nothing is
   hand-flipped. A badge hides itself until its OWN store is live, so a one-store launch never
   shows a dead button beside a working one. */
[data-launch="prelaunch"] .launch-live { display: none; }
[data-launch="live"] .launch-prelaunch { display: none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"] { display: none; }

/* ---- one still per section, centred under the copy ----
   The shared .device frame has a FIXED footprint (430px native iPhone, 546px iPad, times
   --dv-scale), so each figure names its own scale and the narrow bands below step it down. */
.ct-figure { display: grid; justify-items: center; margin: var(--sp-4) 0 0; }
.ct-figure .device { --rot: 0deg; }
.ct-figure .device.dv-iphone { --dv-scale: .66; }
.ct-figure .device.dv-ipad { --dv-scale: .8; }

/* ---- the three steps ---- */
.ct-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  padding: var(--sp-4) 0; margin-top: var(--sp-5); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.ct-step { display: grid; gap: .6rem; align-content: start; }
.ct-idx { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-text); }
.ct-step h3 { font-size: var(--step-1); }
.ct-step p { margin: 0; font-size: var(--step--1); line-height: var(--lh-body); color: var(--text-soft); }

/* ---- sections + close ---- */
.ct-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0 0; }
.ct-section + .faq { margin-top: 0; }
.ct-close { padding: 0 0 clamp(3.5rem, 8vw, 6.5rem); display: grid; gap: var(--sp-3);
  justify-items: start; }
.ct-close h2 { margin: 0; }

/* ---- responsive ----
   No hamburger on this site: the shared header (.nav) wraps its links onto a second row below
   860px; nothing here may hide `.nav nav`. */
@media (max-width: 860px) {
  .nav nav { flex: 1 0 100%; margin-left: 0; gap: 1rem 1.1rem; }
}
@media (max-width: 720px) {
  .ct-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .ct-figure .device.dv-ipad { --dv-scale: .78; }
}
@media (max-width: 560px) {
  .ct-figure .device.dv-iphone { --dv-scale: .6; }
  .ct-figure .device.dv-ipad { --dv-scale: .56; }
}
@media (max-width: 440px) {
  /* 'terugverwacht.' at the fluid floor is wider than a 320px column. */
  .ct-hero h1 { font-size: 2.35rem; }
  .ct-figure .device.dv-iphone { --dv-scale: .56; }
  .ct-figure .device.dv-ipad { --dv-scale: .46; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-store { transition: none; }
}