* {
  box-sizing: border-box;
}

:root {
  --color-bg: #ffffff;
  --color-bg-secondary: #f6f5fd;
  --color-bg-tertiary: #ebe9f9;
  --color-text: #1c2029;
  --color-text-secondary: #637381;
  --color-border: #e8eef2;
  --color-primary: #3c85ee;
  --color-primary-hover: #326bcc;
  --color-danger: #e53e3e;
  --color-success: #16a34a;
  --color-spinner-track: #f3f3f3;
  --color-spinner-spin: #3498db;
}

.dark {
  --color-bg: #16181d;
  --color-bg-secondary: #1f2229;
  --color-bg-tertiary: #262a33;
  --color-text: #e5e7eb;
  --color-text-secondary: #9aa4b2;
  --color-border: #2d323c;
  --color-primary: #3c85ee;
  --color-primary-hover: #5b9bf5;
  --color-danger: #f87171;
  --color-success: #4ade80;
  --color-spinner-track: #2d323c;
  --color-spinner-spin: #3c85ee;
}

html {
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  -webkit-appearance: none;
}

body {
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}
body,
html {
  margin: 0px;
  padding: 0px;
  & input[type="text"],
  & input[type="submit"] {
    outline: none;
  }
}
body {
  & * {
    box-sizing: border-box;
    font-family: sans-serif;
  }
}

.dynamic-height {
  height: 100dvh;
}
