byom-core-frontend/src/index.css

@import url('https://rsms.me/inter/inter.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: 'Inter', system-ui, sans-serif;
  --brand-purple: #7C3AED;
  --brand-pink: #EC4899;
  --brand-blue: #3B82F6;
  --brand-teal: #14B8A6;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: 'Inter var', system-ui, sans-serif;
  }
}

.font-light {
  font-variation-settings: 'wght' 300;
}

.font-medium {
  font-variation-settings: 'wght' 500;
}

/* Smooth transitions */
a,
button {
  @apply transition-all duration-200;
}

/* Hover effects */
a:hover,
button:hover {
  @apply opacity-80;
}

/* Add some custom utility classes */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Footer-inspired global styles */
@layer components {
  .monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  .heading-style {
    @apply font-black uppercase mb-6;
  }

  .heading-xl {
    @apply heading-style text-xl;
  }

  .heading-lg {
    @apply heading-style text-lg;
  }

  .link-hover {
    @apply hover:translate-x-2 transition-transform inline-block;
  }

  .content-wrapper {
    @apply max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 py-16;
  }

  .border-style {
    @apply border-2 border-black;
  }

  .border-top {
    @apply border-t-2 border-black;
  }

  .grid-layout {
    @apply grid grid-cols-1 md:grid-cols-4 gap-12;
  }

  .link-list {
    @apply space-y-3;
  }

  .link-item {
    @apply monospace text-sm link-hover;
  }
}

/* Brand Colors */
.text-brand-purple {
  color: var(--brand-purple);
}

.text-brand-pink {
  color: var(--brand-pink);
}

.text-brand-blue {
  color: var(--brand-blue);
}

.text-brand-teal {
  color: var(--brand-teal);
}

.bg-brand-purple {
  background-color: var(--brand-purple);
}

.hover\:bg-brand-purple:hover {
  background-color: var(--brand-purple);
}

.bg-brand-purple\/10 {
  background-color: color-mix(in srgb, var(--brand-purple) 10%, transparent);
}

.bg-brand-pink\/10 {
  background-color: color-mix(in srgb, var(--brand-pink) 10%, transparent);
}

.bg-brand-blue {
  background-color: var(--brand-blue);
}

/* Animations */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
}

/* Delay utilities */
.delay-1000 {
  animation-delay: 1000ms;
}