/* =============================================================================
   KAR — Layout tokens
   -----------------------------------------------------------------------------
   The one place the site decides how wide anything is allowed to get, and how
   much air sits between sections. Loaded first on every page, ahead of
   index.css (marketing) or chat.css (app), so both families size themselves
   from the same scale instead of each shipping its own magic numbers.

   Two rules govern everything below:

   1. Below 1280px these tokens hold the exact widths the site already shipped,
      so phones, tablets and 13" laptops are untouched by the container work.
      (A handful of components do gain a second column earlier than that —
      the garage dashboard at 1180, the story lists and the article breakout
      at 1024 — but they say so at their own breakpoint, not here.)
   2. Above 1280px the containers grow fluidly with the viewport and stop at a
      cap. They stop because a 2560px-wide paragraph is not a better paragraph
      — the extra room goes into wider grids, more columns and bigger gutters,
      not into stretching every element edge to edge.

   Widths are max-widths on a centred, padded box (border-box everywhere), so
   "1520px" means 1520px including its own gutters.
   ============================================================================= */

:root {
  /* Gutter between a container's content and its edge. Also the minimum
     breathing room a full-bleed bar keeps at the sides of the viewport. */
  --kar-gutter: 24px;

  /* ---- Container scale ----
     content : marketing / narrative pages (homepage, about, FAQ, legal)
     wide    : app chrome + the widest workspaces (compare, history, garage)
     app     : the standard tool workspace (TCO, safety, shortlist)
     chat    : a conversation column — capped by line length, not by screen
     ed      : the editorial hub (blog index, topic and tag listings)
     read    : the article measure; the only value tuned to characters, not px */
  --kar-content: 1152px;
  --kar-wide:    1120px;
  --kar-app:      960px;
  --kar-chat:     900px;
  --kar-ed:       68rem;
  --kar-read:     44rem;

  /* ---- Vertical rhythm ----
     section : padding above and below a major band
     gap     : the gap between cards in a grid */
  --kar-section: clamp(56px, 8vw, 96px);
  --kar-gap:     clamp(20px, 3vw, 32px);
}

/* Large screens. One breakpoint, one ramp — the widths interpolate with the
   viewport between 1280px and their cap rather than stepping at 1440/1680/1920,
   which is why there is no separate rule for each of those sizes.

   Where the ramps land (measured, in CSS px):
                1024    1280    1440    1680    1920    2560
     gutter       24      38      43      44      44      44
     content    1152    1152    1296    1512    1520    1520
     wide       1120    1152    1296    1512    1520    1520
     app         960    1075    1210    1411    1440    1440
     chat        900     922    1037    1180    1180    1180
     ed         1088    1088    1210    1408    1408    1408
     section      82      96      96     108     123     132 */
@media (min-width: 1280px) {
  :root {
    --kar-gutter:  clamp(24px, 3vw, 44px);

    --kar-content: clamp(1152px, 90vw, 1520px);
    --kar-wide:    clamp(1120px, 90vw, 1520px);
    --kar-app:     clamp(960px,  84vw, 1440px);
    --kar-chat:    clamp(900px,  72vw, 1180px);
    --kar-ed:      clamp(68rem,  84vw, 88rem);
    /* Two extra characters per line, no more: the measure is set by reading
       comfort and a 2560px screen does not change what that is. */
    --kar-read:    45rem;

    --kar-section: clamp(96px, 6.4vw, 132px);
    --kar-gap:     clamp(32px, 2.6vw, 44px);
  }
}