/* TogetherFX — design tokens, fonts and shared rules (spec §10).
 *
 * Dark is the default theme. The light variant reuses the same token names:
 * it is prepared below but stays off until a ticket enables it.
 */

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — see static/fonts/LICENSE-*) ---------- */

/* Inter 4.1 variable: Latin, Latin Extended, Vietnamese, Greek, Cyrillic. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter has no Thai glyphs: Noto Sans Thai variable, subset to the Thai block. */
@font-face {
  font-family: "Noto Sans Thai";
  src: url("/static/fonts/NotoSansThai-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  /* Palette (dark, default) */
  --bg: #101820;
  --surface: #17232d;
  --text: #f3f0e7;
  --text-muted: #b9b8b1;
  --accent: #d6b777;
  --positive: #78bba5;
  --negative: #e58a8a;
  --border: #2a3a47;

  /* Light variant — reserved, not active yet (see "Light theme" below). */
  --bg-light: #f7f4ec;
  --surface-light: #ffffff;
  --text-light: #101820;
  --text-muted-light: #4a5560;
  --accent-light: #85662a;
  --positive-light: #2b7562;
  --negative-light: #b23b3b;
  --border-light: #d9d3c4;

  /* Typography */
  --font-sans: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-base: 1rem; /* 16 px minimum body text */
  --font-size-small: 0.875rem;
  --font-size-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --line-height: 1.6;

  /* Shape and rhythm: thin separators, discreet radii */
  --radius: 6px;
  --hairline: 1px solid var(--border);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --content-max: 72rem;
}

/* ---------- Light theme (prepared, disabled) ----------
 * Activation later: either set data-theme="light" on <html>, or uncomment the
 * media query to follow the OS preference. Both map the same tokens.
 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --text: var(--text-light);
  --text-muted: var(--text-muted-light);
  --accent: var(--accent-light);
  --positive: var(--positive-light);
  --negative: var(--negative-light);
  --border: var(--border-light);
}

/*
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: var(--bg-light);
    --surface: var(--surface-light);
    --text: var(--text-light);
    --text-muted: var(--text-muted-light);
    --accent: var(--accent-light);
    --positive: var(--positive-light);
    --negative: var(--negative-light);
    --border: var(--border-light);
  }
}
*/

/* ---------- Shared rules ---------- */

/* Tabular figures wherever numbers line up. */
table,
time,
.num,
.amount {
  font-variant-numeric: tabular-nums;
}

/* Signed amounts — always rendered through the `amount` macro
 * (templates/macros/money.html), which writes the sign AND the label in the
 * text. These classes only add colour on top: colour never carries meaning alone.
 */
.amount {
  white-space: nowrap;
}

.amount--gain {
  color: var(--positive);
}

.amount--loss {
  color: var(--negative);
}

.amount--flat {
  color: var(--text-muted);
}

.amount__label {
  font-size: 0.9em;
}

/* No animation that slows reading. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}