@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@font-face {
  font-family: "ClashGrotesk-Variable";
  src: url("/fonts/ClashGrotesk-Variable.woff2") format("woff2"),
    url("/fonts/ClashGrotesk-Variable.woff") format("woff"),
    url("/fonts/ClashGrotesk-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --sc-headings-font-family: "ClashGrotesk-Variable", sans-serif;
  --sc-font-family-base: "ClashGrotesk-Variable", sans-serif;
  --sc-headings-font-weight: 400;
  --sc-rounded: 0.5rem;
  --sc-border-width: max(2px, 0.18rem);
 
}

/*duotone*/
/* :root{
  --sc-base: yellow;
  --sc-base-content: red;
  --sc-primary: blue;
  --sc-primary-content: white;
} */


[data-concorde-theme="light"] {
  --sc-base: #fffcf0;
  --sc-base-content: #111111;
  --sc-primary: #111111;
  --sc-primary-content: #fffcf0;
  --sc-base-50: #f4f1e6;
  --sc-base-100: #e9e6dc;
  --sc-base-200: #ceccc3;
  --sc-base-300: #bcbab1;
  --sc-base-400: #96948e;
  --sc-base-500: #7d7c77;
  --sc-base-600: #5a5956;
  --sc-base-700: #393937;
  --sc-base-800: #252524;
  --sc-base-900: #111111;
  --sc-info: #3b82f6;
  --sc-info-content: #ffffff;
  --sc-success: #10b981;
  --sc-success-content: #ffffff;
  --sc-warning: #fb923c;
  --sc-warning-content: #111827;
  --sc-danger: #dc2626;
  --sc-danger-content: #ffffff;

}

[data-concorde-theme="dark"] {
  --sc-base: #0a0a0a;
  --sc-base-content: #dadad9;
  --sc-primary: #ffef8a;
  --sc-primary-content: #111827;
  --sc-base-50: #141414;
  --sc-base-100: #1c1c1c;
  --sc-base-200: #2f2f2f;
  --sc-base-300: #3e3e3e;
  --sc-base-400: #5f5f5f;
  --sc-base-500: #767676;
  --sc-base-600: #9a9a9a;
  --sc-base-700: #c0c0bf;
  --sc-base-800: #dadad9;
  --sc-base-900: #f5f5f4;
  --sc-info: #3a85f7;
  --sc-info-content: #ffffff;
  --sc-success: #0fba7f;
  --sc-success-content: #ffffff;
  --sc-warning: #fc8f3b;
  --sc-warning-content: #111827;
  --sc-danger: #dd2528;
  --sc-danger-content: #ffffff;
} 
[data-concorde-theme="light"],
[data-concorde-theme="dark"] {
  --sc-input-bg: var(--sc-base-100);
  --sc-input-border-color: var(--sc-base-100);
}


html {
  font-family: var(--sc-font-family-base, sans-serif);
}

h2 {
  border-bottom: var(--sc-border-width) solid;
  padding-bottom: 0.1em;
}

p,
ul,
ol {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--sc-base);
  color: var(--sc-base-content);
}

html {
  scroll-behavior: smooth;
}

/* HOME PAGE */

.animated-text {
  display: block;
  position: relative;
  overflow: hidden;
}

.animated-text span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: translateY(108%);
  animation: slideUp 4.5s cubic-bezier(0.17, 0.67, 0.61, 1.13) infinite;
}

.animated-text span:nth-child(2) {
  animation-delay: 1.5s;
}

.animated-text span:nth-child(3) {
  animation-delay: 3s;
}

@keyframes slideUp {
  0% {
    transform: translateY(108%);
  }
  7% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-108%);
  }
  100% {
    transform: translateY(-108%);
  }
}

/* CUSTOM SCROLL */
.custom-scroll {
  overflow: auto !important;
}

.custom-scroll:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 2rem 2rem var(--sc-base-900);
}

.custom-scroll::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  border: solid 0.15rem transparent;
  border-radius: var(--sc-rounded);
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
  opacity: 0;
  transition: box-shadow 0.2s;
  border: solid 0.15rem transparent;
}