/*
 * The visual system, taken from ae-path-prototype.
 *
 * Nothing outside this file hard-codes a colour. Brief section 8.
 *
 * Note on the reference file: two prototypes shipped with the brief. The light,
 * warm editorial one is an earlier exploration; the dark amber one is the approved
 * system and the one section 8 describes token for token. This is built to the
 * dark system.
 */

:root {
  /* surfaces */
  --bg: #080d14;
  --bg2: #0e1721;
  --panel: rgba(18, 28, 40, .72);
  --panel2: rgba(23, 35, 49, .66);
  --card: rgba(20, 31, 44, .7);
  --line: rgba(255, 255, 255, .075);
  --line2: rgba(255, 255, 255, .14);

  /* accent */
  --amber: #f28419;
  --amber-soft: rgba(242, 132, 25, .13);
  --amber-line: rgba(242, 132, 25, .45);
  --amber-glow: rgba(242, 132, 25, .16);

  /* type */
  --white: #f2f5f8;
  --grey: #9aa7b4;
  --grey2: #6c7885;

  /* state */
  --disabled-bg: #2a3644;
  --disabled-ink: #5d6874;

  /* geometry */
  --radius-panel: 22px;
  --radius-card: 13px;
  --blur: 14px;

  /* type scale */
  --stem-size: 27px;
  --stem-weight: 300;
  --track-wide: .13em;
}

/*
 * Page background: the base plus two radial washes, at 18%/-8% and 92%/108%.
 */
body {
  background:
    radial-gradient(1100px 620px at 18% -8%, #16283a 0%, rgba(22, 40, 58, 0) 62%),
    radial-gradient(900px 520px at 92% 108%, #14202e 0%, rgba(20, 32, 46, 0) 60%),
    var(--bg);
}

/*
 * Contrast note. --grey on --card is the weakest pairing in the system and the one
 * respondents read thirty times, so anchor body text is set at --white-adjacent
 * brightness once selected and --grey only at rest, where it sits at roughly 6.4:1
 * against the card fill. Do not darken --grey further without re-checking.
 */