/* heartful.ly — dating apps and the first month of dating.
 *
 * The design problem is specific: every site in this category looks the same,
 * and they all look like a greetings card. Blush pink, script headings, soft
 * gradients, a couple silhouetted at sunset. That palette signals sentiment,
 * and sentiment is precisely what a reader comparing eight apps at 11pm does
 * not want. They want to know which one makes women message first and what the
 * free tier stops them doing.
 *
 * So this theme is deliberately unromantic. It reads closer to a consumer
 * magazine's product pages than to a relationships blog: a warm off-white
 * ground rather than white, ink dark enough to read at length, and exactly one
 * accent — a deep rose that carries the category without apologising for it.
 * The warmth lives in the paper and the ink, not in decoration.
 *
 * Dark mode is not an afterthought here. This is a site people read in bed on a
 * phone with the lights off, which is a real use case rather than a preference,
 * and a blazing white page at that hour is a page they close.
 */

:root {
  /* Paper, not white. A pure white ground under long prose reads clinical, and
     this subject can afford warmth as long as it stops at the paper. */
  --paper: #fbf8f6;
  --paper-2: #f4efec;
  --card: #ffffff;

  /* Ink at genuine reading contrast. The muted tone is still AA on paper —
     a "soft" grey secondary is the most common accessibility failure in this
     category, and it lands on exactly the lines carrying the caveats. */
  --ink: #1f1b1d;
  --ink-2: #3d3539;
  --muted: #6b5f64;

  /* One accent. Deep rose rather than blush: it belongs to the subject, and it
     is dark enough to sit under white text on a button, which blush is not —
     that is why every site using blush ends up with unreadable buttons. */
  --accent: #a4234a;
  --accent-ink: #ffffff;
  --accent-soft: #f6e7ec;

  /* Reserved for the honest half of a page: what an app costs you, who should
     skip it, the complaint that recurs. Distinct from the accent so a caution
     never reads as a promotion. */
  --caution: #8a5a1c;
  --caution-soft: #f7eddc;

  --line: #e6dcd9;
  --header-line: #ddd0cc;
  --subbar-label: #a4234a;
  --link: #8e1e40;
  --link-visited: #6d2748;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Warm-shifted rather than neutral grey: the same reason the light ground
       is not white. A cold dark theme under this subject reads as a terminal. */
    --paper: #171315;
    --paper-2: #1f191c;
    --card: #221b1e;
    --ink: #f3ebee;
    --ink-2: #d8cbd0;
    --muted: #a8969d;
    /* Lifted well clear of the light-mode rose: #a4234a on a dark ground is
       almost unreadable, which is how most sites get their dark mode wrong —
       they invert the background and keep the brand colour. */
    --accent: #e8829f;
    --accent-ink: #2a0e18;
    --accent-soft: #3a1f28;
    --caution: #d9a463;
    --caution-soft: #33261a;
    --line: #33292d;
    --header-line: #3d3136;
    --subbar-label: #e8829f;
    --link: #f0a0b6;
    --link-visited: #cf8fa6;
  }
}

/* Measure. Long prose about a decision wants a narrower column than a
   specification table does, and the table is allowed to break out. */
.prose { max-width: 68ch; }
.prose p { line-height: 1.7; }

/* The specification table is the reason this site moved off WordPress, so it is
   styled as the primary object on an app page rather than as an afterthought
   below the article. */
.spec-table { font-variant-numeric: tabular-nums; }
.spec-table th { font-weight: 600; color: var(--ink-2); }
.spec-table .spec-source {
  color: var(--muted); font-size: 0.82em; letter-spacing: 0.01em;
}

/* "Who should skip this" and the recurring complaint. Given the caution colour
   rather than the accent, because a warning tinted like a call to action is a
   warning nobody reads as one. */
.who-should-skip, .known-complaint {
  background: var(--caution-soft);
  border-left: 3px solid var(--caution);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Verdict sits above the prose in the review layout; keep it quiet. A big
   scored badge would make this look like the listicles it replaces. */
.verdict { border: 1px solid var(--line); background: var(--card); }
.verdict .score { display: none; }