/* The "familiar" appearance: the reference tool's own visual GRAMMAR, in this project's assets.
 *
 * The other half of this app ships a deliberate own-identity look - neutral ground, green buy, a
 * system UI face. That is a good design. It is also why the app feels foreign to someone who has
 * spent years in the reference tool, where BUY IS BLUE, sell is red, the ground is near-black and
 * everything is set in a condensed grotesque at 10-12px. Blue-versus-green for "buy" is not a
 * preference, it is muscle memory: a trained eye reads the colour before it reads the number.
 *
 * So this is a THEME, not a rewrite. Same layout, same controls, same positions - the palette,
 * type and density switch together, and the other look is one click away.
 *
 * On the font: Noto Sans Display Condensed is what the reference bundles, and it is also just a
 * Google font under the Open Font License. This copy came from Google Fonts, not from their
 * install, which is the difference between using an open typeface and lifting someone's assets.
 * Their exact sampled hexes are NOT reproduced here - these are our own values in their grammar.
 */

@font-face {
  font-family: 'Noto Sans Display Cond';
  src: url('/fonts/noto-sans-display-cond-400.woff2') format('woff2');
  font-weight: 400;
  font-stretch: 62.5%;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Display Cond';
  src: url('/fonts/noto-sans-display-cond-600.woff2') format('woff2');
  font-weight: 600;
  font-stretch: 62.5%;
  font-display: swap;
}

:root[data-appearance='familiar'] {
  /* Sampled from the running application, not remembered. The ground is a mid-dark neutral grey
     around #1f1f1f - NOT the near-black an earlier note claimed - and it is the reason the pale
     ladder cells read as light rather than as noise. */
  --bg: #1f1f1f;
  --panel: #252525;
  --panel-2: #2b2b2b;
  --panel-3: #323232;
  --line: #383838;
  --line-2: #464646;
  --grid: #282828;

  --ink: #dfdfe0;
  --ink-dim: #a9a9aa;
  --ink-faint: #737374;

  /* #22c55e and #ef4444 exactly as measured. */
  --buy: #22c55e;
  --buy-hi: #4ade80;
  --sell: #ef4444;
  --sell-hi: #f87171;

  --sel: #2e2e2e;
  --focus: #8f959b;

  /* Condensed everywhere, including the numbers. The reference sets its ladder figures in the
     same condensed face rather than a monospace one; at 10px a condensed grotesque fits more
     digits in a cluster cell than any mono, which is the whole reason a footprint uses one. */
  --ui: 'Noto Sans Display Cond', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'Noto Sans Display Cond', 'Roboto Condensed', ui-monospace, Menlo, monospace;

  /* Tighter bands: the reference gives the chart more of the screen than this did. */
  --h-menu: 22px;
  --h-tabs: 23px;
  --h-bar: 28px;
  --h-info: 19px;
  --h-status: 18px;

  --r: 1px;
}

/* Condensed digits need slightly more tracking to stay countable at 10px. */
:root[data-appearance='familiar'] .val,
:root[data-appearance='familiar'] .stat b,
:root[data-appearance='familiar'] .sb {
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}