@use "reset";
@use "breakpoints" as *;

:root {
  --color-black: #121212;
  --color-white: #ffffff;
  --color-smoke: #f8f7f2;
  --color-cyan: #61dfff;
  --color-indigo: #6119ef;
  --color-navy: #190066;
  --color-pink: #fcd6ff;
  --color-magenta: #f361ff;
  --color-light-pink: #f4effe;
  --color-tangerine: #ff8d4c;
  --color-light-gray: #c3c3c3;
  --color-medium-gray: #898989;
  --color-dark-gray: #d8d8d8;
  --color-darker-gray: #525252;
  --color-silver: #c0c0c0;
  --color-green: #1c8234;
  --color-red: #d73847;
  --color-dark-red: #a63c00;
  --color-icterine: #fff068;
  --color-baby-blue: #ebfbff;
  --color-teal-blue: #007b9a;
}

html {
  box-sizing: border-box;
  font-size: math.div(1000vw, 250);

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  @media (min-width: 400px) {
    font-size: 16px;
  }

  @include bp("tablet") {
    font-size: math.div(1000vw, 750);
  }

  @media (min-width: 1200px) {
    font-size: 16px;
  }

  body {
    font-family: var(--font-atyp);
    font-size: 1rem;
    color: var(--color-black);
    background-color: var(--color-smoke);
    margin: 0;
    overflow-x: hidden;
  }
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

sub {
  font-size: smaller;
  vertical-align: sub;
}

.pulsating {
  animation: pulsate 1s infinite alternate;
}

@keyframes pulsate {
  0% {
    background-color: var(--color-smoke);
  }
  100% {
    background-color: #ecece8;
  }
}

.dynamic-shadow-dom {
  --dynamic-brand-primary-color: var(--color-indigo);
  --dynamic-brand-secondary-color: var(--color-icterine);
  --dynamic-connection-green: var(--color-green);
  --dynamic-error-1: var(--color-red);
  --dynamic-success-1: var(--color-green);

  --dynamic-connect-button-background: var(--color-indigo);
  --dynamic-connect-button-color: var(--color-white);
  --dynamic-connect-button-border: none;
  --dynamic-connect-button-background-hover: var(--color-icterine);
  --dynamic-connect-button-color-hover: var(--color-black);
  --dynamic-connect-button-border-hover: none;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

* {
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0);
  scrollbar-width: thin;
}
