/* Secretary design tokens, copied from Hermes (hermes/brand/tokens.css) so the two landings match.
   Same blue, grid and radii; the font is the system font. */

:root {
  /* colour */
  --accent: #0847c4;          /* actions and links; deep blue, AA on paper */
  --btn: #0847c4;             /* solid buttons, white label */
  --frame: #0847c4;           /* the thin frame down the window edges */
  --band: #0847c4;            /* full-bleed blue sections */
  --band-sub: #d6e0fa;        /* secondary text on the band, AA */
  --band-art: #a9c2f7;        /* engraving on the band */
  --band-line: rgba(255, 255, 255, .22);
  --accent-light: #0074D9;    /* icon gradient top, clrs.cc blue */
  --accent-deep: #004C8F;     /* icon gradient bottom */
  --ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --bg: #fdfdfd;
  --surface: #f2f3f7;
  --line: #dcdde5;
  --text: #1a1a1a;
  --sub: #5a5c6b;
  --live: #2f8a4e;            /* ready for sale */
  --pending: #b07a00;         /* in review, processing: amber, so it never reads as a link */
  --bad: #c0392b;             /* rejected */
  --idle: #8a8d99;            /* preparing, unknown */

  /* type */
  --display: var(--font);  /* one face: headlines are the system font bold, tracked tight */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-display: 64px;       /* hero: 64 line, -0.01em */
  --size-title: 34px;         /* section heads: 40 line */
  --size-headline: 20px;      /* card heads: 28 line */
  --size-body: 17px;          /* 24 line */
  --size-footnote: 13px;      /* 16 line */

  /* space: the 8 point grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --measure: 680px;
  --wrap: 1120px;

  /* shape */
  --control: 48px;
  --r-card: 28px;
  --r-group: 20px;
  --r-row: 8px;
  --r-pill: 999px;
  --r-sq: 2px;                /* landing buttons and panels */
  --r-icon: 22.5%;
  --motion: .2s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6f9dff;
    --btn: #1f55e0;
    --frame: #1f55e0;
    --band: #0a33b5;
    --band-sub: #c9d6fb;
    --band-art: #7d9df0;
    --bg: #0a0e19;            /* navy black */
    --surface: #141a2a;
    --line: #252d44;
    --text: #f2f2f5;
    --sub: #a2a9bc;
    --live: #4caf6e;
    --pending: #e0a800;
    --bad: #d9534f;
    --idle: #6f7488;
  }
}