/* Import the design tokens */
@import "./lib/design-tokens.css";

/* Global styles */
html,
body {
  font-family: var(--font-family-body);
  color: rgba(var(--color-text-dark), 1);
  background-color: rgba(var(--color-background-primary), 1);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* Container */
.container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Section Container - More constrained width for content sections */
.section-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container,
  .section-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container,
  .section-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Button System */
:root {
  /* Button Colors */
  --btn-pink-bg: var(--pink-500);
  --btn-pink-text: var(--white-300);
  --btn-pink-shadow: var(--pink-700);

  --btn-darkpink-bg: var(--pink-600);
  --btn-darkpink-text: var(--pink-300);
  --btn-darkpink-shadow: var(--pink-800);

  --btn-blue-bg: var(--blue-500);
  --btn-blue-text: var(--blue-100);
  --btn-blue-shadow: var(--blue-600);

  --btn-darkblue-bg: var(--blue-700);
  --btn-darkblue-text: var(--white-300);
  --btn-darkblue-shadow: var(--blue-900);

  --btn-white-bg: var(--white-500);
  --btn-white-text: var(--white-950);
  --btn-white-shadow: var(--white-800);

  /* Simplified transition timing variables */
  --transition-page: 300ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-normal: 300ms ease;
  --transition-fast: 150ms ease;

  /* Button depth options */
  --btn-depth-none: 0px;
  --btn-depth-sm: 3px;
  --btn-depth-md: 5px;
  --btn-depth-lg: 8px;
}

/* Base Button Styles */
.btn {
  display: inline-block;
  font-family: var(--font-family-body);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-full);
  transition: all 0.4s ease-out;
  position: relative;
  box-shadow: 0 var(--btn-depth) 0 0 rgba(var(--btn-shadow-color), 1);
  transform: translateY(calc(var(--btn-depth) * -1));
  text-shadow: 0 1px 1px rgba(var(--btn-shadow-color), 0.8);
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-sm);
}

.btn-md {
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-base);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--font-size-lg);
}

/* Button Width Options */
.btn-block {
  display: block;
  width: 100%;
}

/* Button Colors */
.btn-pink {
  background-color: rgba(var(--btn-pink-bg), 1);
  color: rgba(var(--btn-pink-text), 0.8);
  --btn-shadow-color: var(--btn-pink-shadow);
  --btn-shadow-color-hover: var(--pink-600);
  --btn-shadow-color-active: var(--pink-700);
}

.btn-darkpink {
  background-color: rgba(var(--btn-darkpink-bg), 1);
  color: rgba(var(--btn-darkpink-text), 1);
  --btn-shadow-color: var(--btn-darkpink-shadow);
  --btn-shadow-color-hover: var(--pink-700);
  --btn-shadow-color-active: var(--pink-800);
}

.btn-blue {
  background-color: rgba(var(--btn-blue-bg), 1);
  color: rgba(var(--btn-blue-text), 0.9);
  --btn-shadow-color: var(--btn-blue-shadow);
  --btn-shadow-color-hover: var(--blue-600);
  --btn-shadow-color-active: var(--blue-700);
}

.btn-darkblue {
  background-color: rgba(var(--blue-700), 1);
  color: rgba(var(--btn-darkblue-text), 1);
  --btn-shadow-color: var(--btn-darkblue-shadow);
  --btn-shadow-color-hover: var(--blue-800);
  --btn-shadow-color-active: var(--blue-900);
}

.btn-white {
  background-color: rgba(var(--btn-white-bg), 1);
  color: rgba(var(--btn-white-text), 1);
  text-shadow: none;
  --btn-shadow-color: var(--btn-white-shadow);
  --btn-shadow-color-hover: var(--white-800);
  --btn-shadow-color-active: var(--white-900);
}

/* Button Image Colors */
.btn-pink svg {
  fill: rgba(var(--btn-pink-text), 1);
}

.btn-darkpink svg {
  fill: rgba(var(--btn-darkpink-text), 1);
}

.btn-blue svg {
  fill: rgba(var(--btn-blue-text), 1);
}

.btn-darkblue svg {
  fill: rgba(var(--btn-darkblue-text), 1);
}

