/* Spacing, radii and the density ladder — all values as the product renders them.
   The app pads cards at 18px and pages at 16/24px; these are not a 4/8 grid. */
:root{
  --ff-space-1:2px;
  --ff-space-2:4px;
  --ff-space-3:6px;
  --ff-space-4:8px;
  --ff-space-5:10px;
  --ff-space-6:12px;
  --ff-space-7:14px;
  --ff-space-8:16px;
  --ff-space-9:18px;   /* the card's own horizontal padding */
  --ff-space-10:20px;
  --ff-space-12:24px;  /* desktop page padding */

  --ff-page-pad:16px;
  --ff-page-pad-web:24px;
  --ff-card-pad:18px;
  --ff-gap-card:16px;
  --ff-gap-mark:14px;

  /* Radii — the product's literal set. */
  --ff-radius-sm:6px;
  --ff-radius-md:7px;
  --ff-radius-lg:9px;
  --ff-radius-xl:12px;
  --ff-radius-2xl:14px;
  --ff-radius-mark:11px;   /* 44px group mark = 25% of size */
  --ff-radius-pill:999px;

  /* Density ladder — 44 comfortable, 32 compact, 24 dense. Never a fourth. */
  --ff-mark-comfortable:44px;
  --ff-mark-compact:32px;
  --ff-mark-dense:24px;
  --ff-mark-filter:22px;
  --ff-mark-category:34px;

  /* Layout */
  --ff-rail-width:232px;
  --ff-drawer-width:280px;
  --ff-card-min:340px;
  --ff-sheet-max:400px;
  --ff-measure:70ch;

  /* Rules tree indents */
  --ff-rule-indent:34px;
  --ff-rule-detail-indent:39px;

  /* Touch floor */
  --ff-hit-min:44px;
}

/* Phone-width browser. The web app keeps its layout tokens and only tightens:
   page padding drops to the phone value and the card grid's minimum track goes
   below one column's worth so auto-fit grids collapse to a single column. */
@media (max-width:900px){
  :root{
    --ff-page-pad-web:16px;
    --ff-card-min:100%;
  }
}