/* ══════════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink-2);
  /* ⚠️ DECIDE THIS PER PROJECT. Class Planner sets min-width: 1100px because
     it is a desktop-only staff tool full of wide timetable grids — below that
     the columns collapse into nonsense, so a horizontal scrollbar is the
     honest answer. A public-facing or mobile site must NOT copy that line:
     it forces every phone into sideways scrolling.
     Uncomment only if your site is genuinely desktop-only.
  min-width: 1100px; */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings carry the display face; everything else stays on Inter. That split
   is ClickUp's own (per Big, 2026-08-10) and it is the whole reason to load two
   families — one face everywhere would just be Inter with extra bytes.
   Thai and Chinese headings fall through to the system stack per character,
   exactly as the body text does; see the --font-display comment in tokens.css. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.3;
}

/* Numbers in tables must line up column to column. */
table,
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Text selection. In Class Planner this borrowed the English-language blue;
   here it points at the accent tokens so it follows whatever you pick. */
::selection {
  background: var(--sel-bg);
  color: var(--sel-ink);
}

/* One focus ring for the whole app. Ink, offset, never removed. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Standard thin scrollbars — the native control, just slimmer.
   Opt in by putting .scroll-thin on any element that scrolls. */
.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}