/* ZNTH design tokens — the single source of truth for both front ends.
 *
 * Every colour, radius and typeface in form/ and app/ comes from here. A raw
 * hex anywhere else is a bug, and test/tokens.mjs fails the build for it.
 *
 * The values are the ones from the enquiry form, which is the only surface
 * Harry has signed off, and they match the UI Reference canvas.
 *
 * Changing the look should be an edit to this file and nothing else.
 */

/* --- Vanguard CF: display only ------------------------------------------ */
/* Not a Google font, so it ships with the repo. Two weights is all the UI
 * needs; adding more costs every visitor the download. */

@font-face {
  font-family: 'Vanguard CF';
  src: url('./fonts/VanguardCF-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vanguard CF';
  src: url('./fonts/VanguardCF-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- ground ----------------------------------------------------------- */
  --bg:          #0A0D0F;   /* the page */
  --sunk:        #0D1114;   /* a well inside a panel */
  --panel:       #12171A;   /* a card */
  --panel-sel:   #161C20;   /* a card that is chosen */
  --line-soft:   #1A2126;
  --line:        #212A2F;
  --line-strong: #2E383E;

  /* --- ink -------------------------------------------------------------- */
  --tx:    #ECEFF1;   /* primary */
  --tx-hi: #FFFFFF;   /* display headings only — one step brighter than body */
  --mu:    #87939A;   /* secondary */
  --dim:   #5E6A71;   /* labels, hints */
  --faint: #3C464C;   /* disabled, closed days */

  /* --- action ----------------------------------------------------------- */
  /* One action colour. A second competes with it and nothing wins. */
  --on:    #F2F0EA;   /* warm off-white, not pure white */
  --onink: #0E1215;   /* what sits on top of it */

  /* --- signals ---------------------------------------------------------- */
  /* Each is a tint, a border and an ink. The ink clears 4.5:1 on its own
   * tint — checked, not assumed. Use the triple together or not at all. */

  --ok:        #5FB98A;
  --ok-bg:     #0F2416;
  --ok-line:   #1E5637;
  --ok-ink:    #9BD9B4;

  --warn:      #E0AE4D;
  --warn-bg:   #2A2112;
  --warn-sunk: #1E1A0D;
  --warn-line: #574225;
  --warn-ink:  #E0C08A;
  --warn-tx:   #E8D6B0;   /* body text on a warn tint */
  --warn-dim:  #B59A66;   /* secondary on a warn tint */

  --bad:       #E0705A;
  --bad-bg:    #1E1214;
  --bad-bg-2:  #2A1214;   /* the heavier tint, for an overdue badge */
  --bad-line:  #4A2328;
  --bad-line-2:#7F1D1D;
  --bad-ink:   #EFA99B;

  /* --- shape ------------------------------------------------------------ */
  --r-sm:   7px;    /* controls */
  --r:      9px;    /* buttons, inputs */
  --r-lg:  11px;    /* panels */
  --r-pill: 999px;

  /* --- type ------------------------------------------------------------- */
  --display: 'Vanguard CF', system-ui, sans-serif;
  --ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.22, .8, .3, 1);
}

/* Respect the setting. Every animation in both front ends is decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}