/* PontisAi design tokens and self-hosted faces.

   Shared by index.html (the landing page) and board.html (the dashboard).
   Extracted so the two pages cannot drift apart: they are one product and a
   token redefined on one page but not the other is the fastest way to stop
   looking like it.

   Self-hosted because the published CSP is `default-src 'self'` with no
   font-src, so the Google Fonts CDN is blocked. Anything added here needs a
   matching entry in serve_dashboard.py's ALLOWED_EXACT and build_site.py's
   STATIC_FILES, or it 404s locally / vanishes from the deploy.
*/

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-var-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Height of the fixed desktop header. Three other rules are pinned to it
     -- the subnav sits directly below, and main's top padding clears both
     -- so it lives here rather than being restated as a magic 72 in four
     places that then drift apart.
     Back at its original 72px: taller centred the brand lockup properly but
     read as dead black space, which is the worse trade. The lockup is 50px
     in a 48px content box at this height, so it slightly overflows its
     padding -- deliberate, and the reason the wordmark sits a touch high. */
  --header-h: 56px;
  --subnav-h: 42px;
  --header-shell-x: 32px;
  --header-shell-top: 16px;
  /* One number for the page gutter, so the header, the filter bar and the
     content below them actually line up on the same left edge. */
  --gutter: var(--s5);

  /* ---- Families ----
     Newsreader carries the voice and appears only at display sizes.
     Archivo is the working face for chrome and prose. IBM Plex Mono is
     not decoration: every numeral in the interface is set in it, which
     is what makes columns align without a single width declaration. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Type scale. Eight steps, replacing the 30 ad-hoc sizes that
     were here before. Prose sizes and numeral sizes are separate ramps
     because Plex Mono runs small against Archivo at equal px. ---- */
  --t-display: clamp(38px, 3.6vw, 56px);
  --t-h1: 27px;
  --t-h2: 18px;
  --t-body: 14px;
  --t-label: 12px;
  --t-micro: 11px;
  --n-hero: 38px;
  --n-lg: 21px;
  --n-md: 15px;
  --n-sm: 12px;

  /* ---- Ground and ink ----
     Four surfaces, four inks, two hairlines. The ground is a true
     near-black with a hair of warmth rather than the blue-black it was,
     because everything sitting on it is now neutral and a cool ground
     tinted the whole board. */
  --ground: #0a0a0b;
  --surface-1: #101012;
  --surface-2: #151517;
  --surface-3: #1c1c1f;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.13);
  --fg-1: #ededee;
  --fg-2: #a3a3a8;
  --fg-3: #6e6e75;
  --fg-4: #48484f;

  /* ---- Identity. The wordmark and the active nav item, and nothing
     else. The moment this green lands on a probability the board goes
     back to looking like something selling you a position. ---- */
  --brand: #27b84f;

  /* ---- The only saturated colour in the data layer ----
     Not the pick, not the odds, not the result: calibration error. A
     warm mark means that confidence tier has historically delivered
     LESS than it claimed, a cool one more, and neutral means the tier
     is honest. This is the one thing worth spending colour on, because
     it is the one thing no other board will show you. */
  --over: #e0813a;
  --under: #4a90d9;
  --even: var(--fg-3);

  /* ---- Geometry. Three radii replacing twelve. Data surfaces are
     square: the soft 12-18px corner is what reads as a product tile,
     and a product tile is exactly what a row of games is not. ---- */
  --r-flat: 0px;
  --r-control: 4px;
  --r-dot: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 18px;
  --s5: 28px;
  --s6: 44px;

  /* ---- Legacy aliases ----
     The stylesheet below still names these. Pointing them at the new
     scale repalettes the whole sheet in one step and lets the rules be
     rewritten in place afterwards rather than in one unreviewable
     rewrite. Anything still reading an alias has not been converted
     yet; the goal is for this block to end up empty. */
  --ink: var(--fg-1);
  --ink-2: var(--fg-2);
  --muted: var(--fg-3);
  --paper: var(--ground);
  --panel: var(--surface-1);
  --panel-solid: var(--surface-2);
  --line: var(--hairline);
  --blue: var(--under);
  --blue-soft: rgba(74, 144, 217, 0.12);
  --blue-muted: #2c3b4d;
  --green: var(--brand);
  --brand-green: var(--brand);
  --red: var(--over);
  --gold: var(--fg-3);
  /* An instrument does not float. */
  --shadow: none;
}