/* ===========================================================
   VERAXIS · BRAND TOKENS  (sandbox: brand test, palette v3, Familjen and Hanken)
   Every brand colour, font and heading weight lives here and
   only here. Pages and veraxis.css refer to these by role, so
   a palette or font change is an edit to this file alone.
   Loaded before veraxis.css by _layouts/default.html and by the
   two standalone Diagnostic pages.
   Fonts themselves load from Google Fonts in those three heads.
   =========================================================== */

:root {
  /* core palette */
  --navy:        #052146;   /* base, dark sections, headings on light */
  --navy-deep:   #03152E;   /* home hero only */
  --pink:        #F83A80;   /* primary CTA and the edge-line only */
  --pink-hover:  #E02A6D;
  --pink-rgb:    248, 58, 128;
  --accent:      #55C1FF;   /* accents on navy: eyebrows, tagline, stars, top rules */
  --accent-rgb:  85, 193, 255;
  --accent-soft: #CCEBFF;   /* hover tint (Diagnostic) */
  --star:        #FFD884;   /* the North Star mark and its connector line only */
  --star-rgb:    255, 216, 132;

  /* light surfaces */
  --surface:     #F7F2F0;   /* light section and card background */
  --line:        #E8DDDA;   /* hairline on light */

  /* violet */
  --violet:      #715AFF;   /* panels on navy, card borders, links on light */
  --violet-rgb:  113, 90, 255;
  --link-light:  var(--violet);   /* text links on white and blush */
  --link-dark:   var(--pink);     /* text links on navy */

  /* panels and rules */
  --panel:          #193963;   /* panels and cards on navy */
  --panel-feature:  #715AFF;   /* the Diagnostic box and the Start here cards */
  --on-feature-label: #FFFFFF;   /* eyebrow on a feature panel */
  --on-feature-muted: #FFFFFF;         /* secondary text on a feature panel */
  --on-feature-body:  #FFFFFF;         /* body text on a feature panel */
  --label:       #193963;   /* eyebrows and labels on light */
  --rule:        #193963;   /* card top rules on light */
  --card-rule:   #715AFF;   /* card top rules on navy */

  /* text */
  --grey:        #37455A;   /* body text on light */
  --intro:       #25405F;   /* intro text on light */
  --body-text:   #37455A;   /* body grey on light */
  --muted:       #AEBECF;   /* body text on navy. Do not go dimmer. */
  --muted-rgb:   174, 190, 207;
  --muted-light: #DDE5EF;   /* lighter text on navy */

  /* type */
  --font-h:       'Familjen Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-b:       'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-tagline: var(--font-b);   /* "The right change, in the right order." */
  --fw-heavy:     700;   /* headings */
  --fw-black:     700;

  /* heading tracking, tuned to the heading font. Familjen is already tight, so less squeeze than Lato needed */
  --track-display: -.01em;   /* hero headline */
  --track-xl:      -.005em;  /* large headings */
  --track-h2:      0;        /* section headings */
  --track-h3:      0;        /* card headings */
  --track-body:    .01em;    /* body, lead and tagline */
}

body { letter-spacing: var(--track-body); }