/*!
 * KRYON — brand tokens.
 *
 * One source for colour, type, shape and motion, shared by the public site, the
 * admin and the game.  The game is always night; the site and the admin follow
 * the visitor's system theme, so the same palette is offered twice: once as the
 * light default, once as the dark override behind the media query and the
 * explicit `data-theme="dark"` attribute the game page sets on <html>.
 *
 * The world is monochrome.  There is no hue anywhere in this file: every value
 * is a neutral grey drawn from one 4-bit scale, 0x00 0x11 0x22 ... 0xFF, and the
 * chrome is pinned to the four corners of it — 00, 33, 88, FF — so a button and
 * a room are lit by the same sixteen tones.  Status is never carried by colour,
 * because there is none to carry it: a warning is a glyph and a shape.
 *
 * Type is three faces, all self-hosted, so the runtime makes no request:
 *   Tiny5           the UI chrome      (SIL Open Font License)
 *   Press Start 2P  headings/wordmark  (SIL Open Font License)
 *   Manrope         long, dense text   (SIL Open Font License)
 *
 * The chrome face is chosen for legibility first.  Its Cyrillic set is a real
 * drawing of every letter: a pixel face whose Cyrillic is an afterthought turns
 * a Russian sentence into a row of ambiguous shapes, and no amount of spacing
 * repairs that.  Tiny5 is drawn on a grid of one eighth of an em, so the chrome
 * stays crisp when a size is a whole multiple of the grid.
 * Only the subsets the product can actually print are shipped.
 */

/* ------------------------------------------------------------- type faces */

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/web/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/web/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/web/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/web/fonts/manrope-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Tiny5 — the chrome: buttons, labels, tabs, the HUD.  One weight, one drawing.
 * Every letter of the Russian alphabet is in the design, which is the whole
 * reason this face replaced the one before it. */
@font-face {
  font-family: "Tiny5";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/tiny5-cyrillic-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Tiny5";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/tiny5-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Tiny5";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/tiny5-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Tiny5";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/tiny5-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Press Start 2P — the wordmark and the headings. One weight, one drawing: the
 * designer's own pixel grid, not a variable axis. */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/press-start-2p-cyrillic-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/press-start-2p-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/press-start-2p-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/web/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  /* type */
  --font: "Manrope Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* One face for everything.  The chrome used to be set in the pixel faces -
   * Tiny5 for the interface, Press Start 2P for the wordmark - and at the sizes
   * the interface uses, the pixel drawing was hard to read.  Both aliases now
   * name the same grotesk the body text uses, so a hint, a button and the
   * wordmark are all drawn as ordinary type.  The pixel faces and their files
   * stay in the bundle, unreferenced, in case the look is ever wanted back. */
  --font-pixel: var(--font);
  --font-display: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* A weight the face does not have is never faked, because a synthesised weight
   * smears the drawing rather than emboldening it.  Text rendering stays at the
   * browser default: pinning it to `geometricPrecision` switches hinting off,
   * and hinting is what keeps small text legible. */
  font-synthesis: none;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: clamp(26px, 2.6vw, 34px);
  --fs-3xl: clamp(34px, 4.6vw, 54px);

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* shape — there are no rounded corners in a pixel grid */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* The pixel unit: every offset, border and shadow is a whole multiple of it,
   * which is what keeps an edge crisp at any zoom. */
  --px: 2px;
  --border-width: 2px;

  /* motion — a transition is a count of frames, not a curve */
  --ease: steps(4, end);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---------------------------------------------------------------- light */

  --bg: #ffffff;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-hover: #888888;
  --border-subtle: #888888;
  --border: #333333;
  --border-strong: #000000;
  --text: #000000;
  --text-muted: #333333;
  --text-subtle: #888888;

  --accent: #000000;
  --accent-hover: #333333;
  --accent-soft: #888888;
  --accent-border: #000000;
  --accent-text: #000000;
  --accent-contrast: #ffffff;

  /* There is no colour to signal with, so the four states share the four tones
   * and differ by their glyph and their border instead. */
  --ok: #000000;
  --ok-soft: #888888;
  --ok-border: #000000;

  --warn: #333333;
  --warn-soft: #888888;
  --warn-border: #333333;

  --danger: #000000;
  --danger-soft: #888888;
  --danger-border: #000000;

  --shadow-sm: 2px 2px 0 0 #000000;
  --shadow: 4px 4px 0 0 #000000;
  --shadow-lg: 6px 6px 0 0 #000000;
}

/* ------------------------------------------------------------------ dark */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #000000;
    --bg-alt: #000000;
    --surface: #000000;
    --surface-2: #000000;
    --surface-hover: #333333;
    --border-subtle: #333333;
    --border: #888888;
    --border-strong: #ffffff;
    --text: #ffffff;
    --text-muted: #888888;
    --text-subtle: #333333;

    --accent: #ffffff;
    --accent-hover: #888888;
    --accent-soft: #333333;
    --accent-border: #ffffff;
    --accent-text: #ffffff;
    --accent-contrast: #000000;

    --ok: #ffffff;
    --ok-soft: #333333;
    --ok-border: #ffffff;

    --warn: #888888;
    --warn-soft: #333333;
    --warn-border: #888888;

    --danger: #ffffff;
    --danger-soft: #333333;
    --danger-border: #ffffff;

    --shadow-sm: 2px 2px 0 0 #333333;
    --shadow: 4px 4px 0 0 #333333;
    --shadow-lg: 6px 6px 0 0 #333333;
  }
}

/* The world is always night, whatever the visitor's system says. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --bg-alt: #000000;
  --surface: #000000;
  --surface-2: #000000;
  --surface-hover: #333333;
  --border-subtle: #333333;
  --border: #888888;
  --border-strong: #ffffff;
  --text: #ffffff;
  --text-muted: #888888;
  --text-subtle: #333333;

  --accent: #ffffff;
  --accent-hover: #888888;
  --accent-soft: #333333;
  --accent-border: #ffffff;
  --accent-text: #ffffff;
  --accent-contrast: #000000;

  --ok: #ffffff;
  --ok-soft: #333333;
  --ok-border: #ffffff;

  --warn: #888888;
  --warn-soft: #333333;
  --warn-border: #888888;

  --danger: #ffffff;
  --danger-soft: #333333;
  --danger-border: #ffffff;

  --shadow-sm: 2px 2px 0 0 #333333;
  --shadow: 4px 4px 0 0 #333333;
  --shadow-lg: 6px 6px 0 0 #333333;
}