.btn-white svg {
  fill: rgba(var(--btn-white-text), 1);
}

/* Button Depth Variations */
.btn-depth-sm {
  --btn-depth: var(--btn-depth-sm);
}

.btn-depth-md {
  --btn-depth: var(--btn-depth-md);
}

.btn-depth-lg {
  --btn-depth: var(--btn-depth-lg);
}

/* Button States */
.btn:hover {
  transform: translateY(calc(var(--btn-depth) * -1.3));
  box-shadow: 0 calc(var(--btn-depth) * 1.3) 0 0
    rgba(var(--btn-shadow-color), 1);
  text-shadow: 0 0 0 rgba(var(--btn-shadow-color), 0);
}

.btn:active {
  transform: translateY(calc(var(--btn-depth) * -0.3)) !important;
  box-shadow: 0 calc(var(--btn-depth) * 0.5) 0 0
    rgba(var(--btn-shadow-color), 1) !important;
  transition-duration: 0.05s;
}

/* Button with Icon */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-pink.btn:hover:not(.disabled) {
  background-color: rgba(var(--pink-400), 1);
  box-shadow: 0 calc(var(--btn-depth) * 1.3) 0 0
    rgba(var(--btn-shadow-color-hover), 1);
  color: rgba(var(--pink-600), 1);
}

.btn-darkpink.btn:hover:not(.disabled) {
  background-color: rgba(var(--pink-600), 1);
  box-shadow: 0 calc(var(--btn-depth) * 1.3) 0 0
    rgba(var(--btn-shadow-color-hover), 1);
  color: rgba(var(--pink-100), 1);
}

.btn-blue.btn:hover:not(.disabled) {
  background-color: rgba(var(--blue-400), 1);
  box-shadow: 0 calc(var(--btn-depth) * 1.3) 0 0
    rgba(var(--btn-shadow-color-hover), 1);
  color: rgba(var(--blue-700), 1);
}

.btn-darkblue.btn:hover:not(.disabled) {
  background-color: rgba(var(--blue-700), 0.8);
  box-shadow: 0 calc(var(--btn-depth) * 1.3) 0 0
    rgba(var(--btn-shadow-color-hover), 1);
  color: rgba(var(--blue-200), 1);
}

.btn-white.btn:hover:not(.disabled) {
  background-color: rgba(var(--white-400), 1);
  box-shadow: 0 calc(var(--btn-depth) * 1.3) 0 0
    rgba(var(--btn-shadow-color-hover), 1);
  color: rgba(var(--white-900), 1);
}

.btn-pink.btn:active:not(.disabled) {
  background-color: rgba(var(--pink-600), 1);
  box-shadow: 0 calc(var(--btn-depth) * 0.5) 0 0
    rgba(var(--btn-shadow-color-active), 1);
  color: rgba(var(--pink-800), 1);
}

.btn-darkpink.btn:active:not(.disabled) {
  background-color: rgba(var(--pink-700), 1);
  box-shadow: 0 calc(var(--btn-depth) * 0.5) 0 0
    rgba(var(--btn-shadow-color-active), 1);
  color: rgba(var(--pink-900), 1);
}

.btn-blue.btn:active:not(.disabled) {
  background-color: rgba(var(--blue-600), 1);
  box-shadow: 0 calc(var(--btn-depth) * 0.5) 0 0
    rgba(var(--btn-shadow-color-active), 1);
  color: rgba(var(--blue-900), 1);
}

.btn-darkblue.btn:active:not(.disabled) {
  background-color: rgba(var(--blue-800), 1);
  box-shadow: 0 calc(var(--btn-depth) * 0.5) 0 0
    rgba(var(--btn-shadow-color-active), 1);
  color: rgba(var(--blue-300), 1);
}

.btn-white.btn:active:not(.disabled) {
  background-color: rgba(var(--white-800), 1);
  box-shadow: 0 calc(var(--btn-depth) * 0.5) 0 0
    rgba(var(--btn-shadow-color-active), 1);
  color: rgba(var(--white-100), 1);
}

/* Secondary Button Option (Outline) */
.btn-outline {
  background-color: transparent !important;
  text-shadow: none;
}

