/* Every colour, size and distance the site uses, as a variable. Components and
   layout take their values from here and nowhere else: change a token, and every
   button, field and page that uses it follows. /styleguide shows them all. */

:root {
  color-scheme: dark;

  /* ---- Colour: surfaces, from the night sky up ---- */
  --color-bg: #0b0e13;
  --color-bg-top: #121925;
  --color-surface: rgba(20, 26, 36, 0.92);
  --color-surface-solid: #141a24;
  --color-field: rgba(0, 0, 0, 0.25);
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-strong: rgba(255, 255, 255, 0.16);
  --color-backdrop: rgba(0, 0, 0, 0.6);

  /* ---- Colour: text ---- */
  --color-text: #e8e6e1;
  --color-text-muted: #9aa3ad;

  /* ---- Colour: the accent, gold like runes and fire ---- */
  --color-accent: #d9a441;
  --color-accent-hover: #e6b65c;
  --color-on-accent: #1c1406;
  --color-accent-soft: rgba(217, 164, 65, 0.12);
  --color-accent-line: rgba(217, 164, 65, 0.45);
  --color-selection: rgba(217, 164, 65, 0.35);

  /* ---- Colour: meaning ---- */
  --color-ok: #7cc48a;
  --color-ok-soft: rgba(124, 196, 138, 0.12);
  --color-ok-line: rgba(124, 196, 138, 0.5);
  --color-danger: #ef8a80;
  --color-danger-soft: rgba(239, 138, 128, 0.12);
  --color-danger-line: rgba(239, 138, 128, 0.5);
  --color-danger-text: #ffd9d4;

  /* ---- Colour: Steam's own, for its button ---- */
  --color-steam: #1b2838;
  --color-steam-hover: #2a475e;
  --color-steam-text: #c7d5e0;
  --color-steam-line: rgba(102, 192, 244, 0.35);

  /* ---- The northern light behind every page ---- */
  --glow-green: rgba(64, 160, 140, 0.16);
  --glow-violet: rgba(120, 90, 200, 0.1);

  /* ---- Type ---- */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  /* Also the least a field the keyboard types into may be: a phone zooms in on a
     smaller one as it takes the focus (components.css, .number-field). */
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --text-3xl: 30px;
  /* The title of the front page. */
  --text-hero: 44px;
  --leading: 1.5;
  --leading-tight: 1.2;
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 750;

  /* ---- Space, in steps of 4 px ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Shape ---- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-pill: 999px;
  /* 44 px is about a fingertip: the smallest target a thumb hits without aiming. */
  --control-height: 44px;
  --control-height-sm: 36px;
  --control-height-lg: 52px;
  /* The round face at the head of a profile. */
  --avatar-size: 56px;
  /* The chat's faces: smaller, and each account in a hue of its own (js/chat.js sets
     --hue), at one saturation and lightness for the ground and one for the letter. */
  --chat-face: 36px;
  --chat-face-tone: 35% 26%;
  --chat-face-ink: 75% 82%;
  /* A switch: its track; the knob is a little smaller than the track's height. */
  --toggle-width: 44px;
  --toggle-height: 24px;

  /* ---- Depth, focus, motion ---- */
  /* What stands over the page, bottom to top: toasts, then the admin panel's menu
     on a phone, which dims them with the rest, then the site's menu on a narrow
     screen. An open <dialog> is above all of it without a number: the browser keeps
     it in a layer of its own. */
  --layer-toast: 10;
  --layer-menu: 20;
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 2px;
  --transition: 120ms ease;

  /* ---- Page widths ---- */
  --width-card: 420px;
  /* The column of the profile, the admin panel and the chat; a block on them is as wide
     as its place there and narrower nowhere (the owner, 03.10.2026: «все такие окна на
     сайте растягивались … на всю доступную длинну»). Text alone keeps a reading width. */
  --width-wide: 1200px;
  /* The front page's column, and its cards of game servers: as many to a row as are
     this wide — three in the column — for there are to be many. */
  --width-home: 1080px;
  --width-server-card: 320px;
  --width-sidebar: 220px;
  /* The site's menu: a column down the left edge on a wide screen, and on a narrower
     one the width of the list its button opens (layout.css, .rail). */
  --width-rail: 232px;
  /* The chat's list of rooms, beside the open room. */
  --width-chat-side: 300px;
  /* The names column of a .list: "Игровой сервер" fits, a value starts after it. */
  --width-list-label: 176px;
  /* The columns of a list of settings after the name: what it is set to now, and
     under it «ждёт сервер»; then the button that opens the dialog to change it. */
  --width-list-status: 160px;
  --width-list-control: 112px;
  /* A build's card on the pages of builds: as many to a row as are this wide. */
  --width-build-card: 240px;
  /* A number typed into a line: ten digits and a sign. */
  --width-number-field: 96px;
  /* A toast is as wide as its words, from the first width to the second; longer
     words wrap at the second. */
  --width-toast-min: 320px;
  --width-toast: 560px;
  --width-dialog-wide: 960px;
  --width-dialog-read: 600px;
  --gutter: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}