@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Slab&display=swap");

/* UFLIP Root Pallette */
:root {
  /* UFLIP Official Monochrome */
  --uflip-mono-12: #121212;
  --uflip-mono-23: #232323;
  --uflip-mono-2b: #2b2b2b;
  --uflip-mono-33: #333333;
  --uflip-mono-44: #444444;
  --uflip-mono-54: #555454;
  --uflip-mono-80: #828080;
  --uflip-mono-bc: #bebcbc;
  --uflip-mono-ee: #eeeeee;
  --uflip-mono-ff: #ffffff;

  /* UFLIP Official Colors */
  --uflip-cyan: #00cdff;
  --uflip-blue: #1c75bc;
  --uflip-green: #89dd9d;
  --uflip-red: #e55440;
  --uflip-pink: #ff68cd;
  --uflip-yellow: #febd1d;
  --uflip-purple: #9747ff;
  --uflip-burgundy: #280f0b;
  --uflip-sapphire: #061029;
  --uflip-moss: #0b280c;
  --uflip-brown: #2c2105;

  /* UFLIP Base Pallette */
  --uflip-background: var(--uflip-mono-23);

  --uflip-text-muted: var(--uflip-mono-bc);
  --uflip-text-normal: var(--uflip-mono-ee);
  --uflip-text-bright: var(--uflip-mono-ff);

  --uflip-feed-background: var(--uflip-mono-12);
  --uflip-card-background: var(--uflip-mono-33);

  /* UFLIP Flipper Specific Colors */
  --uflip-flipper-light: var(--uflip-cyan);
  --uflip-flipper-dark: var(--uflip-blue);
  --uflip-flipper-fade: linear-gradient(90deg, var(--uflip-flipper-light) 100%, var(--uflip-flipper-dark) 100%);

  /* UFLIP Buyer Specific Colors */
  --uflip-buyer-light: var(--uflip-yellow);
  --uflip-buyer-dark: var(--uflip-red);
  --uflip-buyer-fade: linear-gradient(90deg, var(--uflip-buyer-light) 100%, var(--uflip-buyer-dark) 100%);

  /* UFLIP Drab Monochrome Colors */
  --uflip-drab-light: #bebcbc;
  --uflip-drab-dark: #444444;
  --uflip-drab-fade: linear-gradient(90deg, var(--uflip-drab-light) 100%, var(--uflip-drab-dark) 100%);

  /* UFLIP Fonts */
  --uflip-font: "Montserrat", sans-serif;

  /* UFLIP Sizing for Raidus and Padding */
  --uflip-size-xs: 0.3rem;
  --uflip-size-sm: 0.5rem;
  --uflip-size-md: 0.8rem;
  --uflip-size-lg: 1.5rem;
  --uflip-size-xl: 2.3rem;
}

/* MS Teams Styles */
@media (prefers-color-scheme: light) {
  :root {
    --teams-bg: #ffffff;
    --teams-fg: #242424;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --teams-bg: #1f1f1f;
    --teams-fg: #ffffff;
  }
}

body.teams {
  background-color: var(--teams-bg);
  color: var(--teams-fg);
}

/* global reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Setup Font */
html {
  font-size: 62.5%;
}

body {
  font: 1rem var(--uflip-font);
}