/* Jalten design system: tokens, Clear Sky.
   A cool foundation: light grey canvas, white surfaces, near-black type and
   hairline borders. Jalten blue carries the brand, primary actions and
   protection; deep ink blue is the dark surface; amber and red are reserved
   for real warnings and errors. Text pairs meet WCAG AA.
   #3478f6 is the brand blue for the logo, marks, charts and meters. Buttons
   and blue text use slightly deeper shades (#2d6ce6, #1f5bd0) so that white
   text and blue text both pass AA. Provider logos keep their own colours. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Canvas and surfaces */
  --canvas: #f4f7fa;          /* page and application canvas */
  --canvas-2: #eef3f8;        /* secondary canvas, quiet fills, tracks */
  --canvas-3: #e1e8f0;        /* pressed fills, empty meter tracks */
  --surface: #ffffff;         /* navigation, headers, cards, dialogs, tables */
  --surface-2: #f8fafc;       /* wells inside white surfaces */
  --white: #ffffff;

  /* Ink */
  --ink: #111827;             /* primary text: 17.7:1 on white */
  --ink-2: #344054;           /* strong secondary text: 10.4:1 on white */
  --ink-3: #667085;           /* secondary text: 5.0:1 on white, 4.6:1 on canvas */
  --ink-4: #98a2b3;           /* decorative only, never text */

  /* Lines */
  --line: #dce4ec;
  --line-soft: #e9eef4;
  --line-strong: #c7d2de;

  /* Jalten blue: brand, primary actions, protection */
  --brand: #2d6ce6;           /* buttons and selected fills: white on it 4.8:1 */
  --brand-hover: #2160d6;
  --brand-deep: #1d4fbf;      /* blue text on light sky: 6.6:1 */
  --brand-ink: #101b32;       /* deep ink blue */
  --brand-mark: #3478f6;      /* the brand blue: logo, icons, marks, charts */
  --safe: #eaf4ff;            /* light sky: the protected state */
  --safe-2: #f3f8ff;
  --safe-line: #c6dafb;

  /* Blue: links and selections */
  --harbour: #3478f6;         /* fills, chart series, selection rings */
  --harbour-strong: #1f5bd0;  /* blue text: 6.0:1 on white */
  --harbour-soft: #eef4fe;
  --harbour-line: #c6dafb;

  /* Warning and error only */
  --amber: #8f560b;
  --amber-bg: #fdf4e4;
  --amber-line: #f0d9ab;
  --red: #b42318;
  --red-bg: #fdf0ee;
  --red-line: #f4d0ca;

  /* Dark surfaces: deep ink blue */
  --night: #101b32;
  --night-2: #172642;
  --night-3: #1f2f4f;
  --night-line: #2a3a5a;
  --on-night: #eef3fb;
  --on-night-2: #a9b7cf;
  --brand-on-night: #74c5ff;  /* signal blue */
  --harbour-on-night: #9cc3ff;

  /* Provider series (charts): a Clear Sky data palette, labelled everywhere */
  --p-openai: #3478f6;
  --p-anthropic: #101b32;
  --p-google: #7c8ba3;

  /* Type */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shape: modest radii; full pills only for tags, filters and statuses */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --shadow-1: 0 1px 2px rgba(16, 27, 50, 0.05);
  --shadow-2: 0 1px 2px rgba(16, 27, 50, 0.04), 0 4px 14px rgba(16, 27, 50, 0.06);
  --shadow-3: 0 2px 6px rgba(16, 27, 50, 0.06), 0 18px 44px rgba(16, 27, 50, 0.16);
  --focus: 0 0 0 3px rgba(52, 120, 246, 0.32);

  /* 4px spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
}