/* ==========================================================================
   Onward Divorce Financial Forecaster: project tokens.
   The handful of values the portable set does not carry. Every value here is
   derived from a token in tokens.css. Kept in its own file so tokens.css
   ports back to the disclosure product unchanged.
   Nothing outside this file and tokens.css may use a literal hex, radius,
   duration or spacing number.
   ========================================================================== */

:root {

  /* ---- Washes on the navy band ------------------------------------------
     The header, the headline card and the results link card are dark
     surfaces. Their internal cells are translucent white rather than a
     surface colour, so one value works on all three. */
  --on-dark-wash:        rgba(255,255,255,.08);
  --on-dark-wash-strong: rgba(255,255,255,.12);
  --on-dark-rule:        rgba(255,255,255,.15);

  /* ---- Tinted washes on paper -------------------------------------------
     Blue is the trust anchor and the default for anything structural, so
     the standing wash is blue. The success and error washes exist only for
     the two states that earn them. */
  --wash-primary:        rgba(18,78,120,.06);   /* blue-700 */
  --wash-primary-strong: rgba(18,78,120,.10);
  --wash-success:        rgba(46,125,50,.10);   /* green-700 */
  --wash-error:          rgba(179,38,30,.08);   /* error-700 */
  --wash-error-strong:   rgba(179,38,30,.12);

  /* ---- Direction of a support transfer -----------------------------------
     Money arriving and money leaving are both ordinary outcomes, so the pair
     is green and amber rather than green and red: error red stays reserved
     for a budget that does not work. The wash is the existing "needs you"
     yellow. The accent is yellow-500 darkened until it clears 3:1 against
     that wash, the same derivation as --chart-2 but further, because the wash
     underneath it is lighter than paper.
     Named support-in / support-out, not inflow / outflow: --color-outflow is
     already taken, by the Estimated Expenses column heading in index.html. */
  --wash-support-in:     var(--wash-success);
  --color-support-in:    var(--color-success-main);
  --wash-support-out:    var(--yellow-050);
  --color-support-out:   #8a6a0a;

  /* ---- Figures on dark ---------------------------------------------------
     The text ramp on dark carries greys only, and the headline figures need
     the same three roles they have on paper. Lightened for contrast against
     blue-900, not the paper values. */
  --color-progress-on-dark: var(--yellow-500);
  --color-success-on-dark:  #8ec79a;
  --color-error-on-dark:    #e9a49e;

  /* ---- Scrims and rings --------------------------------------------------- */
  --overlay-scrim: rgba(250,250,247,.97);  /* paper at 97%, full-screen overlays */
  --focus-ring:    rgba(18,78,120,.35);
  --shadow-modal:  0 8px 40px rgba(12,54,84,.18);

  /* ---- Motion that loops --------------------------------------------------
     Not transitions, so they sit outside the fast/base pair. A looping
     animation marks a wait; it never gates a control. */
  --motion-spin:  1s;
  --motion-pulse: 1.6s;

  /* ---- Layout ------------------------------------------------------------
     The forecaster is one column throughout, so it uses the wide single
     column rather than the sidebar-plus-main grid. */
  /* ---- Brand mark ---------------------------------------------------------
     The dark red of the "o" in the Onward wordmark, sampled from the logo
     artwork. Not in the portable set on purpose: the guide's palette carries
     no red outside error, and error red stays reserved for true errors. This
     appears only on the landing page, whose marketing register is out of the
     guide's scope by the 2026-09-01 decision. */
  --brand-mark-red: #6e0e0a;

  /* ---- Page wash ----------------------------------------------------------
     The Hub's exported Figma shader, not a reconstruction of it. A 240x150 WebP
     of 446 bytes, stretched to fill. The Hub's own build notes record that it
     beat the best CSS gradient fit on accuracy (mean error 0.53/255 against
     1.15) as well as on size, which is why the gradient this replaced is gone.
     Flat reference colours, if they are ever needed: base #fafafa, peach bloom
     #eed9d0 at the top right, blush #ece1e2 rising from the bottom right.
     Stretched rather than covered: the wash carries no detail, so scaling it to
     any viewport is invisible, and stretching keeps the corner blooms uncropped. */
  --wash-page-top:        #fafafa;
  --wash-strength:        1;      /* 0 turns the wash off */
  --wash-grain-opacity:   0.035;
  --wash-page-image: url(data:image/webp;base64,UklGRrYBAABXRUJQVlA4IKoBAAAwEgCdASrwAJYAPjEYiUQiIYgSGBABglpbt65n3cqebiTVAt9gE+dFYzyFu+qrLuEQK2pM/AleEd2UV8kxoEDpKwc8CL2t+J0Ar26avWBV8OTRqNRmdn9cJzGjePtv/4yr3vkezqSbqzYWBkUikFhD8vcdFDrRZrT0Mll2U7CqyrymNMUPovm3+f38XzVroJdFH+PxNpZu9SqAAP7+M0ATm+Z+H5z2CoIJZrpucKPQoh8XelEtmI11Cmbi1agbUwHxDffYUQveUPzC0OgIMCQzW4OKDI0owVZj7RmrNyoABApl+ogDdVtdhwbgeRS+BaJtJpSkwAW0Jcq7vqMJVv9tAaSzMa/o5q7Khg43jzl+LE2VYiy1MC6SGF1juwUOe+nPIJCQZJXQXuaALBIUQL5EtdyNm9Z4t6NFxzXVeboL9lHu400VIXdWEELwzTxuItP3zaKm2kodd7qqb5sXXL9PwJ1w5epLhn9G3FMRYQ1KNFktBcpAydbObDKIWgIzPIA8ZUJDgQAePCY79dBQoI73IVTuo7KAxcKja5KjcFvcgJzGieRBRkRRAAA=);
  --wash-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");

  --layout-form:    860px;
  /* The capped width of each contact box on the landing page. Sized to hold a
     normal email address without scrolling, which is the longer of the two
     values the pair has to take. */
  --field-contact:  260px;
  --layout-landing: 1380px;
  --gutter-phone:   var(--space-xs);
  --gutter-desk:    var(--space-s);
}

html[data-mode="dark"] {
  /* On dark the washes composite over the dark surface, so only the accents
     need lifting, the same way the figures above do. */
  --color-support-in:  var(--color-success-on-dark);
  --color-support-out: var(--yellow-500);
}