/* Design tokens and the two self-hosted typefaces.
   Everything downstream reads colours, spacing and type from here. */

/* Space Grotesk: variable weight, used for display type and numerals. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  /* block, not swap: the boot screen is painted before any font arrives, and
     swap would show it in the system fallback first. The file is preloaded, so
     the invisible period is a few frames at most. */
  font-display: block;
}
/* Barlow: the UI face. Low-contrast and steady in the 6-12px HUD labels. */
@font-face {
  font-family: Barlow;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: Barlow, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Space Grotesk', Barlow, 'Segoe UI', system-ui, sans-serif;

  /* Tiny uppercase labels carry most of this UI; one scale keeps them even. */
  --label-sm: 10px;
  --label-md: 11px;
  --track-sm: 1.2px;
  --track-md: 1.5px;

  --ink: #e7edf6;
  --ink-dim: #93a8c0;
  --muted: #8090a6;
  --line: rgba(157, 188, 225, .16);
  --blue: #6dcaff;
  --cyan: #80e3fa;
  --gold: #edce8d;
  --space: #070d18;
  --surface: rgba(12, 21, 35, .76);
  --glass: rgba(4, 10, 20, .74);
  /* One fill for the in-flight HUD panels (system upgrades, ship status), opaque
     enough that the art behind a panel barely changes how dark it reads. */
  --hud-fill: rgba(7, 21, 36, .9);
  --hud-edge: rgba(92, 131, 159, .19);
}

/* The Android app (html.is-app is set by scripts/build-app.mjs). The page draws
   behind the camera cutout; --cutout-left/right are how far the interface keeps
   clear of it. Android reserves a strip as deep as the status bar for a punch-hole
   camera, far more than the hole itself, so half of it clears the hole without
   leaving that side of the screen emptier than the other. --hud-zoom draws the
   corner HUD panels smaller again on a phone. */
html.is-app {
  --cutout-left: calc(env(safe-area-inset-left, 0px) / 2);
  --cutout-right: calc(env(safe-area-inset-right, 0px) / 2);
  --hud-zoom: .85;
}