/* Color values borrowed from https://github.com/primer/primitives */

:root {
  --color-auburn-scale-0: #f2e9e9;
  --color-auburn-scale-1: #e6d6d5;
  --color-auburn-scale-2: #d4b7b5;
  --color-auburn-scale-3: #c59e9b;
  --color-auburn-scale-4: #b4827e;
  --color-auburn-scale-5: #9d615c;
  --color-auburn-scale-6: #8a5551;
  --color-auburn-scale-7: #744744;
  --color-auburn-scale-8: #5d3937;
  --color-auburn-scale-9: #432928;

  --color-blue-scale-0: #d1f0ff;
  --color-blue-scale-1: #ade1ff;
  --color-blue-scale-2: #75c8ff;
  --color-blue-scale-3: #47afff;
  --color-blue-scale-4: #0f8fff;
  --color-blue-scale-5: #006edb;
  --color-blue-scale-6: #005fcc;
  --color-blue-scale-7: #004db3;
  --color-blue-scale-8: #003d99;
  --color-blue-scale-9: #002b75;

  --color-brown-scale-0: #eeeae2;
  --color-brown-scale-1: #dfd7c8;
  --color-brown-scale-2: #cbbda4;
  --color-brown-scale-3: #b8a484;
  --color-brown-scale-4: #a68b64;
  --color-brown-scale-5: #856d4c;
  --color-brown-scale-6: #755f43;
  --color-brown-scale-7: #64513a;
  --color-brown-scale-8: #51412f;
  --color-brown-scale-9: #3a2e22;

  --color-coral-scale-0: #ffe5db;
  --color-coral-scale-1: #fecebe;
  --color-coral-scale-2: #fcab92;
  --color-coral-scale-3: #f88768;
  --color-coral-scale-4: #f25f3a;
  --color-coral-scale-5: #d43511;
  --color-coral-scale-6: #ba2e12;
  --color-coral-scale-7: #9b2712;
  --color-coral-scale-8: #7e2011;
  --color-coral-scale-9: #5d180e;

  --color-cyan-scale-0: #bdf4ff;
  --color-cyan-scale-1: #7ae9ff;
  --color-cyan-scale-2: #00d0fa;
  --color-cyan-scale-3: #00b7db;
  --color-cyan-scale-4: #0099b8;
  --color-cyan-scale-5: #007b94;
  --color-cyan-scale-6: #006a80;
  --color-cyan-scale-7: #00596b;
  --color-cyan-scale-8: #004857;
  --color-cyan-scale-9: #003742;

  --color-gray-scale-0: #e8ecf2;
  --color-gray-scale-1: #d2dae4;
  --color-gray-scale-2: #b4c0cf;
  --color-gray-scale-3: #9ba9bb;
  --color-gray-scale-4: #808fa3;
  --color-gray-scale-5: #647182;
  --color-gray-scale-6: #5c6570;
  --color-gray-scale-7: #4e535a;
  --color-gray-scale-8: #424448;
  --color-gray-scale-9: #303031;

  --color-green-scale-0: #caf7ca;
  --color-green-scale-1: #9ceda0;
  --color-green-scale-2: #54d961;
  --color-green-scale-3: #31bf46;
  --color-green-scale-4: #30a147;
  --color-green-scale-5: #2c8141;
  --color-green-scale-6: #2b6e3f;
  --color-green-scale-7: #285c3b;
  --color-green-scale-8: #254b34;
  --color-green-scale-9: #1d3528;

  --color-indigo-scale-0: #e5e9ff;
  --color-indigo-scale-1: #d2d7fe;
  --color-indigo-scale-2: #b1b9fb;
  --color-indigo-scale-3: #979ff7;
  --color-indigo-scale-4: #7a82f0;
  --color-indigo-scale-5: #5a61e7;
  --color-indigo-scale-6: #494edf;
  --color-indigo-scale-7: #393cd5;
  --color-indigo-scale-8: #2d2db4;
  --color-indigo-scale-9: #25247b;

  --color-lemon-scale-0: #f7eea1;
  --color-lemon-scale-1: #f0db3d;
  --color-lemon-scale-2: #d8bd0e;
  --color-lemon-scale-3: #c2a60a;
  --color-lemon-scale-4: #a68c07;
  --color-lemon-scale-5: #866e04;
  --color-lemon-scale-6: #786002;
  --color-lemon-scale-7: #654f01;
  --color-lemon-scale-8: #523f00;
  --color-lemon-scale-9: #3d2e00;

  --color-lime-scale-0: #e3f2b5;
  --color-lime-scale-1: #c7e580;
  --color-lime-scale-2: #9bd039;
  --color-lime-scale-3: #80b530;
  --color-lime-scale-4: #6c9d2f;
  --color-lime-scale-5: #527a29;
  --color-lime-scale-6: #476c28;
  --color-lime-scale-7: #3a5b25;
  --color-lime-scale-8: #2f4a21;
  --color-lime-scale-9: #213319;

  --color-olive-scale-0: #f0f0ad;
  --color-olive-scale-1: #dbe170;
  --color-olive-scale-2: #b9c832;
  --color-olive-scale-3: #9bae32;
  --color-olive-scale-4: #819532;
  --color-olive-scale-5: #64762d;
  --color-olive-scale-6: #56682c;
  --color-olive-scale-7: #495a2b;
  --color-olive-scale-8: #3b4927;
  --color-olive-scale-9: #2a331f;

  --color-orange-scale-0: #ffe7d1;
  --color-orange-scale-1: #fecfaa;
  --color-orange-scale-2: #fbaf74;
  --color-orange-scale-3: #f68c41;
  --color-orange-scale-4: #eb670f;
  --color-orange-scale-5: #b8500f;
  --color-orange-scale-6: #a24610;
  --color-orange-scale-7: #8d3c11;
  --color-orange-scale-8: #70300f;
  --color-orange-scale-9: #54230d;

  --color-pine-scale-0: #bff8db;
  --color-pine-scale-1: #80efb9;
  --color-pine-scale-2: #1dd781;
  --color-pine-scale-3: #1dbf76;
  --color-pine-scale-4: #1aa267;
  --color-pine-scale-5: #167e53;
  --color-pine-scale-6: #156f4b;
  --color-pine-scale-7: #135d41;
  --color-pine-scale-8: #114b36;
  --color-pine-scale-9: #0d3627;

  --color-pink-scale-0: #ffe5f1;
  --color-pink-scale-1: #fdc9e2;
  --color-pink-scale-2: #f8a5cf;
  --color-pink-scale-3: #f184bc;
  --color-pink-scale-4: #e55da5;
  --color-pink-scale-5: #ce2c85;
  --color-pink-scale-6: #b12f79;
  --color-pink-scale-7: #8e2e66;
  --color-pink-scale-8: #6e2b53;
  --color-pink-scale-9: #4d233d;

  --color-plum-scale-0: #f8e5ff;
  --color-plum-scale-1: #f0cdfe;
  --color-plum-scale-2: #e2a7fb;
  --color-plum-scale-3: #d487f7;
  --color-plum-scale-4: #c264f2;
  --color-plum-scale-5: #a830e8;
  --color-plum-scale-6: #961edc;
  --color-plum-scale-7: #7d1eb8;
  --color-plum-scale-8: #651d96;
  --color-plum-scale-9: #471769;

  --color-purple-scale-0: #f1e5ff;
  --color-purple-scale-1: #e6d2fe;
  --color-purple-scale-2: #d1b1fc;
  --color-purple-scale-3: #bc91f8;
  --color-purple-scale-4: #a672f3;
  --color-purple-scale-5: #894ceb;
  --color-purple-scale-6: #783ae4;
  --color-purple-scale-7: #6223d7;
  --color-purple-scale-8: #4f21ab;
  --color-purple-scale-9: #391b79;

  --color-red-scale-0: #ffe2e0;
  --color-red-scale-1: #fecdcd;
  --color-red-scale-2: #fda5a7;
  --color-red-scale-3: #fb8389;
  --color-red-scale-4: #f85461;
  --color-red-scale-5: #df0c24;
  --color-red-scale-6: #c50d28;
  --color-red-scale-7: #a60c29;
  --color-red-scale-8: #880c27;
  --color-red-scale-9: #610a20;

  --color-teal-scale-0: #c7f5ef;
  --color-teal-scale-1: #89ebe1;
  --color-teal-scale-2: #22d3c7;
  --color-teal-scale-3: #1db9b4;
  --color-teal-scale-4: #179b9b;
  --color-teal-scale-5: #127e81;
  --color-teal-scale-6: #106e75;
  --color-teal-scale-7: #0d5b63;
  --color-teal-scale-8: #0a4852;
  --color-teal-scale-9: #073740;

  --color-yellow-scale-0: #ffec9e;
  --color-yellow-scale-1: #ffd642;
  --color-yellow-scale-2: #ebb400;
  --color-yellow-scale-3: #d19d00;
  --color-yellow-scale-4: #b88700;
  --color-yellow-scale-5: #946a00;
  --color-yellow-scale-6: #805900;
  --color-yellow-scale-7: #704d00;
  --color-yellow-scale-8: #5c3d00;
  --color-yellow-scale-9: #422b00;
  
  /* #region Utilities */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 1.0rem;
  --size-4: 1.5rem;
  --size-5: 3.0rem;
  /* #endregion Utilities */
  
  /* #region Default/Light Theme */
  --background-primary: var(--color-gray-scale-0);
  --background-secondary: var(--color-gray-scale-1);
  --background-tertiary: var(--color-gray-scale-2);
  --background-quaternary: var(--color-gray-scale-3);
  
  --header-primary: var(--background-quaternary);
  
  --text-primary: var(--color-gray-scale-9);
  --text-secondary: var(--color-gray-scale-6);
  --text-dark: var(--color-gray-scale-9);
  --text-light: var(--color-gray-scale-0);
  /* #endregion Default/Light Theme */
  
  color-scheme: light;
}

  /* default */

  /* --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light); */

