/* 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.
 */

/* --- Montserrat: everything that is not a heading ----------------------- */
/* Served from this site, not Google Fonts (13 Nov), so no visitor's IP address goes to a
 * third party, and the first paint does not wait on another domain over mobile data.
 * One file: it is the latin subset Google itself served, a variable font covering every
 * weight the UI uses (400, 500, 600, 700) in 35 KB, which is less than four separate
 * weights would be. Licence: Montserrat-OFL.txt, alongside. */

@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 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;

  /* --- space ------------------------------------------------------------ */
  /* The form's vertical rhythm (13 Nov). One scale, applied the same whether a block is
   * always there or revealed by an answer, so a revealed section never looks like part
   * of the control above it. */
  --sp-section: 20px;   /* above a section: its label, or a box that opens one */
  --sp-label:    9px;   /* a label, or its hint, to what it labels */
  --sp-field:    9px;   /* one field to the next inside a section */

  /* --- touch ------------------------------------------------------------ */
  /* Touch. iOS Safari zooms into any form control whose text is under 16px, and stays
     zoomed. Controls use this, not the body size, so the type scale is unchanged. */
  --control-font: 16px;
  /* The notch, the home indicator and rounded corners. Zero in a browser tab, real once the
     coach app is on the home screen (viewport-fit=cover is set on both pages). */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* --- 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;
  }
}