/*
 * Shared theme for the entry page and the proxy UI: near-black, neutral greys,
 * a silver accent, heavy all-caps condensed type, hard corners. Modelled on
 * the onX Offroad look. Fonts are self-hosted (./fonts) so the page makes no
 * third-party requests.
 *
 * Deliberately NOT setting `color-scheme: dark` on :root - the proxied pages
 * live in iframes under it, and a scheme mismatch makes the browser paint an
 * opaque backdrop behind them. Dark is painted by hand instead.
 */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/barlow-condensed-800.woff2) format("woff2"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/lora.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito.woff2) format("woff2"); }

:root {
  --bg: #0a0a0a;
  --bar: #121212;
  --panel: #1a1a1a;
  --edge: #2a2a2a;
  --text: #f2f2f2;
  --muted: #8a8a8a;
  --accent: #e6e6e6;
  --accent-press: #ffffff;
  --on-accent: #0a0a0a;
  --danger: #ff5a4f;
  --ok: #cfcfcf;
  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  /* Secondary text and the faint hint colours (they used to be hard-coded greys). */
  --soft: #cfcfcf;
  --faint: #333333;
  --faint2: #4a4a4a;

  /* Style knobs. The Appearance panel in the portal changes these (and the colours
     above) per device; see "THEME" in site/views/app.html. Defaults = the original look. */
  --radius: 3px;           /* corner rounding */
  --case: uppercase;       /* uppercase | none */
  --ts: 1;                 /* letter-spacing multiplier */
  --scheme: dark;          /* dark | light: tells the browser how to draw scrollbars and inputs */
  --line-rgb: 255 255 255; /* colour of the background contour lines, as "r g b" */
  --topo: 1;               /* 1 = show the contour lines, 0 = plain background */
}

* { box-sizing: border-box; }

/* Memory-saver mode (see "memory care" in site/views/app.html) drops the decorative lines: two
   full-screen repeating gradients are pure cost on a small device. !important because a saved
   theme sets --topo inline on <html>. */
html.lite { --topo: 0 !important; }

/* Faint topographic-contour texture: two sets of concentric rings from
   different centres, interfering into something map-like. */
.topo {
  background-color: var(--bg);
  background-image:
    repeating-radial-gradient(circle at 16% 24%, transparent 0 21px, rgb(var(--line-rgb) / calc(var(--topo) * 4%)) 21px 22px),
    repeating-radial-gradient(circle at 84% 80%, transparent 0 29px, rgb(var(--line-rgb) / calc(var(--topo) * 2.2%)) 29px 30px);
}