/* Design tokens for Honest Analytics.
 *
 * Every value here is transcribed from the signed-off prototype
 * (Honest Analytics.dc.html) and its accompanying Design notes. Do not round,
 * rescale or "tidy" these — the type sizes are irregular on purpose.
 *
 * This file contains :root and nothing else. No selectors, no components.
 * It is also imported by the VuePress docs so both halves of the site share
 * one colour source.
 */

:root {
  /* Ink ------------------------------------------------------------------ */
  --ink: #16181A;
  --ink-secondary: #4B5157;
  --ink-muted: #6B7278;
  /* The faintest step that still passes AA on --paper. Nothing lighter. */
  --ink-faint: #606870;
  /* List and disclosure body text. */
  --ink-list: #25292D;

  /* Surfaces ------------------------------------------------------------- */
  --paper: #FCFCFB;
  --surface: #FFFFFF;
  --surface-sunk: #FAFBFB;
  --surface-footer: #FAFAF9;
  --surface-code: #F6F7F8;

  /* Rules ---------------------------------------------------------------- */
  --rule: #E6E8EA;
  --hairline: #EFF1F2;
  /* Underline beneath secondary "See the live demo" style links. */
  --rule-underline: #C7CDD2;

  /* Accent --------------------------------------------------------------- */
  --accent: #2271B1;
  --accent-hover: #17537F;
  --accent-tint: #F2F7FB;
  --accent-rule: #BBD3E6;
  --accent-border: #C7D9E8;

  /* Data ----------------------------------------------------------------- */
  /* Mono labels and the founder note's rule. */
  --data: #2F7E76;

  /* Undecided values ----------------------------------------------------- */
  /* Remove at launch, once nothing carries class="tbc" any more. */
  --tbc: #FFF6E0;

  /* Type ----------------------------------------------------------------- */
  --font-display: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Geometry ------------------------------------------------------------- */
  /* Two radii, deliberately. A single --radius would be wrong immediately. */
  --radius-control: 3px;
  --radius-surface: 4px;

  --measure-body: 620px;
  --measure-page: 1120px;

  /* The one responsive token.
   *
   * Every horizontal padding in the design is 40px on desktop and 20px on
   * mobile — one idea, seven call sites. The verticals (80/72/26/18 desktop
   * against 40/56/24/14 mobile) share no scale at all, so they stay as
   * literals on the rules that use them. See the media query at the foot of
   * site.css. */
  --gutter: 40px;
}

@media (width < 900px) {
  :root {
    --gutter: 20px;
  }
}