@import 'tailwindcss';

:root {
  --background: #242424;
  --foreground: #fff;
  --brand-pink: #a73b67;
  --brand-violet: #4d2a5c;
  --brand-white: #eaeaea;
  --brand-grey-text: #8f8f8f;
  --brand-section-dark: #1b1b1b;
  --white-smoke: #f4f4f4;
  --btn-gradient: linear-gradient(
    180deg,
    var(--brand-pink) 0%,
    var(--brand-violet) 342.01%
  );
  --home-gradient: linear-gradient(
    286deg,
    var(--brand-pink) 1.19%,
    #000 92.38%
  );
  --card-gradient: linear-gradient(
      180deg,
      var(--brand-violet) 0%,
      var(--brand-pink) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand-pink: var(--brand-pink);
  --color-brand-white: var(--brand-white);
  --color-brand-violet: var(--brand-violet);
  --color-brand-grey-text: var(--brand-grey-text);
  --color-brand-section-dark: var(--brand-section-dark);
  --color-white-smoke: var(--white-smoke);

  --font-montserrat: var(--font-montserrat);
  --font-serif-display: var(--font-dm-serif-display);
  --text-2.5xl: 1.75rem;
  --text-4.5xl: 2.5rem;
  --text-6.5xl: 4rem;

  --spacing-6.5: 1.625rem;
  --spacing-8.5: 2.125rem;
  --spacing-10.5: 2.625rem;
  --spacing-17: 4.25rem;
  --spacing-18: 4.5rem;
  --spacing-19: 4.75rem;
  --spacing-23.5: 5.875rem;
  --spacing-25: 6.25rem;
  --spacing-34: 8.5rem;

  --radius-2.5xl: 1.125rem;
  --radius-2.75xl: 1.25rem;

  --spacing-brand-container: 82.5rem;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

button:not(:disabled),
a:not(:disabled) {
  cursor: pointer;
}

@media (min-width: 991px) {
  @keyframes shrink-to-content {
    0% {
      width: 100%;
    }
    100% {
      width: var(--target-width);
    }
  }
}
@utility animate-shrink-to-content {
  animation: shrink-to-content 2s forwards;
}

.terms-conditions,
.privacy-policy {
  a {
    @apply underline;
  }
  h3 {
    @apply text-2xl sm:text-2.5xl font-bold mt-14 mb-5;
  }
  ul {
    @apply list-disc pl-6 leading-8;
  }

  ol {
    @apply list-decimal pl-6 leading-8;
  }

  p {
    @apply leading-8;
  }

  h4 {
    @apply text-[20px] font-medium;
  }
}