/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=Space+Grotesk:wght@300..700&display=swap");

/*  
===========================================================
  GLOBAL ROOT OVERRIDES FOR THE REACT HOMEPAGE ONLY
===========================================================
*/

.crabit-react-page {
    background-color: #07070E !important;
    color: #ffffff;
    font-family: "IBM Plex Sans", serif;
    scroll-behavior: smooth;
}

/* apply same background on html */
html.crabit-react-page,
body.crabit-react-page {
    background-color: #07070E !important;
    color: #ffffff;
}

/* Section scroll margin */
.crabit-react-page section {
    scroll-margin-top: 80px;
}

.crabit-react-page h1,
.crabit-react-page h2,
.crabit-react-page h3,
.crabit-react-page h4,
.crabit-react-page h5,
.crabit-react-page h6 {
    color: #ffffff !important;
}

.crabit-react-page h1.bg-gradient,
.crabit-react-page h2.bg-gradient,
.crabit-react-page h3.bg-gradient,
.crabit-react-page h4.bg-gradient,
.crabit-react-page h5.bg-gradient,
.crabit-react-page h6.bg-gradient {
    color: transparent !important;
    background-image: linear-gradient(to right, #8635ea, #598bfa, #1ae0f1) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/*
===========================================================
  TYPOGRAPHY (matches Tailwind config)
===========================================================
*/

.crabit-react-page h1 {
    font-family: "Space Grotesk", serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .crabit-react-page h1 {
        font-size: 44px;
    }
    .crabit-react-page h2 {
        font-family: "Space Grotesk", serif;
        font-weight: 500;
        font-size: 26px;
        line-height: 1.3;
    }

    .crabit-react-page h3 {
        font-family: "Space Grotesk", serif;
        font-weight: 500;
        font-size: 24px;
        line-height: 1.3;
    }

    .crabit-react-page h4 {
        font-family: "Space Grotesk", serif;
        font-weight: 500;
        font-size: 22px;
        line-height: 1.3;
    }
}



/*
===========================================================
  BUTTONS
===========================================================
*/

.crabit-react-page button {
    font-weight: 500;
    transition-property: color, background-color, border-color;
    transition-duration: 300ms;
}

/*
===========================================================
  FORM ELEMENTS
===========================================================
*/

.crabit-react-page .form * {
    caret-color: #6C6878;
    transition: color 300ms, background-color 300ms, border-color 300ms;
    color: inherit;
}

.crabit-react-page .form input,
.crabit-react-page .form textarea {
    background-color: #2D2D49;
    border-radius: 8px;
    padding: 10.5px 16px;
    color: white;
    border: none;
}

.crabit-react-page .form textarea {
    padding: 16px;
}

.crabit-react-page .form *::placeholder {
    color: #B7B3C3;
}

.crabit-react-page .form *:focus-visible {
    outline: none;
    background-color: #2E2E50;
    border: 1px solid #14644F;
}

.crabit-react-page .form *:invalid {
    border: 1px solid #FF0000;
}

/*
===========================================================
  BACKGROUND UTILITIES FROM TAILWIND COMPONENTS
===========================================================
*/

/* Custom CSS properties based on your Tailwind theme */
.crabit-react-page {
    --myColor1: #702cc4;
    --myColor2: #5d86df;
    --myColor3: #99f7ff;
}

/* Hero abstract circles */
.crabit-react-page .bg-hero {
    background-image:
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor3), var(--myColor2)),
      linear-gradient(to right, var(--myColor3), var(--myColor2)),
      linear-gradient(to right, var(--myColor1), var(--myColor2)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor3), var(--myColor1)),
      linear-gradient(to right, var(--myColor1), var(--myColor1)),
      linear-gradient(to right, var(--myColor2), var(--myColor3)),
      linear-gradient(to right, var(--myColor1), var(--myColor1));
    background-size: 50px 50px;
    background-position:
      bottom 60px left 30px,
      bottom 30px left 60px,
      top 70px right 50px,
      top 60px right 100px,
      top 70px right 150px,
      top 50px right 200px,
      top 70px left 100px,
      top 100px left 50px,
      top 110px right 250px,
      top 140px left 50px,
      top 120px right 40px,
      top 140px right 30px,
      bottom 50px right 30px;
    background-repeat: no-repeat;
}

/* Gradient button background */
.crabit-react-page .bg-gradient {
    background-image: linear-gradient(
      to right,
      var(--myColor1),
      var(--myColor2),
      var(--myColor3)
    );
    transition-property: background-color;
    transition-duration: 300ms;
}

.crabit-react-page .bg-gradient:hover {
    --myColor1: #8635ea;
    --myColor2: #598bfa;
    --myColor3: #1ae0f1;
}

.crabit-react-page .bg-gradient:has(button:active) {
    --myColor1: #541c9a;
    --myColor2: #4369bc;
    --myColor3: #12afbd;
}

/* Card gradient */
.crabit-react-page .bg-gradient-card {
    background-image: linear-gradient(to top, #702cc4, #06565d);
    transition: filter 300ms;
}

.crabit-react-page .bg-gradient-card:hover {
    filter: drop-shadow(0 0 12px #46f0ff54);
}

/*
===========================================================
  SECTION PADDING
===========================================================
*/

.crabit-react-page .section-padding {
    padding-bottom: 5rem;
}

@media (max-width: 1199px) {
    .crabit-react-page .section-padding {
        padding: 0.5rem 0.5rem 2.5rem;
    }
}

@media (min-width: 1200px) {
    .crabit-react-page .section-padding {
        padding: 2.5rem 2.5rem 5rem;
    }
}