/* Desktop type scale.
 *
 * Loaded last, deliberately. These rules were first written into base.css and
 * silently did nothing: a media query adds no specificity, and components.css
 * and views.css load afterwards, so their `.activity-verdict` won on source
 * order alone. Anything overriding a component has to come after the
 * components.
 *
 * Every size in this app was chosen for a phone held at arm's length. On a
 * desktop monitor a 13px verdict and a 10px score pill are too small to read
 * comfortably, let alone to show off a typeface.
 *
 * The tokens lift first; then the highest-traffic hardcoded sizes are named
 * explicitly. The remaining ~200 size declarations migrate onto tokens as
 * each view is reworked, rather than in one sweep touching every rule.
 */

@media (min-width: 900px) {
  :root {
    --text-display: 38px;
    --text-title: 27px;
    --text-heading: 20px;
    --text-body: 17px;
    --text-meta: 15px;
    --text-label: 12px;
  }

  body { font-size: 17px; }

  /* Feed, the most-looked-at screen, so it sets the tone. */
  .activity-line { font-size: 16px; }
  .activity-verdict { font-size: 15px; }
  .activity-score-pill { font-size: 12px; }
  .activity-sub.activity-time { font-size: 13px; }

  /* Chrome */
  .nav-tab span { font-size: 12px; }
  .logo-small { font-size: 24px; }
  .logo-img { max-height: 52px; }
  .nav-tab svg { width: 22px; height: 22px; }

  /* Leaderboard */
  .lb-card-name { font-size: 19px; }
  .lb-score { font-size: 19px; }
  .lb-ticker-item { font-size: 13px; }

  /* Cafés */
  .cafes-explore-sub { font-size: 15px; }
  .cafe-card-name { font-size: 18px; }
}

@media (min-width: 1400px) {
  :root {
    --text-display: 44px;
    --text-title: 30px;
  }

  .activity-line { font-size: 17px; }
  .activity-verdict { font-size: 16px; }
  .lb-card-name { font-size: 21px; }
}