.btn-pink.btn-outline {
  color: rgba(var(--pink-500), 1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--pink-500), 1) !important;
}

.btn-blue.btn-outline {
  color: rgba(var(--blue-500), 1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--blue-500), 1) !important;
}

.btn-darkblue.btn-outline {
  color: rgba(var(--blue-700), 1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--blue-700), 1) !important;
}

.btn-white.btn-outline {
  color: rgba(var(--white-500), 1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--white-500), 1) !important;
}

.btn-pink.btn-outline:disabled {
  color: rgba(var(--pink-500), 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--pink-500), 0.7) !important;
}

.btn-blue.btn-outline:disabled {
  color: rgba(var(--blue-500), 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--blue-500), 0.7) !important;
}

.btn-darkblue.btn-outline:disabled {
  color: rgba(var(--blue-700), 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--blue-700), 0.7) !important;
}

.btn-white.btn-outline:disabled {
  color: rgba(var(--white-500), 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--white-500), 0.7) !important;
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: translateY(calc(var(--btn-depth) * -1));
  box-shadow: 0 var(--btn-depth) 0 0 rgba(var(--btn-shadow-color), 1);
}

.btn:disabled.btn-outline,
.btn.disabled.btn-outline {
  opacity: 1;
}

/* 3D Text Effect */
.three-d-text {
  display: inline-block;
  position: relative;
  top: -0.2rem;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Create a continuous extrusion effect with many small offsets */
  text-shadow:
    1px 1px 0 rgba(var(--pink-500), 1),
    1.5px 1.5px 0 rgba(var(--pink-500), 1),
    2px 2px 0 rgba(var(--pink-700), 1),
    2.5px 2.5px 0 rgba(var(--pink-700), 1),
    3px 3px 0 rgba(var(--pink-700), 1),
    3.5px 3.5px 0 rgba(var(--pink-700), 1),
    4px 4px 0 rgba(var(--pink-700), 1),
    4.5px 4.5px 0 rgba(var(--pink-700), 1),
    5px 5px 0 rgba(var(--pink-700), 1);
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.three-d-text:hover {
  transform: rotate(-1deg) scale(1.03);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    1px 1px 0 rgba(var(--pink-500), 1),
    2px 2px 0 rgba(var(--pink-500), 1),
    3px 3px 0 rgba(var(--pink-700), 1),
    4px 4px 0 rgba(var(--pink-700), 1),
    5px 5px 0 rgba(var(--pink-700), 1),
    6px 6px 0 rgba(var(--pink-700), 1),
    7px 7px 0 rgba(var(--pink-700), 1),
    8px 8px 0 rgba(var(--pink-700), 1);
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.font-light {
  font-weight: var(--font-weight-light);
}
.font-normal {
  font-weight: var(--font-weight-regular);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}

/* Background utility classes */
.bg-primary {
  background-color: rgba(var(--color-primary), 1);
}
.bg-secondary {
  background-color: rgba(var(--color-secondary), 1);
}
.bg-accent {
  background-color: rgba(var(--color-accent), 1);
}
.bg-dark {
  background-color: rgba(var(--color-background-primary), 0.3);
}
.bg-light {
  background-color: rgba(var(--white-100), 1);
}

/* Grid and spacing utilities */
.grid {
  display: grid;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-12 {
  gap: 3rem;
}

/* Margin utilities */
.m-auto {
  margin: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-16 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.my-24 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

/* Padding utilities */
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Width utilities */
.w-full {
  width: 100%;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}

/* Responsive classes */
@media (min-width: 640px) {
  .sm\:w-auto {
    width: auto;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:block {
    display: block;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:text-left {
    text-align: left;
  }
  .md\:text-center {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .lg\:col-start-4 {
    grid-column-start: 4;
  }
  .lg\:col-start-7 {
    grid-column-start: 7;
  }
}

/* Animation utilities */
.transition-fast {
  transition: all var(--transition-fast);
}

.transition-normal {
  transition: all var(--transition-normal);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* Gradient backgrounds */
.gradient-bg {
  background: linear-gradient(
    135deg,
    var(--color-background-primary) 0%,
    var(--color-background-secondary) 100%
  );
}