:root {
  --color-ok: #44bb77;
  --color-warning: #ffaa44;
  --color-critical: #ff5566;
  --color-unknown: #aa44ff;

  /* colors */
  --red: #FF383C;
  --orange: #FF8D28;
  --yellow: #FFCC00;
  --green: #34C759;
  --teal: #00C8B3;
  --cyan: #00C3E8;
  --light-cyan: #00C0FF;
  --blue: #0088FF;
  --indigo: #6155F5;
  --purple: #CB30E0;
  --pink: #FF2D55;
  --brown: #AC7F5E;

  /* main */
  --gray-500: #8E8E93;
  --gray-400: #AEAEB2;
  --gray-300: #C7C7CC;
  --gray-200: #D1D1D6;
  --gray-100: #E5E5EA;
  --gray-50:  #F2F2F7;

  --primary: #ffffff;
  --secondary: #8d8d93;
  --tertiary: #464649;
  --quaternary: #252526;
  --quinary: #121213;
 
  --background: var(--primary);
  --text: var(--quinary);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* colors */
    --red: #FF4245;
    --orange: #FF9228;
    --yellow: #FFD600;
    --green: #30D158;
    --teal: #00DAC3;
    --cyan: #00D2E0;
    --light-cyan: #3CD3FE;
    --blue: #0091FF;
    --indigo: #6B5FFF;
    --purple: #DB34E0;
    --pink: #FF375F;
    --brown: #B78A66;

    /* main */
    --gray-500: #8E8E93;
    --gray-400: #636366;
    --gray-300: #48484A;
    --gray-200: #3A3A3C;
    --gray-100: #2C2C2E;
    --gray-50:  #1C1C1E;

    --primary: #000000;
    --secondary: #8a8a8e;
    --tertiary: #c5c5c7;
    --quaternary: #dcdcde;
    --quinary: #eeeeee;

    --background: var(--gray-50);
    --text: var(--quinary);
  }
}


.redtext { color: var(--red); }
.orangetext { color: var(--orange); }
.yellowtext { color: var(--yellow); }
.greentext { color: var(--green); }
.tealtext { color: var(--teal); }
.cyantext { color: var(--cyan); }
.lightcyantext { color: var(--light-cyan); }
.bluetext { color: var(--blue); }
.indigotext { color: var(--indigo); }
.purpletext { color: var(--purple); }
.pinktext { color: var(--pink); }
.browntext { color: var(--brown); }

.redfill { fill: var(--red) !important; }
.orangefill { fill: var(--orange) !important; }
.yellowfill { fill: var(--yellow) !important; }
.greenfill { fill: var(--green) !important; }
.tealfill { fill: var(--teal) !important; }
.cyanfill { fill: var(--cyan) !important; }
.lightcyanfill { fill: var(--light-cyan) !important; }
.bluefill { fill: var(--blue) !important; }
.indigofill { fill: var(--indigo) !important; }
.purplefill { fill: var(--purple) !important; }
.pinkfill { fill: var(--pink) !important; }
.brownfill { fill: var(--brown) !important; }

.cold { font-weight: 700%; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }

.obfuscated { font-family: monospace; letter-spacing: .01em; opacity: 0.95; }

.mc-text { white-space: pre-wrap; }