@import '@fontsource-variable/inter/wght.css';
@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  --color-primary: #fc408b;
  --color-primary-hover: #de2e74;
  --color-secondary: #97efe9;
  --color-secondary-gray: #6b7280;
  --color-accent: #97efe9;
  --color-text-heading: #000000;
  --color-text-default: #101010;
  --color-text-dark: #1c1c1e;
  --color-text-muted: #10101066;
  --color-text-page: #101010;
  --color-page: #101010;
  --color-muted: #10101066;
  --color-default: #101010;
  --color-bg-page: #ffffff;
  --color-bg-page-dark: #000000;

  --color-raisin-black: #181b22;
  --color-davys-grey: #4e535f;
  --color-raisin-black-2: #21242b;
  --color-rich-black: #111318;

  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-sans);
  --font-heading: var(--font-sans);

  --scale--100: -1;
}

@layer base {
  a {
    @apply cursor-pointer;
  }
}

@layer utilities {
  .bg-page {
    background-color: var(--color-bg-page);
  }

  .bg-dark {
    background-color: var(--color-bg-page-dark);
  }

  .bg-light {
    background-color: var(--color-bg-page);
  }

  .text-page {
    color: var(--color-text-page);
  }

  .text-muted {
    color: var(--color-text-muted);
  }

  .u-container {
    @apply mx-auto max-w-screen-2xl px-4 lg:w-11/12 lg:px-0 xl:w-10/12;
  }

  .u-shadow {
    box-shadow: 0px 2px 16px 0px #00000014;
  }

  .u-shadow-2 {
    box-shadow: 4px 0px 6px 0px #00000005;
  }
}

@layer components {
  .btn {
    color: var(--color-text-page);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(156 163 175);
    background-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn:hover {
    border-color: rgb(75 85 99);
    background-color: rgb(243 244 246);
  }

  .btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgb(59 130 246);
  }

  @media (min-width: 768px) {
    .btn {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  @media (prefers-color-scheme: dark) {
    .btn {
      border-color: rgb(100 116 139);
      color: rgb(203 213 225);
    }

    .btn:hover {
      border-color: rgb(30 41 59);
      background-color: rgb(30 41 59);
    }
  }

  .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
    color: white;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn-primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
  }

  .btn-secondary {
    color: var(--color-text-page);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(156 163 175);
    background-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn-tertiary {
    color: var(--color-text-muted);
    border: none;
    box-shadow: none;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn-tertiary:hover {
    color: rgb(17 24 39);
  }

  @media (prefers-color-scheme: dark) {
    .btn-tertiary {
      color: rgb(156 163 175);
    }

    .btn-tertiary:hover {
      color: white;
    }
  }

  .btn-fourth {
    border-color: var(--color-primary);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.5rem;
    border-width: 1px;
    background-color: white;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
  }

  @media (min-width: 1024px) {
    .btn-fourth {
      font-size: 1.125rem;
    }
  }

  .btn-fifth {
    background-color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: white;
  }

  .btn-square {
    border-color: var(--color-primary);
    color: var(--color-text-page);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 1px;
    background-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn-square:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgb(59 130 246);
  }

  @media (min-width: 768px) {
    .btn-square {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  .btn-square-primary {
    background-color: var(--color-primary);
    font-weight: 600;
    color: white;
    border-color: var(--color-primary);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 1px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    text-transform: capitalize;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn-square-primary:hover {
    background-color: var(--color-primary-hover);
  }

  .btn-square-secondary {
    color: var(--color-text-dark);
    border-color: var(--color-primary);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 1px;
    background-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.25;
    transition: all 200ms ease-in;
  }

  .btn-square-secondary:hover {
    color: var(--color-primary);
  }

  .mobile-menu-container {
    --MOBILE_NAV_OFFSET: 4rem;
    /* 56px measured nav height */
    position: absolute;
    inset: 0;
    height: calc(100svh - (var(--MOBILE_NAV_OFFSET)));
  }

  .frame-gradient {
    background:
      linear-gradient(
        90deg,
        #ebebeb 0%,
        #fafaff 0%,
        #fbf0f9 62.93%,
        #fffcfd 100%
      ),
      linear-gradient(0deg, #ffffff, #ffffff);
  }
}

[astro-icon].icon-light > * {
  stroke-width: 1.2;
}

[astro-icon].icon-bold > * {
  stroke-width: 2.4;
}
