@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
    format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Semibold.woff2)
    format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2)
    format("woff2");
  font-weight: 700;
  font-style: normal;
}

@layer base {
  :root {
    /* start arcade colors */
    --constant-white: #ffffff;
    --constant-black: #000000;
    --grey-10: #101010;
    --grey-20: #1e1e1e;
    --grey-50: #666666;
    --grey-60: #959595;
    --grey-80: #cccccc;
    --grey-85: #dadada;
    --grey-90: #e8e8e8;
    --grey-95: #f0f0f0;
    --dark-grey-15: #1a1a1a;
    --dark-grey-25: #232323;
    --dark-grey-30: #2a2a2a;
    --dark-grey-40: #333333;
    --dark-grey-45: #595959;
    --dark-grey-60: #878787;
    --dark-grey-90: #e1e1e1;

    --background-app: var(--constant-white);
    --background-prominent: var(--grey-80);
    --background-standard: var(--grey-90);
    --background-subtle: var(--grey-95);

    --border-divider: var(--grey-90);
    --border-inverse: var(--constant-white);
    --border-prominent: var(--grey-10);
    --border-standard: var(--grey-60);
    --border-subtle: var(--grey-90);

    --icon-disabled: var(--grey-60);
    --icon-extra-subtle: var(--grey-60);
    --icon-inverse: var(--constant-white);
    --icon-prominent: var(--grey-10);
    --icon-standard: var(--grey-20);
    --icon-subtle: var(--grey-50);

    --text-placeholder: var(--grey-60);
    --text-prominent: var(--grey-10);
    --text-standard: var(--grey-20);
    --text-subtle: var(--grey-50);

    &.dark {
      --background-app: var(--constant-black);
      --background-prominent: var(--dark-grey-40);
      --background-standard: var(--dark-grey-25);
      --background-subtle: var(--dark-grey-15);

      --border-divider: var(--dark-grey-25);
      --border-inverse: var(--constant-black);
      --border-prominent: var(--constant-white);
      --border-standard: var(--dark-grey-45);
      --border-subtle: var(--dark-grey-25);

      --icon-disabled: var(--dark-grey-45);
      --icon-extra-subtle: var(--dark-grey-45);
      --icon-inverse: var(--constant-black);
      --icon-prominent: var(--constant-white);
      --icon-standard: var(--dark-grey-90);
      --icon-subtle: var(--dark-grey-60);

      --text-placeholder: var(--dark-grey-45);
      --text-prominent: var(--constant-white);
      --text-standard: var(--dark-grey-90);
      --text-subtle: var(--dark-grey-60);
    }
    /* end arcade colors */
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes appear-top {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* view transitions */
a.transitioning .home-page-server-name,
.detail-page-server-name {
  view-transition-name: server-name;
}