/* contra design tokens ("Porcelain"), shared by the landing page and the app.
   Off-white ground, white surfaces with hairline borders, near-black ink, one teal for long and
   one purple for short (from the logo), red only for errors. Depth comes from borders, not shadows; a hair of shadow only on raised
   controls. Inter Tight for words, IBM Plex Mono for numbers. */

@font-face { font-family: "Inter Tight"; font-weight: 400; font-display: swap; src: url("/fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url("/fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-display: swap; src: url("/fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url("/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --soft: #f0f2ee;
  --line: #e3e6e1;
  --line-2: #eceeea;
  --ink: #0c0f0e;
  --ink-2: #2b302e;
  --text-2: #5e6662; /* secondary text, 5.9:1 on --bg */

  --long: #007a63; /* long text on white, 5.2:1 */
  --long-btn: #00826a; /* white text on it passes 4.5:1 */
  --long-line: #00a887; /* charts */
  --long-soft: #e3f7f2;
  --short: #5b3ff5;
  --short-btn: #5b40f5;
  --short-line: #8b6cff;
  --short-soft: #efebfe;
  --danger: #c93a40;
  --warn: #9a6400;
  --warn-soft: #fff4dc;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-card: 16px;
  --r-ctl: 10px;
  --raise: 0 1px 2px rgba(12, 15, 14, 0.08);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--long-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--long-line); outline-offset: 2px; border-radius: 6px; }

/* the mark is white/grey on transparent: it always sits on its black tile */
.mark-tile { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); display: inline-grid; place-items: center; flex: none; }
.mark-tile img { width: 22px; height: 22px; display: block; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl);
  font: 600 15px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); }
.btn-line { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: #c9cdc7; }
.btn-long { background: var(--long-btn); color: #fff; }
.btn-long:hover { background: var(--long); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}