/* The tokens of the page (CT1 to CT3). Colours, fonts and type styles are defined here and nowhere else; app.css only uses them.
   To change a colour, a typeface or one type style, change it in this file. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-standard.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

/* Colours: a name, a light value and a dark value. */
:root {
  --c-bg: #f3f5f4;
  --c-surface: #ffffff;
  --c-zebra: #f6f8f7;
  --c-ink: #17221f;
  --c-muted: #5d6b67;
  --c-line: #dde3e1;
  --c-accent: #1d5c4f;
  --c-accent-soft: #e2eeea;
  --c-on-accent: #ffffff;
  --c-ok: #1f7a3d;
  --c-ok-soft: #dcf1e2;
  --c-warn: #6b5a2a;
  --c-warn-soft: #f3ecd6;
  --c-danger: #a3342b;
  --c-danger-soft: #f8e1de;
  --c-veil: rgba(23, 34, 31, 0.45);
  /* One colour for each of eight category slots (the stripe on a calendar chip); a category takes slot id mod 8, in both themes. */
  --c-cat-0: #0f7a94; --c-cat-1: #b4541a; --c-cat-2: #3a5fb0; --c-cat-3: #8e3b8e;
  --c-cat-4: #8a6a00; --c-cat-5: #c23b5a; --c-cat-6: #4a7a1d; --c-cat-7: #5d6b67;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #121816; --c-surface: #1a2220; --c-zebra: #1e2725; --c-ink: #e6ecea; --c-muted: #97a6a1; --c-line: #2b3633;
    --c-accent: #7cc4b1; --c-accent-soft: #1f302c; --c-on-accent: #0d1513; --c-ok: #6fd394; --c-ok-soft: #19331f;
    --c-warn: #e0c779; --c-warn-soft: #332c17; --c-danger: #f19a92; --c-danger-soft: #3a1f1c; --c-veil: rgba(0, 0, 0, 0.6);
    --c-cat-0: #6cc8e0; --c-cat-1: #f0a06a; --c-cat-2: #8fb0f0; --c-cat-3: #d49ad4; --c-cat-4: #e0c050; --c-cat-5: #f08aa0; --c-cat-6: #a8d070; --c-cat-7: #aab8b3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-bg: #121816; --c-surface: #1a2220; --c-zebra: #1e2725; --c-ink: #e6ecea; --c-muted: #97a6a1; --c-line: #2b3633;
  --c-accent: #7cc4b1; --c-accent-soft: #1f302c; --c-on-accent: #0d1513; --c-ok: #6fd394; --c-ok-soft: #19331f;
  --c-warn: #e0c779; --c-warn-soft: #332c17; --c-danger: #f19a92; --c-danger-soft: #3a1f1c; --c-veil: rgba(0, 0, 0, 0.6);
  --c-cat-0: #6cc8e0; --c-cat-1: #f0a06a; --c-cat-2: #8fb0f0; --c-cat-3: #d49ad4; --c-cat-4: #e0c050; --c-cat-5: #f08aa0; --c-cat-6: #a8d070; --c-cat-7: #aab8b3;
  color-scheme: dark;
}

/* Type styles: each one is a single definition of family, size, weight, line height and letter spacing. */
.t-page-title { font-family: var(--f-display); font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; font-stretch: 80%; }
.t-section    { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; font-stretch: 85%; }
.t-card-title { font-family: var(--f-body); font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.t-body       { font-family: var(--f-body); font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.t-label      { font-family: var(--f-body); font-size: 0.85rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; }
.t-number     { font-family: var(--f-body); font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.t-small      { font-family: var(--f-body); font-size: 0.82rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; }