/* framings — axis one of the treatment model.
 *
 * Measured, not chosen: all 75 custom properties were read across the fifteen
 * theme files and clustered on STRUCTURE alone. They collapse to three —
 * eight bleed, four matted, three matted with an edge. The remaining
 * fifteen-ness is paint. (TEMPLATES.md, "The finding that forced it".)
 *
 * Written as plain classes, NOT `:root, .t-<name>`. That dual selector was
 * right for whole themes and is wrong here: it puts every framing on :root,
 * where the last one loaded wins and the others leak into anything that does
 * not declare the same tokens. A plain class composes on any element, which
 * is what lets one picker page show three framings side by side honestly.
 *
 * ⚠⚠ LOAD ORDER MATTERS: link this file AFTER dials.css. Classes share one
 * specificity, so the file defined last wins on any token both set. Framing is
 * the structural decision and must win — a ground must never paint a mat onto
 * a full-bleed plate. The mount (--mount-pad, --mount-bg, --mount-border) is
 * therefore framing's, and only .f-bleed sets --mount-bg, to suppress it; the
 * matted framings leave it alone so the ground tints the mat.
 *
 * Everything absent from a framing is inherited from base.css, which declares
 * all 75. Nothing here may rely on a var() fallback in loupe.css — those are
 * boardwalk's values.
 */

/* bleed — the photograph IS the page. Chrome has nowhere to live, so the
 * ground never shows and --ground stops doing any work. This is the framing
 * that makes a dark ground read as intentional rather than as letterboxing. */
.f-bleed {
  --plate-base:  100vmax;
  --plate-inset: 0;
  --plate-fit:   cover;
  --mount-pad:    0;
  --mount-bg:     transparent;
  --mount-border: 0;
  --drift-scale:  1.05;
  /* chrome sits ON the photograph here, so it needs the ground's halo to stay
     legible over a bright frame. Matted framings leave it at base's `none`. */
  --chrome-shadow: var(--chrome-halo);
}

/* matted — the plate is inset and --ground becomes a wall: a large permanent
 * surface no upload can take away. ⚠ Matting only pays when the ground is a
 * considered colour. On near-black it reads as letterboxing, which is why the
 * dark grounds pair with .f-bleed. (ARCHITECTURE.md §2.5.) */
.f-matted {
  --plate-base:  100vmin;
  --plate-inset: 8;
  --plate-fit:   contain;
  --mount-pad:    22px;
  --mount-border: 1px solid rgba(127, 127, 127, 0.35);
  --drift-scale:  1;
  /* no --mount-bg: the ground tints the mat. */
}

/* matted + edge — a rule that is always visible, never over the middle of a
 * picture, and sits above the enlargement on purpose.
 *
 * ⚠ The three themes this was measured from are NOT one idea: blueprint is a
 * 1px rule all the way round, duplex a 14px bar on the top edge only, midway
 * 9px on the left only. They clustered together because they are the only
 * three that declare edge tokens at all, not because they agree. The hairline
 * is the general case and is what this position means; the two asymmetric
 * bars return as presets, which is the right home for a specific gesture.
 */
.f-edge {
  --plate-base:  100vmin;
  --plate-inset: 12;
  --plate-fit:   contain;
  --mount-pad:    22px;
  --mount-border: 1px solid rgba(127, 127, 127, 0.5);
  --drift-scale:  1;
  /* --edge-color belongs to the ground, so the rule matches its wall. */
  --edge-width:  1px;
  --edge-inset:  20px;
}