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

@layer base {
  :root {
    /* custom slate */
    --slate: #393838;

    /* block */
    --block-teal: #13bbaf;
    --block-orange: #ff4f00;

    /* 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 */
  }
}

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

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

/* flap overrides */

.perspective-1000 {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Loading bar animation */
@keyframes loading {
  0% {
    width: 0;
    opacity: 1;
  }
  50% {
    width: 60%;
    opacity: 1;
  }
  90% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

.loading-bar {
  animation: loading 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  width: 0;
}

/* Fade in animation */
.transition-opacity {
  transition-property: opacity;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}