DNDTools/src/colors.scss

:root {
  // BUTTON COLORS
  --accept: #84a36f;
  --accept-hover: #6f9158;
  --delete: #a45a52;
  --delete-hover: #8f4a42;
  --edit: #86a5b7;
  --edit-hover: #6f8e9f;
  --neutral: #b9835d;
  --neutral-hover: #a76b43;

  // Deprecated
  --background-color: #fff2e9;
  --field-background-color: #efc8af;
  --border-brown: #9b8559;

  // General Colors
  --gold: #c1ae75;
  --gold-dark: #c0a042;
  --gold-active: #98895c;

  --grey-light: #d4d4d4;
  --grey: #8d8c8c;
  --grey-dark: #6e6d6d;

  --primary: #c1ae75;
  --border-color: #8d8c8c;

  --tab: #c1ae75;
  --tab-hover: #b5a36e;
  --tab-active: #a29263;

  // BORDERS
  --border: 1px solid var(--border-color);
  --gold-1: 1px solid var(--gold);
  --gold-2: 2px solid var(--gold);
  --gold-3: 3px solid var(--gold);
  --gold-4: 4px solid var(--gold);
  --gold-5: 5px solid var(--gold);

  --gold-dark-1: 1px solid var(--gold-dark);
  --gold-dark-2: 2px solid var(--gold-dark);
  --gold-dark-3: 3px solid var(--gold-dark);
  --gold-dark-4: 4px solid var(--gold-dark);
  --gold-dark-5: 5px solid var(--gold-dark);

  --grey-1: 1px solid var(--grey);
  --grey-2: 2px solid var(--grey);
  --grey-3: 3px solid var(--grey);
  --grey-4: 4px solid var(--grey);
  --grey-5: 5px solid var(--grey);

  --grey-dark-1: 1px solid var(--grey-dark);
  --grey-dark-2: 2px solid var(--grey-dark);
  --grey-dark-3: 3px solid var(--grey-dark);
  --grey-dark-4: 4px solid var(--grey-dark);
  --grey-dark-5: 5px solid var(--grey-dark);

  // SHADOWS
  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
  --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
  --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
  --shadow-right: 5px 0px 10px 0px rgba(0, 0, 0, 0.5);
  --shadow-left: -5px 0px 10px 0px rgba(0, 0, 0, 0.5);

  --abjuration-background: #cab8de;
  --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
  --abjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #9586a5;
  --abjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #9586a5;
  --conjuration-background: #714c81;
  --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
  --conjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #744987;
  --conjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #744987;
  --divination-background: #f0e3ce;
  --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
  --divination-border-small: 0 0 0 1px #171314, 0 0 0 3px #ffffff;
  --divination-border-large: 0 0 0 3px #171314, 0 0 0 8px #ffffff;
  --enchantment-background: #629179;
  --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
  --enchantment-border-small: 0 0 0 1px #171314, 0 0 0 3px #26714a;
  --enchantment-border-large: 0 0 0 3px #171314, 0 0 0 8px #26714a;
  --evocation-background: #a46a7d;
  --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
  --evocation-border-small: 0 0 0 1px #171314, 0 0 0 3px #863f57;
  --evocation-border-large: 0 0 0 3px #171314, 0 0 0 8px #863f57;
  --illusion-background: #69a;
  --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
  --illusion-border-small: 0 0 0 1px #171314, 0 0 0 3px #2d6475;
  --illusion-border-large: 0 0 0 3px #171314, 0 0 0 8px #2d6475;
  --necromancy-background: #000000;
  --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
  --necromancy-border-small: 0 0 0 1px #171314, 0 0 0 3px #36353a;
  --necromancy-border-large: 0 0 0 3px #171314, 0 0 0 8px #36353a;
  --transmutation-background: rgb(51, 52, 138);
  --transmutation-border-small: 0 0 0 1px #171314, 0 0 2px #8f088f,
    0 0 3px #7f088f, 0 0 4px #69088f, 0 0 5px #3a088f, 0 0 6px #080a8f;
  --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f,
    0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
  --transmutation-border-large: 0 0 0 3px #171314, 0 0 4px #8f088f,
    0 0 5px #7f088f, 0 0 11px #69088f, 0 0 14px #3a088f, 0 0 17px #080a8f;
}