:root {
  /* colour */
  --jp-navy: #0C1528;
  --jp-yellow: #EBD127;
  --jp-yellow-tint: color-mix(in srgb, #EBD127 30%, white);
  --jp-paper: #FEFEFE;
  --jp-page: #E9EBEE;
  --jp-steel: #EDEDE7;
  --jp-navy-hover: #1D3869;
  --jp-red: #9F1D2E;
  --jp-green: #116149;
  --jp-jay-blue: #4E82C8;

  --jp-text: #0C1528;
  --jp-text-secondary: rgba(12, 21, 40, 0.82);
  --jp-text-tertiary: rgba(12, 21, 40, 0.70);
  --jp-hairline: rgba(12, 21, 40, 0.25);

  /* type */
  --jp-font-ui: 'DM Sans', sans-serif;
  --jp-font-body: 'Instrument Sans', sans-serif;
  --jp-heading-tracking: -0.03em;
  --jp-label-tracking: 0.12em;

  /* type scale: one step per role. Sizes were hand-typed per rule before this
     existed, which is how the admin console ended up with five near-identical
     sizes for secondary text; a new rule picks the step for its role instead. */
  --jp-size-tag: 0.68rem;      /* status chips and version tags */
  --jp-size-label: 0.72rem;    /* uppercase tracked labels, buttons, table heads */
  --jp-size-meta: 0.78rem;     /* timestamps, counts, ids, footnotes */
  --jp-size-small: 0.85rem;    /* secondary text: hints, subs, dense rows */
  --jp-size-body: 0.92rem;     /* default text in dense admin surfaces */
  --jp-size-panel: 0.95rem;    /* panel and card headings */
  --jp-size-section: 1.2rem;   /* section headings */

  /* shape */
  --jp-radius: 0;
  --jp-border: 1px solid #0C1528;
  --jp-shadow-shell: 5px 5px 0 0 #EBD127;
  --jp-shadow-panel: 4px 4px 0 0 #EBD127;
  --jp-shadow-button: 3px 3px 0 0 #FEFEFE, 4px 4px 0 0 #0C1528;
  --jp-shadow-button-pressed: 1px 1px 0 0 #FEFEFE, 2px 2px 0 0 #0C1528;

  /* motion */
  --jp-press: translate(2px, 2px);
  --jp-transition: transform 120ms ease, box-shadow 120ms ease;

  /* metrics */
  --jp-hit-desktop: 44px;
  --jp-hit-mobile: 48px;
  --jp-focus-ring: 3px solid #1D3869;
}