/* SPDX-License-Identifier: AGPL-3.0-only */
/* Copyright 2026 Polycode Limited */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
}

/* Every colour, face, size, space and rule the page uses. No other file under
   packages/ui names a colour; dark mode redefines the same tokens. */

:root {
  color-scheme: light dark;

  /* Paper and ink */
  --paper: #ffffff;
  --paper-deep: #f8f9fa;
  --rule: #dee2e6;
  --edge: #868e96;
  --ink: #212529;
  --ink-soft: #495057;
  --grey: #666e76;
  --red-ink: #a1232b;
  --amber: #8a5a00;
  --highlight: #f7e36b;
  --highlight-deep: #e9cf3a;
  --navy: #003366;
  --link: #0056b3;
  --focus: #0056b3;
  --action-ink: #ffffff;
  --spend-fill: #495057;
  --spend-empty: #dee2e6;
  --scrim: color-mix(in srgb, var(--ink) 60%, transparent);

  /* Faces */
  --face-tool: "Source Sans 3", "Helvetica Neue", Arial, system-ui, sans-serif;
  --face-witness: "Source Serif 4", "Times New Roman", Times, serif;
  --weight-prose: 400;
  --weight-label: 600;

  /* Scale, in rem on the root */
  --size-small: 0.875rem;
  --line-small: 1.4;
  --size-body: 1rem;
  --line-body: 1.55;
  --size-lead: 1.125rem;
  --line-lead: 1.45;
  --size-title: 1.25rem;
  --line-title: 1.3;
  --size-tab: 0.8125rem;
  --measure: 68ch;

  /* Space and rule */
  --unit: 0.5rem;
  --gutter: calc(var(--unit) * 2);
  --target: 2.75rem;
  --rule-width: 1px;
  --radius: 2px;

  /* Focus */
  --focus-width: 2px;

  /* Motion */
  --quick: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17191c;
    --paper-deep: #21242a;
    --rule: #3a3e45;
    --edge: #7c838c;
    --ink: #ecedef;
    --ink-soft: #b5b9c0;
    --grey: #949aa3;
    --red-ink: #f0787e;
    --amber: #e3b04b;
    --highlight: #5c4e0f;
    --highlight-deep: #75651a;
    --navy: #9ec5fe;
    --link: #8ab4f8;
    --focus: #8ab4f8;
    --action-ink: #0b1a2e;
    --spend-fill: #b5b9c0;
    --spend-empty: #3a3e45;
  }
}

html[data-present] {
  font-size: 20px;
  --gutter: calc(var(--unit) * 3);
}