/* ME2's design tokens: colours, shapes, spacing and type, taken from the experiments (decision 0014). The game screen's
   look comes from the hud experiment (.design/experiments/hud/). Components use these, never raw values. */
:root {
  color-scheme: dark;

  /* Surfaces and lines */
  --bg: #03050a;
  --panel: rgba(7, 10, 17, 0.92);
  --panel-2: #111827;
  --panel-3: #142036;
  --track: #1a2333;
  --line: #1c2535;
  --line-2: #2c3a52;
  --scrim: rgba(0, 0, 0, 0.55);

  /* Ink: text on the dark, from brightest to faintest. The last is for hairlines and tracks. */
  --text: #e4eaf5;
  --text-2: #c3cbda;
  --muted: #8a95ab;
  --ink: #eaf0fa;
  --ink-2: rgba(234, 240, 250, 0.74);
  --ink-3: rgba(234, 240, 250, 0.48);
  --ink-4: rgba(234, 240, 250, 0.12);

  /* What colour means. Each is one thing, in the panels and on the map, which draws the same colours (map/shaders.js). */
  --accent: #7cc4ff; /* what you've selected, and focus */
  --go: #74f0c4; /* you: your sector, your course, your turns, and what you can do now */
  --gold: #ffc977; /* money and markets */
  --gate: #bfe6ff; /* gates */
  --shields: #4f8fd0;
  --shields-ring: #2c5f99; /* darker, for the ring around your ship */
  --armor: #5fa873;
  --warn: #ffb35c; /* rough going, running low */
  --bad: #ff6b6b; /* refused, or empty */
  --ally: #8ad8ff; /* another ship in your alliance (0032) */
  --enemy: #ff5a52; /* another ship at war with you (0032) */

  /* Glass, for the game's panels: smoke on what you click, clear on what you read, black for cards over them. */
  --smoke: linear-gradient(180deg, rgba(46, 58, 82, 0.42), rgba(16, 22, 36, 0.4));
  --smoke-blur: blur(26px) saturate(1.6);
  --smoke-rim:
    inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 30px 60px -20px rgba(0, 0, 0, 0.6);
  /* Darker smoke, under what it holds: the landed HUD's hangar, its ships over it (ui/game/Landed.tsx). */
  --smoke-deep: linear-gradient(180deg, rgba(8, 11, 19, 0.72), rgba(3, 5, 10, 0.82));
  --clear: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  --clear-blur: blur(4px) saturate(1.25);
  --clear-rim: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* Under clear glass on the site's pages, dimming the stars to read over. */
  --clear-dim: rgba(2, 4, 8, 0.5);
  --card: rgba(0, 0, 0, 0.92);

  /* Shapes: panels meet the screen's edges and round a little on the inside; buttons and cards round less. */
  --radius: 6px;
  --radius-sm: 3px;
  --gap: 12px;
  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);

  --font: 13.5px / 1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Names, numbers and labels in the game's panels: Saira, a little condensed. Sentences stay in the system face. */
  --font-display: "Saira Variable", system-ui, sans-serif;
  --stretch: 87.5%;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Distance from the screen's edges, clear of notches and rounded corners. */
  --edge-top: calc(var(--gap) + env(safe-area-inset-top));
  --edge-right: calc(var(--gap) + env(safe-area-inset-right));
  --edge-bottom: calc(var(--gap) + env(safe-area-inset-bottom));
  --edge-left: calc(var(--gap) + env(safe-area-inset-left));

  /* Light and shade on the dark, as steps of a few colours: washes of white over what you hover or press and the lit
     edges of keys; black for their dark foot and for shadows; the deep black of the scrims; and your colour (--go) and
     the accent at a glow's strength. The number is the alpha, in hundredths. */
  --white-04: rgba(255, 255, 255, 0.04);
  --white-045: rgba(255, 255, 255, 0.045);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-13: rgba(255, 255, 255, 0.13);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-30: rgba(255, 255, 255, 0.3);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-55: rgba(0, 0, 0, 0.55);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-75: rgba(0, 0, 0, 0.75);
  --deep-00: rgba(2, 4, 8, 0);
  --deep-60: rgba(2, 4, 8, 0.6);
  --deep-82: rgba(2, 4, 8, 0.82);
  --go-06: rgba(116, 240, 196, 0.06);
  --go-08: rgba(116, 240, 196, 0.08);
  --go-12: rgba(116, 240, 196, 0.12);
  --go-18: rgba(116, 240, 196, 0.18);
  --go-20: rgba(116, 240, 196, 0.2);
  --go-30: rgba(116, 240, 196, 0.3);
  --go-45: rgba(116, 240, 196, 0.45);
  --go-60: rgba(116, 240, 196, 0.6);
  --go-lit-30: rgba(170, 255, 225, 0.3); /* the lit top edge of a key in your colour */
  --go-lit-40: rgba(170, 255, 225, 0.4);
  --accent-50: rgba(124, 196, 255, 0.5);

  /* The game's mark: a bronze band with a gold line, and the dark gap where one loop passes over the other. */
  --mark-bronze: #7a5a26;
  --mark-gold: #ffd27a;
  --mark-gap: #05070c;

  /* The chart's tab: carbon weave with a lit foot; and the hub of the move pad. */
  --carbon: #12151b;
  --carbon-edge: rgba(150, 160, 180, 0.35);
  --pad-hub: #0d121c;

  /* The landed HUD (ui/game/Landed.tsx), on the smoke glass above: the washes and lines its schematics draw in. */
  --white-03: rgba(255, 255, 255, 0.03);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-90: rgba(0, 0, 0, 0.9);
  --accent-06: rgba(124, 196, 255, 0.06);
  --accent-16: rgba(124, 196, 255, 0.16);
  --accent-20: rgba(124, 196, 255, 0.2);
  --accent-35: rgba(124, 196, 255, 0.35);
  --accent-60: rgba(124, 196, 255, 0.6);
  --go-16: rgba(116, 240, 196, 0.16);
  --gold-08: rgba(255, 201, 119, 0.08);
  --moon: rgba(200, 205, 215, 0.12);

  /* The game's top bar, along the top edge. */
  --bar: calc(50px + env(safe-area-inset-top));

  /* The site's drawer, down the left edge beside every page out of a round, on the forum too (decision 0036). */
  --drawer: 248px;

  /* The game screen's panels, and the room they leave the map (map.css .room, which the map measures): on a desktop,
     the columns down the left (Controls) and right (ShipPanel, Context) and the chart's panel; on a phone, your ship
     across the top and the place's panel over the views along the bottom, which is shorter docked than in orbit. */
  --col-left: 136px;
  --col-right: 256px;
  --ship-pull: 168px; /* how far your ship's panel pulls out to the left, for your protection and retreat */
  --chart-panel: 264px;
  --phone-above: calc(var(--bar) + 164px);
  --phone-below: calc(308px + env(safe-area-inset-bottom));
  --phone-below-docked: calc(247px + env(safe-area-inset-bottom));

  /* The pages outside the game (ui/Panel.tsx): how wide a page grows beside the drawer, and the game makers' wider
     ones, and what you picked at the right edge; and the colour for what can't be undone, at a wash's and a glow's
     strength. */
  --page: 1040px;
  --page-wide: 1400px;
  --beside: 380px;
  --bad-08: rgba(255, 107, 107, 0.08);
  --warn-08: rgba(255, 179, 92, 0.08);
  --bad-50: rgba(255, 107, 107, 0.5);
  --enemy-16: rgba(255, 90, 82, 0.16); /* a picked ship's tag in a fight (Fight.module.css) */
  --enemy-45: rgba(255, 90, 82, 0.45);
}