/*
 * kit/web/tokens.css — the design-token structure the apps share, as CSS custom properties.
 *
 * COPIED, NOT IMPORTED: each app copies this folder at the kit tag it pins, and runs
 * check-copy.sh in CI so the copy cannot drift from that tag (see README.md).
 *
 * Default values are SportPass's (sportpass/public/index.html, 2026-09-13). An app changes the
 * BRAND SLOTS by redefining them after this file loads; it never edits this file. The semantic
 * tokens are meanings, not colours: a status is --positive / --warning / --info everywhere, and
 * the act colour is reserved for selling and acting.
 */

:root {
  /* ── Brand slots (an app overrides these) ─────────────────────────────── */
  --brand: #D50A0A;       /* the act colour: sell, send, confirm. Nothing decorative wears it. */
  --brand-dark: #A30808;  /* pressed / hover state of --brand */

  /* ── Surface ──────────────────────────────────────────────────────────── */
  --ink: #34302B;         /* body text */
  --paper: #F4F2EE;       /* page ground */
  --line: #E5E1DA;        /* rules and card borders */

  /* ── Semantic status ──────────────────────────────────────────────────── */
  --field: #1E7D4F;       /* positive: earned, paid, sold */
  --field-dark: #175F3D;
  --bay: #FF7900;         /* warning / in flight: held, deferred, pending */
  --info: #1F7A8C;        /* the ONLY teal; never a raw library cyan */

  /* ── Neutral aliases (new code reads these; the names above stay for existing code) ── */
  --act: var(--brand);
  --act-dark: var(--brand-dark);
  --surface: var(--paper);
  --rule: var(--line);
  --positive: var(--field);
  --positive-dark: var(--field-dark);
  --warning: var(--bay);
}

/* ── Type roles. Fonts are loaded by the app (Google Fonts link in its HTML). ── */
.font-display { font-family: 'Saira Condensed', system-ui, sans-serif; }
.font-body { font-family: 'Hanken Grotesk', system-ui, sans-serif; }
/* Money and every figure: tabular numbers so columns align. */
.font-tab { font-family: 'Spline Sans Mono', ui-monospace, monospace; font-feature-settings: 'tnum' 1; }

/* ── Semantic tints and edges: pair with text in the matching token. ── */
.tint-field { background: color-mix(in srgb, var(--field) 10%, white); }
.tint-brand { background: color-mix(in srgb, var(--brand) 6%, white); }
.hover-tint-brand:hover { background: color-mix(in srgb, var(--brand) 6%, white); }
.edge-brand { border-color: color-mix(in srgb, var(--brand) 30%, white); }
.tint-bay { background: color-mix(in srgb, var(--bay) 12%, white); }
.tint-info { background: color-mix(in srgb, var(--info) 10%, white); }
.edge-field { border-color: color-mix(in srgb, var(--field) 30%, white); }
.edge-bay { border-color: color-mix(in srgb, var(--bay) 35%, white); }
.edge-info { border-color: color-mix(in srgb, var(--info) 30%, white); }

/* ── Motion, only for people who have not asked for less. ── */
@media (prefers-reduced-motion: no-preference) {
  .lift { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
  .lift:hover { transform: translateY(-1px); }
}

/* ── Print isolation: only a .print-sheet prints (a clean workpaper PDF). ── */
@media print {
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .print-sheet { position: absolute; left: 0; top: 0; width: 100%; border: none !important; }
  .print-hide { display: none !important; }
  @page { margin: 14mm; }
}