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

/* *,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--tokens-colors-page-background, #191719) !important;
  font-family: "Inter";
  height: 100vh;
  width: 100vw;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

.html {
  background: var(--tokens-colors-page-background, #191719) !important;
} */

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-Medium.otf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-SemiBold.otf") format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-Bold.otf") format("opentype");
  font-weight: bold;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-Black.otf") format("opentype");
  font-weight: 900;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-UltraLight.otf") format("opentype");
  font-weight: 200;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-UltraBlack.otf") format("opentype");
  font-weight: 950;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist/Geist-Thin.otf") format("opentype");
  font-weight: 100;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-Medium.otf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-SemiBold.otf") format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-Bold.otf") format("opentype");
  font-weight: bold;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-Black.otf") format("opentype");
  font-weight: 900;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-UltraLight.otf") format("opentype");
  font-weight: 200;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-UltraBlack.otf") format("opentype");
  font-weight: 950;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono/GeistMono-Thin.otf") format("opentype");
  font-weight: 100;
}

#root {
  height: 100vh;
  width: 100vw;
}

@layer base {
  html {
    font-family: "Geist", sans-serif;
  }
  :root {
    --base-1: 0 0% 98.82352941176471%;
    --base-2: 0 0% 97.6470588235294%;
    --base-3: 0 0% 94.11764705882352%;
    --base-4: 0 0% 90.98039215686275%;
    --base-5: 0 0% 87.84313725490196%;
    --base-6: 0 0% 85.09803921568627%;
    --base-7: 0 0% 80.7843137254902%;
    --base-8: 0 0% 73.33333333333333%;
    --base-9: 0 0% 55.294117647058826%;
    --base-10: 0 0% 51.37254901960784%;
    --base-11: 0 0% 39.21568627450981%;
    --base-12: 0 0% 12.549019607843137%;
    --accent-1: 240 33.33333333333333% 99.41176470588235%;
    --accent-2: 225.00000000000006 100% 98.43137254901961%;
    --accent-3: 222.35294117647067 89.47368421052634% 96.27450980392157%;
    --accent-4: 224 100% 94.11764705882352%;
    --accent-5: 223.99999999999997 100% 91.17647058823529%;
    --accent-6: 225.48387096774192 100% 87.84313725490196%;
    --accent-7: 226.15384615384616 86.66666666666669% 82.35294117647058%;
    --accent-8: 225.9183673469388 75.38461538461539% 74.50980392156863%;
    --accent-9: 226.0377358490566 70.04405286343612% 55.490196078431374%;
    --accent-10: 226.2111801242236 65.18218623481782% 51.5686274509804%;
    --accent-11: 225.9574468085106 55.73122529644269% 50.3921568627451%;
    --accent-12: 226.2295081967213 49.59349593495935% 24.11764705882353%;
    --background: 0 0% 98.82352941176471%;
    --foreground: 0 0% 12.549019607843137%;
    --card: 0 0% 97.6470588235294%;
    --card-foreground: 0 0% 12.549019607843137%;
    --popover: 0 0% 98.82352941176471%;
    --popover-foreground: 0 0% 12.549019607843137%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 97.6470588235294%;
    --secondary-foreground: 0 0% 39.21568627450981%;
    --muted: 0 0% 97.6470588235294%;
    --muted-foreground: 0 0% 39.21568627450981%;
    --accent: 226.2111801242236 65.18218623481782% 51.5686274509804%;
    --accent-foreground: 0 0% 100%;
    --destructive: 10.10869565217391 73.01587301587303% 50.588235294117645%;
    --destructive-foreground: 7.868852459016397 49.59349593495935%
      24.11764705882353%;
    --border: 0 0% 85.09803921568627%;
    --input: 0 0% 85.09803921568627%;
    --ring: 0 0% 85.09803921568627%;
    --radius: 0.5rem;
  }
  .dark {
    --base-1: 0 0% 6.666666666666667%;
    --base-2: 0 0% 9.803921568627452%;
    --base-3: 0 0% 13.333333333333334%;
    --base-4: 0 0% 16.470588235294116%;
    --base-5: 0 0% 19.215686274509807%;
    --base-6: 0 0% 22.745098039215687%;
    --base-7: 0 0% 28.235294117647058%;
    --base-8: 0 0% 37.64705882352941%;
    --base-9: 0 0% 43.13725490196079%;
    --base-10: 0 0% 48.23529411764706%;
    --base-11: 0 0% 70.58823529411765%;
    --base-12: 0 0% 93.33333333333333%;
    --accent-1: 231.42857142857144 29.166666666666668% 9.411764705882353%;
    --accent-2: 230 31.03448275862069% 11.372549019607844%;
    --accent-3: 225.3061224489796 50.51546391752577% 19.019607843137255%;
    --accent-4: 225.21739130434784 54.330708661417326% 24.901960784313726%;
    --accent-5: 224.81012658227849 51.633986928104584% 30%;
    --accent-6: 226.42857142857142 46.66666666666667% 35.294117647058826%;
    --accent-7: 226.45161290322582 44.4976076555024% 40.98039215686274%;
    --accent-8: 225.8181818181818 45.08196721311475% 47.843137254901954%;
    --accent-9: 226.0377358490566 70.04405286343612% 55.490196078431374%;
    --accent-10: 227.5 72.72727272727272% 61.1764705882353%;
    --accent-11: 228.2474226804124 100% 80.98039215686275%;
    --accent-12: 223.90243902439025 100% 91.9607843137255%;
    --background: 0 0% 6.666666666666667%;
    --foreground: 0 0% 93.33333333333333%;
    --card: 0 0% 9.803921568627452%;
    --card-foreground: 0 0% 93.33333333333333%;
    --popover: 0 0% 6.666666666666667%;
    --popover-foreground: 0 0% 93.33333333333333%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 9.803921568627452%;
    --secondary-foreground: 0 0% 70.58823529411765%;
    --muted: 0 0% 9.803921568627452%;
    --muted-foreground: 0 0% 70.58823529411765%;
    --accent: 227.5 72.72727272727272% 61.1764705882353%;
    --accent-foreground: 0 0% 100%;
    --destructive: 10.94117647058823 81.73076923076924% 59.21568627450981%;
    --destructive-foreground: 10 85.71428571428571% 89.01960784313725%;
    --border: 0 0% 22.745098039215687%;
    --input: 0 0% 22.745098039215687%;
    --ring: 0 0% 22.745098039215687%;
    --radius: 0.5rem;
  }
}