/* agreement — the exhibit pack for the six finance-agreement prototypes.
 *
 * Loaded ONLY by /sixty/ /themiddle/ /garage/ /heavy/ /settled/ /switch/, after
 * system/tokens.css. The site chrome went neutral when the portfolio stopped wearing a
 * client's colours; the six phone prototypes are exhibits and keep the skin they were
 * designed and measured in. This file is that skin, extracted verbatim from the pack it
 * used to live in (tier 3 of tokens.carmoola.css) — values unchanged, provenance kept.
 *
 * The palette began as a re-skin exercise against a real lender's published stylesheet
 * (16 August 2026) and was negotiated against WCAG pair by pair; the numbers below are
 * from that audit. The lender's name stays out of this file because the exhibits are
 * brand-agnostic: what remains is a measured palette that demonstrates the pack
 * mechanic — swap one file and the whole exhibit changes clothes.
 *
 * Measured pairs, each against the surface it actually sits on:
 *   #110009 on #F7F7F3   19.02:1        #A00B54 on #FFEAF5    6.87:1
 *   #555555 on #F7F7F3    6.94:1        #0A6E4F on #FFFFFF    6.26:1
 *   #D41070 on #FFFFFF    5.11:1        #B3261E on #FFFFFF    6.54:1
 *   #D41070 on #F7F7F3    4.76:1        #B3261E on #FCEBE9    5.66:1
 *
 * One derived value earns its place twice over: #D41070 on the blush lands at 4.46:1,
 * under the bar by a rounding error and still under it, so anything sitting on #FFEAF5
 * drops to #A00B54 at 6.87:1.
 *
 * ON :root RATHER THAN .ot-screen, AND THIS MATTERS. Custom properties inherit downward
 * only, and .ot-phone — the dark bezel the screen sits inside — is the PARENT of
 * .ot-screen, so a screen-scoped block cannot reach --t-frame and renders with no device
 * around it. The mobile notes sheet loses its shadow the same way. A token used by any
 * chrome outside the app surface belongs on :root.
 */
:root {
  --t-ink:       #110009;   /* near-black with a red cast — the exhibit's text colour */
  --t-ink-soft:  #555555;
  --t-line:      #ECECDF;
  --t-bg:        #F7F7F3;
  --t-card:      #FFFFFF;
  --t-core:      #D41070;   /* the primary signal — carries labels and controls, 5.11:1 */
  --t-core-soft: #FFEAF5;
  --t-new:       #A00B54;   /* the second signal — type on the blush ground, 6.87:1 */
  --t-new-soft:  #FFEAF5;
  --t-new-text:  #A00B54;
  --t-good:      #0A6E4F;
  --t-alert:     #B3261E;
  --t-alert-soft:#FCEBE9;
  --t-good-soft: #D8F3DF;   /* pale green, 17.32:1 under the ink */
  --t-plain-soft:#ECECDF;
  --t-r:         16px;      /* the exhibit's card radius */

  /* Device and elevation. The exhibit ink has a red cast, so its shadows carry it too —
     a neutral grey shadow under these cards would look borrowed. */
  --t-frame:     #110009;
  --t-shadow-1:  0 1px 3px rgba(17, 0, 9, 0.10);
  --t-shadow-3:  0 24px 60px rgba(17, 0, 9, 0.26);

  /* The exhibit's grounds, for the prototypes that need a full-bleed surface.
     Each one carries --t-ink and nothing smaller than 15px. */
  --t-ground-amber: #FFB863;
  --t-ground-green: #92DD73;
  --t-ground-mint:  #D8F3DF;
  --t-ground-sky:   #BDE1FF;
  --t-ground-pink:  #F90081;
}

/* The exhibit's controls are fully round — the one shape decision this pack carries
   beyond colour. */
.ot-screen .ot-btn,
.ot-screen .ot-filter,
.ot-screen .ot-chip,
.ot-screen .ot-input { border-radius: var(--radius-pill); }

/* The single derived value, applied where it is needed: type on the blush ground. */
.ot-screen .ot-chip,
.ot-screen .ot-filter.on,
.ot-screen .ot-it .ic { color: var(--t-new); }