/* =====================
   SUUNNITTELUTOKENIT
   =====================

   Yhdessä tiedostossa, koska karttanäkymä ja tilisivut ovat sama järjestelmä
   eivätkä kaksi ohjelmaa. Aiemmin account.css kantoi omaa harmaata
   sävyjoukkoaan, ja kirjautumissivu näytti eri tuotteelta kuin kartta johon
   se päästi. */

:root {
  /*
   * Neutraali tumma harmaa, ei sinertävä.
   *
   * Sinimusta pohja oli SpySpacesta, jossa taustana on avaruus. Kartalla
   * tausta on maastoa: vihreää, sinistä ja harmaata, ja sinertävä paneeli
   * kilpailee vesialueiden kanssa. Harmaa väistää — paneeli on kehys, ei
   * osa kuvaa.
   *
   * Korostukset pysyvät: ne ovat merkitystä kantavia värejä eivätkä sävyä.
   */
  --bg: #17181a;
  --panel: rgba(38, 39, 42, 0.96);
  --panel-solid: #26272a;
  --panel-raised: #303135;
  --panel-border: rgba(255, 255, 255, 0.13);
  --panel-border-strong: rgba(255, 255, 255, 0.3);
  --ink: #e6e7e9;
  --ink-dim: #a8aab0;
  --ink-faint: #7c7f86;
  --accent: #64d2ff;
  --accent-warm: #f5a623;

  --sev-critical: #ff4d5e;
  --sev-high: #ff8a3d;
  --sev-medium: #f5c542;
  --sev-low: #7fd1c1;

  --lamp-red: #ff2f43;
  --lamp-amber: #ffb020;
  --lamp-green: #35c66b;

  --topbar-h: 56px;
  --rail-w: 46px;
  --panel-w: 320px;
  --timeline-h: 0px;
}

/*
 * hidden-attribuutti tarkoittaa piilotettua.
 *
 * Selaimen oletustyyli antaa [hidden]-elementille display:none, mutta se on
 * heikoin mahdollinen sääntö: mikä tahansa oma display-arvo voittaa sen.
 * Juuri niin kävi historiapaneelille, jolle oli annettu display:flex — se
 * merkittiin piilotetuksi ja jäi näkyviin kartan päälle.
 *
 * !important on täällä perusteltu: hidden ei ole tyyliehdotus vaan tila.
 */
[hidden] { display: none !important; }