html {
  --avatar-size: 3em;

  height: 100vh;

  font-family: sans-serif;
  
  word-wrap: break-word;

  color: var(--text-primary);
}

body {
  margin: 0;

  height: 100vh;

  justify-content: center;
  align-items: center;

  background-color: black;
}

/* #region Buttons */
button {
  --button-background: var(--color-gray-scale-8);
  --button-border: var(--color-gray-scale-7);
  --button-mix-disabled: var(--color-gray-scale-2);
  --button-mix-hover: var(--color-gray-scale-3);

  display: inline-block;

  border-color: var(--button-border);
  border-radius: 0.4rem;

  padding: var(--size-1) var(--size-2);

  background-color: var(--button-background);

  color: var(--text-light);
}

button.primary {
  --button-background: var(--color-blue-scale-7);
  --button-border: var(--color-blue-scale-5);
  --button-mix-disabled: var(--color-blue-scale-0);
  --button-mix-hover: var(--color-blue-scale-4);
}

button.success {
  --button-background: var(--color-green-scale-5);
  --button-border: var(--color-green-scale-3);
  --button-mix-disabled: var(--color-green-scale-0);
  --button-mix-hover: var(--color-green-scale-2);
}

button.danger {
  --button-background: var(--color-red-scale-5);
  --button-border: var(--color-red-scale-3);
  --button-mix-disabled: var(--color-red-scale-0);
  --button-mix-hover: var(--color-red-scale-2);
}

