@import url("https://use.typekit.net/aob3jjz.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");

:root {
  /*
    Colors 🦋🌹🌈🔥

    This section is the canonical palette of colors. As a general rule, developers should attempt to choose an
    appropriate color from this palette. If an appropriate color is not part of the palette, the palette may be
    modified tastefully.

    Once an appropriate color is chosen from the palette, the developer may wish to create a Color Application variable.
    This allows us to decouple what the palette _is_ from how the palette is _used_. So, for example, if a new toolbar
    is being created, the developer might want to set `--toolbar-background: var(--neutral-3)` and then use
    `var(--toolbar-background)` in the relevant spot. That way, any changes to `--neutral-3` will be propagated to
    `--toolbar-background`, but we can change the `--toolbar-background` color without messing with other things
    that use `--neutral-3`.
  */

  /* Palette 🎨 - Brand */

  --fybr-blue: #2a8fed;
  --fybr-blue-translucent: rgba(46, 141, 204, 0.5);
  --fybr-slate: #4a4a4a;

  /* Palette 🎨 - Backgrounds */

  --alice: #f0f7fd;
  --mondrian: #06679e;
  --navy: #125482;
  --nocturn: #083a5d;
  --abyss: #0a253f;

  --twilight: #162028;
  --midnight: #020c13;

  --background-gradient: linear-gradient(var(--twilight), var(--midnight));

  /* Palette 🎨 - Interactions */

  --active-orange: rgba(255, 140, 20, 1);
  --dodger: #0087ff;
  --river: #44afee;
  --glacial: #00fcef;
  --electra: #00eee8;
  --interaction-gradient: linear-gradient(90deg, var(--dodger), var(--electra));

  --primary: var(--fybr-blue);
  --success: #0f9960;
  --danger: #d54746;

  /* Palette 🎨 - Neutrals */

  --neutral-1: #fafafa;
  --neutral-2: #f0f2f6;
  --neutral-3: #d3d6dd;
  --neutral-4: #95999e;
  --neutral-5: #64686c;
  --neutral-6: #272829;
  --neutral-7: #101112;

  --neutral-6-translucent: rgba(39, 40, 41, 0.6);

  /* Color Applications 🖍 */

  /* Based on canonical Alice Blue */
  --button-alice-active: hsl(208, 90%, 80%);
  --button-alice-normal: hsl(208, 76%, 97%);
  --button-alice-muted: hsl(208, 10%, 75%);

  --background-blue: var(--alice);
  --background-dark: var(--neutral-6);
  --background-dark-translucent: rgba(34, 34, 34, 0.8);
  --background-medium: var(--fybr-slate);
  --background-light: var(--neutral-1);

  --text-white: var(--neutral-2);

  --switch-thumb-inactive: var(--neutral-2);
  --switch-track-inactive: var(--neutral-3);

  --switch-thumb-active: var(--fybr-slate);
  --switch-track-active: var(--neutral-4);

  --disabled-gray: var(--neutral-5);

  --box-shadow: var(--neutral-6-translucent);

  /*
    Z Layering
    z-indices should, ideally, use a named layer level, in the form of one of the following variables.
    These apply to topmost layout components which have inherent overlapping behaviors;
    For other layering, source order is preferred, but there is plenty of wiggle room to do
    explicit z-index layering between the numbers. If that's _still_ not enough, shucks, add a 0.

    Don't try too hard to duck punch UI elements into these categories-- Create new ones or rename them instead.
    These names are ad hoc-- They can and should change to better reflect the design system as the app evolves.
  */

  --z-back: 0; /* e.g. Where the map is */
  --z-content: 100; /* e.g. Where the center pane is */
  --z-slideover: 200; /* e.g. Left pane, right pane */
  --z-overlay: 300; /* e.g. Modals, popups, toast notifications: These are supposed to go over top of everything except the header. */
  --z-header: 400;

  /* Secondary Z-layering */

  --z-header-main: 410;
  --z-header-subheader: 400;

  --button-border-radius: 2px;

  /* Secondary Z-layers */

  --z-back-overlay: calc(
    var(--z-back) + 10
  ); /* For the map HUD and other elements that should render on top of the map, and underneath everything else */

  /* Important Dimensions */

  --pane-width: minmax(15%, 340px);
  --left-pane-width: var(--pane-width);
  --right-pane-width: var(--pane-width);
}

a:focus,
div:focus,
span:focus,
input:focus,
input:checked,
button:focus,
select:focus {
  outline: none !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: urw-din, sans-serif;
  font-style: normal;
  line-height: normal;
  cursor: default;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", "Istok Web", sans-serif;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2.2em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.6em;
}
h4 {
  font-size: 1.4em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 1.1em;
} /* Until otherwise required */

html p {
  margin-bottom: 0; /* Blueprint override */
}

p,
a.ui-link {
  position: relative;
}

strong {
  font-weight: bolder;
}

html,
body {
  height: 100vh;
}

div#root {
  height: 100%;
}

a.ui-link {
  color: inherit;
  outline: none;
  text-decoration: none;
}

a.ui-link:hover {
  text-decoration: none;
  color: inherit;
}

/* this is not great for the panels, would be nice to build this into the panel stack
   this will work for now to keep panels (including popovers) stacked
   
   if popovers, drawers (anything using a portal) renders behind, then it means that
   the list below is too short
*/

.bp3-portal:nth-of-type(1) {
  z-index: 10001;
}

.bp3-portal:nth-of-type(2) {
  z-index: 10002;
}

.bp3-portal:nth-of-type(3) {
  z-index: 10003;
}

.bp3-portal:nth-of-type(4) {
  z-index: 10004;
}

.bp3-portal:nth-of-type(5) {
  z-index: 10005;
}

.bp3-portal:nth-of-type(6) {
  z-index: 10006;
}

.bp3-portal:nth-of-type(7) {
  z-index: 10007;
}

.bp3-portal:nth-of-type(8) {
  z-index: 10008;
}

.bp3-portal:nth-of-type(9) {
  z-index: 10009;
}

.bp3-portal:nth-of-type(10) {
  z-index: 10010;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.support-overlay {
  left: calc(50vw - 300px);
  margin: 10vh 0;

  top: 0;
  width: 600px;
}

.order-overlay {
  left: calc(50vw - 200px);
  margin: 20vh 0;

  top: 0;
  width: 400px;
}