:root {
  // colors
  --white: rgba(255,255,255,1);
  --white-15: rgba(255,255,255,.15);
  --white-25: rgba(255,255,255,.25);
  --white-35: rgba(255,255,255,.35);
  --white-50: rgba(255,255,255,.5);
  --white-75: rgba(255,255,255,.75);
  --white-88: rgba(255,255,255,.88);

  --black: rgba(0,0,0,1);
  --black-35: rgba(0,0,0,.35);
  --black-50: rgba(0,0,0,.5);
  --black-75: rgba(0,0,0,.75);

  // owncast logo color family
  --owncast-purple: rgba(120,113,255,1); // #7871FF;
  --purple-dark: rgba(28,26,59,1); // #1c1a3b;//
  --pink: rgba(201,139,254,1); // #D18BFE;
  --blue: rgba(32,134,225,1); // #2086E1;

  // owncast purple variations
  --owncast-purple-25: rgba(120,113,255,.25);
  --owncast-purple-50: rgba(120,113,255,.5);

  --gray-light:  rgba(168,175,197,1); 
  --gray-medium:  rgba(102,107,120,1); 
  --gray:  rgba(51,53,60,1); 
  --gray-dark: rgba(23,24,27,1); // #17181b;

  --online-color: #73dd3f;
  --offline-color: #999;

  --ant-error: #ff4d4f;
  --ant-success: #52c41a;
  --ant-warning: #faad14;
  --ant-transition-duration: .15s;


  // ////////////////////////////////
  --default-text-color: var(--white-88);
  --default-bg-color: var(--black);
  --default-link-color: var(--owncast-purple);

  --container-bg-color: var(--gray-dark);
  --container-bg-color-alt: var(--purple-dark); 
  --container-border-radius: 4px;

  --code-color: #9cdcfe;
  --code-bg-color: var(--owncast-purple-25);

  --nav-bg-color: var(--gray-dark);
  --nav-text: #aaa;
  --nav-selected-text: var(--pink); //#cd7cff;

  --button-focused: var(--owncast-purple-50);

  --textfield-border: var(--white-25);;
  --textfield-bg: var(--black);
 
}