/*
 * Experdite design tokens: the ONE place brand colours and fonts are set.
 *
 * Every page of the site and every report loads this file, and every
 * colour and font anywhere else is written as var(--color-…) / var(--font-…).
 * Change a value here and it changes everywhere. Do not write hex, rgb() or
 * font names in any other file: `npm run check:tokens` fails if you do.
 *
 * Source of truth for the values: Colours.md. For a see-through version of
 * a colour use color-mix(in srgb, var(--color-navy) 40%, transparent).
 */

/* ── Fonts: self-hosted DejaVu 2.37, Latin subset ──────────────────────── */
@font-face {
  font-family: 'DejaVu Serif';
  src: url('/fonts/DejaVuSerif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DejaVu Serif';
  src: url('/fonts/DejaVuSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/fonts/DejaVuSans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/fonts/DejaVuSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('/fonts/DejaVuSansMono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typefaces */
  --font-serif: 'DejaVu Serif', Georgia, serif; /* headings */
  --font-sans: 'DejaVu Sans', Verdana, sans-serif; /* body and UI */
  --font-mono: 'DejaVu Sans Mono', Consolas, monospace; /* eyebrows, figures */

  /* Navy: primary brand colour */
  --color-navy: #112d43;
  --color-navy-light: #1d4560; /* top of gradients, hover */
  --color-navy-dark: #0d2536; /* bottom of gradients, deep backgrounds */

  /* Steel blue: supporting colour (illustrations, surfaces) */
  --color-steel: #7399c6;
  --color-steel-light: #b8d0e5;
  --color-steel-dark: #315c85;

  /* Teal: functional accent */
  --color-teal-light: #cfeaed;
  --color-teal: #2f8f9d;
  --color-teal-dark: #1f6e7a;
  --color-teal-on-navy: #6cc4cf; /* any teal that sits on a navy background */

  /* Warm and signal colours (named by hue; states below map onto them) */
  --color-orange: #d9822b;
  --color-orange-tint: #fcf4ec;
  --color-yellow: #d6b23a;
  --color-yellow-tint: #fbf8ed;
  --color-green: #3f9a5c;
  --color-green-tint: #eef6f0;
  --color-purple: #777f9e;
  --color-purple-tint: #f0f1f6;

  /* Leadership states: dark = bars, dots, tags; tint = card background */
  --color-state-convergence: var(--color-green);
  --color-state-convergence-tint: var(--color-green-tint);
  --color-state-overreach: var(--color-yellow);
  --color-state-overreach-tint: var(--color-yellow-tint);
  --color-state-correction: var(--color-purple);
  --color-state-correction-tint: var(--color-purple-tint);
  --color-state-drift: var(--color-orange);
  --color-state-drift-tint: var(--color-orange-tint);

  /* Neutrals */
  --color-bg: #f8fafc; /* page background */
  --color-white: #ffffff; /* cards, text on navy */
  --color-ui-grey: #eef2f6; /* inputs, inactive controls, table headers */
  --color-black: #000000; /* shadows and overlays only */

  /* National flags: real colours, never recoloured to the brand */
  --color-flag-china-red: #de2910;
  --color-flag-china-yellow: #ffde00;
  --color-flag-us-red: #b22234;
  --color-flag-us-blue: #3c3b6e;

  /* Shape */
  --radius-card: 16px;
}