/* Brand tokens: the ONE place to change colours and type.
   To rebrand: edit the values below, replace public/brand/hero.jpg and the
   icons in public/icons/, and change "wordmark" in content/content.json. */

/* Figtree: the Dot brand book's approved substitute for Pulp Display (SIL OFL,
   public/fonts/LICENSE-Figtree.txt). Pulp Display (UpType Lab) needs a web-font
   licence before it can be self-hosted here; once licensed, add its @font-face
   rules and put it first in --font-display / --font-ui / --font-body. */
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/figtree-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/figtree-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/figtree-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/figtree-latin-900-normal.woff2') format('woff2'); }

:root {
  /* Core */
  --ink: #383B64;            /* primary text, headings, primary buttons */
  --ink-soft: #4A4D72;       /* body copy on cards */
  --ink-body: #1F2133;       /* long-form interpretation text */
  --ink-muted: #5C5F7E;      /* secondary labels */
  --grey: #6E6E6E;           /* captions, pole labels */
  --grey-light: #BDB8B0;     /* disabled, separators */
  --accent: #396A8A;         /* secondary blue */
  --wordmark: #FA550F;       /* brand wordmark colour */
  --watch: #A8381F;          /* "watch" labels, divergent badge */

  /* Surfaces */
  --page: #FFFFFF;
  --page-alt: #F5F3F0;       /* compare + detail background */
  --card: #FFFFFF;
  --line: rgba(56, 59, 100, 0.16);
  --line-soft: rgba(56, 59, 100, 0.10);
  --line-strong: rgba(56, 59, 100, 0.30);

  /* People: the dot/fill colour for each selected slot, in order */
  --person-1: #383B64;   /* Dot Blue Midnight: slot 1, normally You */
  --person-2: #A8381F;   /* Dot Orange Midnight */
  --person-3: #4F5C45;   /* Dot Green Midnight */
  --person-4: #D99E28;   /* Dot Yellow Midnight */
  /* Text on each person colour (initials). Browsers with contrast-color() choose
     automatically; these are the fallback. Keep each pair at 4.5:1 or better. */
  --person-1-on: #FFFFFF;  /* 10.6:1 */
  --person-2-on: #FFFFFF;  /* 6.5:1 */
  --person-3-on: #FFFFFF;  /* 7.1:1 */
  --person-4-on: #1F2133;  /* 6.7:1 */

  /* Inventories: track background, bar fill, radar stroke */
  --hpi-track: #FFF6D1;  --hpi-fill: rgba(255, 211, 24, 0.45);  --hpi-stroke: #D99E28;
  --hds-track: #FDE5D8;  --hds-fill: rgba(250, 85, 15, 0.30);   --hds-stroke: #E04A29;
  --mvpi-track: #E2F4F9; --mvpi-fill: rgba(110, 202, 225, 0.40); --mvpi-stroke: #396A8A;

  /* Type */
  --font-display: 'Figtree', system-ui, sans-serif;  /* titles, wordmark */
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* labels, buttons */
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --tracking-label: 0.06em;
  --tracking-caps: 0.08em;

  --tap: 44px;               /* minimum tap target */
  --gutter: 16px;
  --max-width: 900px;
}