globals.css

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

:root {
  --background: 0 0% 98%;
  --foreground: 0 0% 100%;
  --muted: 0 0% 100%;

  --popover: 0 0% 100%;

  --text-color: 93 17% 10%;

  /* across teal */
  --accent: 166 92% 70%;
  /* gray */
  --border: 220 14% 96%;

  --ring: 166 92% 70%;

  /* Leaving this here if we want to have different status colors for light/dark */
  --success: 119 90% 35%;
  --destructive: 0 100% 65%;
}

.dark {
  --background: 230 6% 19%;
  --foreground: 231.43 6.31% 21.76%;
  --muted: 231.43 6.31% 21.76%;

  --popover: 240 5.88% 13.33%;

  --text-color: 204 30% 83%;

  /* across teal */
  --accent: 166 92% 70%;

  /* gray */
  --border: 226.67 5.52% 31.96%;
  --border-secondary: 226.67 6.77% 26.08%;

  --ring: 226.67 6.77% 60%;

  /* Leaving this here if we want to have different status colors for light/dark */
  --success: 133 56% 55%;
  --destructive: 0 95% 66%;
}

/* remove arrows from number input */
@layer base {
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  span,
  div {
    @apply text-text font-light;
  }
}