/* banks.css — the journey app skin.
 *
 * ONE skin: a dark banking app worn by Meridian, an invented bank. The palette began
 * as a re-skin exercise read from a real UK bank's app screenshots (July 2026),
 * screen-read values rather than guesses; the bank's name stays out of this file
 * because the exhibit is brand-agnostic. Values unchanged from that audit.
 *
 * The journey semantic contract, the --j-* tokens, is the whole mechanic: journey
 * components (built once, in journey.css) reference ONLY these tokens, never a
 * primitive, never a literal (DESIGN.md S1). Swap this file and the four journeys
 * change clothes.
 *
 * Applied to .j-app directly AND aliased to [data-brand="meridian"] so a journey
 * works whether or not the attribute is set. Load order (S2): tokens.contract.css
 * → tokens.css → components.css → THIS FILE → proto.css → journey.css.
 *
 * APP layer ≠ SITE chrome. The bright "digital green" below is the app's PRIMARY
 * ACTION colour (pay button, active tab, FAB) — a property of the exhibit, not of
 * the neutral site pack around it.
 *
 * Fonts are STAND-INS for a licensed pair: a system serif approximates the app's
 * display serif (balances, titles); a system humanist sans for body and labels.
 * Substitution flagged, not silently shipped.
 *
 * AA: values below are the design intent; the browser checker verifies every --j-*
 * text/surface pair in the rendered journey. Notes mark where a hex was nudged off
 * the screen-read value to clear the 4.5:1 floor on the dark surface.
 */

.j-app,
[data-brand="meridian"] {
  --j-bg:            #0A0A0A;   /* near-black app background */
  --j-surface:       #1C1C1E;   /* dark-grey card / list surface */
  --j-ink:           #FFFFFF;   /* primary text, balances, titles */
  --j-muted:         #9A9AA0;   /* secondary text; nudged up from screen-read #8E8E93
                                    (4.4:1 on --j-surface) to ~5.0:1 for AA */
  --j-border:        #2C2C2E;   /* hairline dividers on dark (not a text colour) */
  --j-accent:        #00E33A;   /* bright "digital" green — PRIMARY ACTION (pay button,
                                    active tab, FAB) */
  --j-accent-hover:  #00C733;
  --j-accent-fg:     #0A0A0A;   /* near-black label ON the green (the pay-button text) */
  --j-positive:      #30D158;   /* success green, distinct from the action green */
  --j-caution:       #FFB020;   /* warning amber — AA on --j-bg and --j-surface */
  --j-radius:        16px;      /* app cards are large-radius */
  --j-font-display:  "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --j-font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --j-shadow:        0 8px 24px rgba(0, 0, 0, 0.45);
}