button:focus, button:hover {
  border-color: color-mix(in srgb, var(--button-border), var(--button-mix-hover));
  
  background-color: color-mix(in srgb, var(--button-background), var(--button-mix-hover));

  cursor: pointer;
}

button:disabled {
  border-color: color-mix(in srgb, var(--button-border) 50%, var(--button-mix-disabled) 50%);
  
  background-color: color-mix(in srgb, var(--button-background) 10%, var(--button-mix-disabled) 90%);
  
  color: gray;
}

button:disabled:hover {
  cursor: default;
}

button.small {
  padding: 0 var(--size-1);
}
/* #endregion Buttons */

/* #region Tables */
table {
  --table-alt-color: var(--background-tertiary);
  --table-background-color: var(--background-secondary);
  --table-header-color: var(--background-quaternary);

  width: 100%;

  border-collapse: collapse;

  background-color: var(--table-background-color);
}

thead, th {
  background-color: var(--table-header-color);
}

tr.alt, td.alt {
  background-color: var(--table-alt-color);
}

th, td {
  text-align: center;
}
/* #endregion Tables */

dt {
  font-weight: bold;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

/* #region Inputs */
textarea {
  width: calc(100% - 1em);
}
/* #endregion Inputs */

/* .rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
} */

.form-note, .form-field-note {
  font-size: 0.85em;

  color: var(--text-secondary);
}

.button-container {
  margin: var(--size-2) 0;
}

table .button-container {
  margin: var(--size-1) 0;
}

.card {
  border: 1px solid var(--text-primary);

  padding: var(--size-1);

  background-color: var(--background-secondary);
}

.card table {
  --table-background-color: var(--background-primary);
}

/* #webgl-snow {
  position: fixed;

  top: 0;

  z-index: -1;
} */

[class^='mgc_']::before,
[class*=' mgc_']::before {
  color: inherit !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark); */

    /* #region Dark Theme */
    --background-primary: var(--color-gray-scale-9);
    --background-secondary: var(--color-gray-scale-8);
    --background-tertiary: var(--color-gray-scale-7);
    --background-quaternary: var(--color-gray-scale-6);

    --text-primary: var(--color-gray-scale-0);
    --text-secondary: var(--color-gray-scale-2);
    /* #endregion Dark Theme */
  }
}