/*
 * Design tokens, Account Performance.
 *
 * Every colour and type value here was measured off Fabian's delivered
 * mockup render (from-client/2026-08-13-fabian/Mock Up -
 * artifact screenshot.png). See docs/design-system.md for the mapping
 * from token to the place it appears in that design.
 *
 * This file holds custom properties and the font faces only. Component
 * rules live in app.css.
 *
 * The faces are self-hosted, not fetched from the Google Fonts host: an
 * offline machine, or one where that host is blocked, must still render
 * the design. The woff2 files and their SIL Open Font License sit in
 * app/static/fonts/ and are served from /static/fonts/.
 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2");
}

:root {
  /* --- colour, measured from the artifact --- */
  --color-ink: #1d1f20;
  --color-ink-muted: #7a7a7d;
  --color-ink-soft: #a0a1a2;
  --color-surface: #f2f2f3;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eaeaec;
  --color-line: #d0d0d1;
  --color-line-strong: #b9babb;
  --color-navy: #1d2d3d;
  --color-steel: #5980a6;
  --color-steel-deep: #416180;
  --color-steel-dark: #3a5b7a;
  --color-sky: #d6ebff;
  --color-sky-text: #2c455d;
  --color-on-navy: #f2f2f3;
  --color-on-navy-muted: #b5d9fd;

  /* --- status, desaturated to sit beside the measured palette --- */
  --color-ok: #3f7d62;
  --color-ok-soft: #e2efe9;
  --color-warn: #8a6a2f;
  --color-warn-soft: #f3ece0;
  --color-bad: #a4453c;
  --color-bad-soft: #f4e5e3;
  --color-idle: #7a7a7d;
  --color-idle-soft: #e7e7e9;

  /* --- legacy aliases, kept so nothing that still reads the old names
     breaks mid-revamp. New code uses the names above. --- */
  --color-bg: var(--color-surface);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-text-inverse: var(--color-on-navy);
  --color-border: var(--color-line);
  --color-accent: var(--color-steel);
  --color-accent-soft: var(--color-sky);
  --color-surface-strong: var(--color-navy);
  --color-tile-figure-text: var(--color-ink);
  --color-tile-zero-text: var(--color-ink-muted);
  --color-tile-unavailable-bg: var(--color-surface);
  --color-tile-unavailable-border: var(--color-line-strong);
  --color-tile-unavailable-text: var(--color-ink-muted);

  /* --- spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- type --- */
  /* The artifact pairs Barlow Condensed with Barlow. Identified by
     fitting candidate faces to the rendered heading: Barlow Condensed
     700 matches at IoU 0.87, the next best face at 0.69, and Archivo
     (what this file used before) renders the same string 53% wider. */
  --font-display: "Barlow Condensed", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-base: var(--font-body);

  /* Sizes derived from the artifact by measuring cap and digit heights
     against Barlow's own cap/em of 0.705 and digit/em of 0.715, then
     checked against the rendered string widths. */
  --font-size-2xs: 11px;   /* hero tile label, chip text */
  --font-size-xs: 12px;    /* supporting tile label and delta */
  --font-size-sm: 13px;    /* body, eyebrow, context lines */
  --font-size-base: 13px;
  --font-size-md: 15px;    /* section tabs */
  --font-size-lg: 20px;    /* panel and section titles */
  --font-size-xl: 27px;    /* supporting tile value */
  --font-size-2xl: 38px;   /* page H1 */
  --font-size-3xl: 44px;   /* hero tile value */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Barlow Condensed tops out at 700 for this design; the black alias
     stays so existing rules keep working and resolve to the same 700. */
  --font-weight-black: 700;

  --letter-spacing-label: 0.09em;
  --letter-spacing-tab: 0.07em;
  --letter-spacing-title: -0.005em;
  --letter-spacing-value: -0.02em;

  /* --- geometry --- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-line);
  --content-width: 1120px;
  --page-gutter: 40px;
  --page-gutter-sm: 16px;
  --header-height: 56px;
}