/* Every colour, font and size of the UI is defined here. Nothing is styled inline; the only
   styles set from JavaScript are values that exist per user (column widths, the width of the
   menu), the position of an open dropdown, and the height of a drawing that fills the window. */
:root {
  /* Light and dark follow the system until the user picks one. The choice is kept in a
     cookie and the server writes it into <html data-theme>, so a reload starts in the right
     mode instead of flashing the other one first. */
  color-scheme: light dark;

  --bg: light-dark(#f3f4f6, #14171a);
  --surface: light-dark(#ffffff, #1c2025);
  --surface-raised: light-dark(#ffffff, #262c33);
  --border: light-dark(#d3d8de, #363c44);
  --text: light-dark(#1c2126, #e3e6ea);
  --text-muted: light-dark(#58626d, #9ba5b0);
  --accent: light-dark(#1a5fb4, #74acf0);
  --on-accent: light-dark(#ffffff, #0d1520);
  --row-hover: light-dark(#f1f4f8, #232930);
  --table-head: light-dark(#e4eaf2, #2a323c);
  /* The line in a table's head where a column can be dragged wider or narrower. */
  --grip: light-dark(#8b9bb0, #66768a);
  /* The scrolling part of the menu lies lower than its fixed top and bottom. */
  --surface-sunken: light-dark(#f4f6f8, #171a1e);
  --menu-shadow: light-dark(rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.7));
  --backdrop: light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6));
  --shadow: 0 6px 20px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.55));

  --ok: light-dark(#23783a, #56bd6c);
  --warn: light-dark(#8a5d00, #dcaa2c);
  --error: light-dark(#b3261e, #f1766e);
  --off: light-dark(#7b8590, #6e7783);

  /* The lamp of a state. Lit, it is a filled dot in a strong colour; off, a pale grey one
     with a rim; standing by, an orange ring. Stronger than the colours above, which also
     have to carry text on a white page. */
  --lamp-ok: light-dark(#16a34a, #4ade80);
  --lamp-warn: light-dark(#d97706, #fbbf24);
  --lamp-error: light-dark(#dc2626, #f87171);
  --lamp-standby: light-dark(#ea580c, #fb923c);
  --lamp-off: light-dark(#9aa3ad, #6e7783);
  --lamp-off-fill: light-dark(#e6e9ed, #2b3138);

  /* The chips that mark what a rule names, each kind in a colour of its own: a network or
     an address, a port of the router, the interface of a network, a protocol with its
     port, a list. And the sign that turns one of them into its opposite. */
  --chip-network: light-dark(#dbeafe, #1d3b63);
  --chip-interface: light-dark(#f5d0fe, #5e2b70);
  --chip-vlan: light-dark(#ccfbf1, #17504b);
  --chip-service: light-dark(#fef3c7, #5a4614);
  --chip-list: light-dark(#e5e7eb, #3a4049);
  --chip-not: light-dark(#dc2626, #ef4444);
  --on-chip-not: #ffffff;

  /* The drawing of the topology. What flows along a radio link, towards the router and
     away from it: purple and green, apart from the blue and orange of a cable. And the
     internet, which is no device: what it is filled with. */
  --flow-wifi-in: light-dark(#7c3aed, #a78bfa);
  --flow-wifi-out: light-dark(#16a34a, #4ade80);
  /* The line of a radio link itself, under what flows along it. */
  --line-wifi: light-dark(#93c5fd, #2f5f96);
  --internet-fill: light-dark(#dcfce7, #163d27);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;

  --radius: 4px;
  --control-height: 2.1rem;
  --sidebar-width: 13.5rem;
  --statusbar-height: 3.25rem;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}