/* Färger och former. Mörkt läge följer systemet. Enheternas färger heter tone-1 till tone-14. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --soft: #f7f7f7;
  --line: #e5e5e5;
  --line-strong: #cfcfcf;
  --ink: #3c3c3c;
  --ink-strong: #232323;
  --muted: #6b6b6b;
  --faint: #afafaf;
  --focus: #1cb0f6;

  --primary: #58a700;
  --primary-shadow: #427d00;
  --green: #58cc02;
  --green-soft: #d7ffb8;
  --green-line: #a5ed6e;
  --green-ink: #2f7a00;

  --red-face: #e03e3e;
  --red-shadow: #b02c2c;
  --red-soft: #ffdfe0;
  --red-line: #ffb2b2;
  --red-ink: #c0282d;

  --blue: #1cb0f6;
  --blue-face: #1899d6;
  --blue-shadow: #127aa6;
  --blue-soft: #ddf4ff;
  --blue-line: #84d8ff;
  --blue-ink: #0f6e9c;

  --gold: #ffc800;
  --gold-shadow: #e0a800;
  --gold-soft: #fff4cc;
  --gold-ink: #7a5600;
  --orange: #ff9600;

  --hue-blue: #0f6e9c;
  --hue-purple: #7d3fc0;
  --hue-teal: #0a7a6e;
  --hue-orange: #a85c00;
  --hue-pink: #a8307a;
  --hue-green: #3d7400;
  --hue-indigo: #4453c4;
  --type-pending: #8e8e8e;

  --radius: 16px;
  --topbar-h: 64px;
  font-family: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #131f24;
    --panel: #131f24;
    --soft: #1c2b32;
    --line: #37464f;
    --line-strong: #4b5d66;
    --ink: #e4edf2;
    --ink-strong: #ffffff;
    --muted: #9db0b9;
    --faint: #647780;
    --green-soft: #1d3322;
    --green-line: #3f6e1f;
    --green-ink: #a5e36b;
    --red-soft: #3a1f24;
    --red-line: #7b3139;
    --red-ink: #ff9b9b;
    --blue-soft: #15303c;
    --blue-line: #2c6d8c;
    --blue-ink: #8fd8ff;
    --gold-soft: #3a3113;
    --gold-ink: #ffd95a;
    --hue-blue: #8fd8ff;
    --hue-purple: #cfa3ff;
    --hue-teal: #6fe3d2;
    --hue-orange: #ffb454;
    --hue-pink: #ff9ad5;
    --hue-green: #a5e36b;
    --hue-indigo: #b4bcff;
    --type-pending: #6d828b;
  }
}

/* Enheternas färger: fyllning, skugga, text på fyllningen och text på vit bakgrund. */
.tone-1 { --tone: #58a700; --tone-shadow: #427d00; --tone-text: #ffffff; --tone-ink: #3d7400; }
.tone-2 { --tone: #a560e8; --tone-shadow: #7d3fc0; --tone-text: #ffffff; --tone-ink: #7d3fc0; }
.tone-3 { --tone: #1899d6; --tone-shadow: #127aa6; --tone-text: #ffffff; --tone-ink: #0f6e9c; }
.tone-4 { --tone: #d97300; --tone-shadow: #a85c00; --tone-text: #ffffff; --tone-ink: #a85c00; }
.tone-5 { --tone: #d6459b; --tone-shadow: #a8307a; --tone-text: #ffffff; --tone-ink: #a8307a; }
.tone-6 { --tone: #0e9f8f; --tone-shadow: #0a7a6e; --tone-text: #ffffff; --tone-ink: #0a7a6e; }
.tone-7 { --tone: #e03e3e; --tone-shadow: #b02c2c; --tone-text: #ffffff; --tone-ink: #b02c2c; }
.tone-8 { --tone: #ffc800; --tone-shadow: #d9a900; --tone-text: #4a3700; --tone-ink: #8a6500; }
.tone-9 { --tone: #5b6bdf; --tone-shadow: #4150b8; --tone-text: #ffffff; --tone-ink: #4150b8; }
.tone-10 { --tone: #b86b2e; --tone-shadow: #8e4f1c; --tone-text: #ffffff; --tone-ink: #8e4f1c; }
.tone-11 { --tone: #ab2fbb; --tone-shadow: #842391; --tone-text: #ffffff; --tone-ink: #842391; }
.tone-12 { --tone: #5c7a14; --tone-shadow: #465d0e; --tone-text: #ffffff; --tone-ink: #465d0e; }
.tone-13 { --tone: #7e607e; --tone-shadow: #614861; --tone-text: #ffffff; --tone-ink: #614861; }
.tone-14 { --tone: #00729c; --tone-shadow: #005676; --tone-text: #ffffff; --tone-ink: #005676; }
@media (prefers-color-scheme: dark) {
  .tone-1 { --tone-ink: #93d333; }
  .tone-2 { --tone-ink: #cfa3ff; }
  .tone-3 { --tone-ink: #8fd8ff; }
  .tone-4 { --tone-ink: #ffb454; }
  .tone-5 { --tone-ink: #ff9ad5; }
  .tone-6 { --tone-ink: #6fe3d2; }
  .tone-7 { --tone-ink: #ff9b9b; }
  .tone-8 { --tone-ink: #ffd95a; }
  .tone-9 { --tone-ink: #b4bcff; }
  .tone-10 { --tone-ink: #f2b27a; }
  .tone-11 { --tone-ink: #eba6f4; }
  .tone-12 { --tone-ink: #c2dc6e; }
  .tone-13 { --tone-ink: #dcbcdc; }
  .tone-14 { --tone-ink: #6fcdf0; }
}