@import "tailwindcss";

/* Regular */
@font-face {
  font-family: "FF Shamel Family";
  src: url("./fonts/FFShamelFamily-SansOneRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "FF Shamel Family";
  src: url("./fonts/FFShamelFamily-SansOneBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply globally */
body {
  font-family: "FF Shamel Family", sans-serif;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================
   Tailwind CSS v4 Theme Configuration
   ============================================ */
:root {
  /* Primary Colors */
  --color-primary-100: #e8ccff;
  --color-primary-200: #d199ff;
  --color-primary-300: #ba66ff;
  --color-primary-400: #a333ff;
  --color-primary-500: #4d008c;
  --color-primary-600: #7000cc;
  --color-primary-700: #540099;
  --color-primary-800: #380066;
  --color-primary-900: #1c0033;

  /* Secondary Colors */
  --color-secondary-100: #f2e8d9;
  --color-secondary-200: #e5d1b3;
  --color-secondary-300: #d8ba8d;
  --color-secondary-400: #cba367;
  --color-secondary-500: #976f33;
  --color-secondary-600: #987034;
  --color-secondary-700: #725427;
  --color-secondary-800: #4c381a;
  --color-secondary-900: #261c0d;

  /* Neutral Colors */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #e6e6e6;
  --color-neutral-300: #cccccc;
  --color-neutral-400: #b3b3b3;
  --color-neutral-500: #999999;
  --color-neutral-600: #666666;
  --color-neutral-700: #4d4d4d;
  --color-neutral-800: #333333;
  --color-neutral-900: #1a1a1a;
}

/* Tailwind CSS v4 @theme configuration */
@theme {
  /* Primary Colors */
  --color-primary-100: #e8ccff;
  --color-primary-200: #d199ff;
  --color-primary-300: #ba66ff;
  --color-primary-400: #a333ff;
  --color-primary-500: #4d008c;
  --color-primary-600: #7000cc;
  --color-primary-700: #540099;
  --color-primary-800: #380066;
  --color-primary-900: #1c0033;

  /* Secondary Colors */
  --color-secondary-100: #f2e8d9;
  --color-secondary-200: #e5d1b3;
  --color-secondary-300: #d8ba8d;
  --color-secondary-400: #cba367;
  --color-secondary-500: #976f33;
  --color-secondary-600: #987034;
  --color-secondary-700: #725427;
  --color-secondary-800: #4c381a;
  --color-secondary-900: #261c0d;

  /* Neutral Colors */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #e6e6e6;
  --color-neutral-300: #cccccc;
  --color-neutral-400: #b3b3b3;
  --color-neutral-500: #999999;
  --color-neutral-600: #666666;
  --color-neutral-700: #4d4d4d;
  --color-neutral-800: #333333;
  --color-neutral-900: #1a1a1a;

  /* Font Family */
  --font-family-shamel: "FF Shamel Family", sans-serif;
  
  /* Border Radius */
  --radius-8: 0.125rem;
  --radius-12: 0.25rem;
  --radius-16: 0.4375rem;
  --radius-20: 1rem;
  --radius-24: 1.75rem;
}

/* ============================================
   Animation Keyframes
   ============================================ */
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes cardFadeIn {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */
.animate-slideDown {
  animation: slideDown 0.3s ease-out forwards;
}

.animate-slideUp {
  animation: slideUp 0.3s ease-in forwards;
}

.animate-cardFadeIn {
  animation: cardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

nav .navbar-link-active  {
 color: #cba367;
 border-bottom: 2px solid #cba367;
}


/* ============================================
   Navbar Scrolled State Styles
   ============================================ */
.navbar-scrolled .navbar-link:not(.navbar-link-active) {
  color: rgb(0, 0, 0);
}

.navbar-scrolled .navbar-link:not(.navbar-link-active):hover {
  color: #380066; /* primary-800 */
}

.navbar-scrolled .navbar-link-active {
  color: #380066; /* primary-800 */
}

.navbar-scrolled .navbar-link-active:hover {
  color: #380066; /* primary-800 */
}

.navbar-scrolled .navbar-underline {
  background-color: #380066; /* primary-800 */
}

/* ============================================
   Custom Color Utility Classes
   Using CSS Variables - Works with any setup
   ============================================ */

/* Primary Colors - Background */
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

/* Primary Colors - Text */
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }

/* Primary Colors - Border */
.border-primary-100 { border-color: var(--color-primary-100); }
.border-primary-200 { border-color: var(--color-primary-200); }
.border-primary-300 { border-color: var(--color-primary-300); }
.border-primary-400 { border-color: var(--color-primary-400); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-primary-700 { border-color: var(--color-primary-700); }
.border-primary-800 { border-color: var(--color-primary-800); }
.border-primary-900 { border-color: var(--color-primary-900); }

/* Secondary Colors - Background */
.bg-secondary-100 { background-color: var(--color-secondary-100); }
.bg-secondary-200 { background-color: var(--color-secondary-200); }
.bg-secondary-300 { background-color: var(--color-secondary-300); }
.bg-secondary-400 { background-color: var(--color-secondary-400); }
.bg-secondary-500 { background-color: var(--color-secondary-500); }
.bg-secondary-600 { background-color: var(--color-secondary-600); }
.bg-secondary-700 { background-color: var(--color-secondary-700); }
.bg-secondary-800 { background-color: var(--color-secondary-800); }
.bg-secondary-900 { background-color: var(--color-secondary-900); }

/* Secondary Colors - Text */
.text-secondary-100 { color: var(--color-secondary-100); }
.text-secondary-200 { color: var(--color-secondary-200); }
.text-secondary-300 { color: var(--color-secondary-300); }
.text-secondary-400 { color: var(--color-secondary-400); }
.text-secondary-500 { color: var(--color-secondary-500); }
.text-secondary-600 { color: var(--color-secondary-600); }
.text-secondary-700 { color: var(--color-secondary-700); }
.text-secondary-800 { color: var(--color-secondary-800); }
.text-secondary-900 { color: var(--color-secondary-900); }

/* Secondary Colors - Border */
.border-secondary-100 { border-color: var(--color-secondary-100); }
.border-secondary-200 { border-color: var(--color-secondary-200); }
.border-secondary-300 { border-color: var(--color-secondary-300); }
.border-secondary-400 { border-color: var(--color-secondary-400); }
.border-secondary-500 { border-color: var(--color-secondary-500); }
.border-secondary-600 { border-color: var(--color-secondary-600); }
.border-secondary-700 { border-color: var(--color-secondary-700); }
.border-secondary-800 { border-color: var(--color-secondary-800); }
.border-secondary-900 { border-color: var(--color-secondary-900); }

/* Neutral Colors - Background */
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-200 { background-color: var(--color-neutral-200); }
.bg-neutral-300 { background-color: var(--color-neutral-300); }
.bg-neutral-400 { background-color: var(--color-neutral-400); }
.bg-neutral-500 { background-color: var(--color-neutral-500); }
.bg-neutral-600 { background-color: var(--color-neutral-600); }
.bg-neutral-700 { background-color: var(--color-neutral-700); }
.bg-neutral-800 { background-color: var(--color-neutral-800); }
.bg-neutral-900 { background-color: var(--color-neutral-900); }

/* Neutral Colors - Text */
.text-neutral-100 { color: var(--color-neutral-100); }
.text-neutral-200 { color: var(--color-neutral-200); }
.text-neutral-300 { color: var(--color-neutral-300); }
.text-neutral-400 { color: var(--color-neutral-400); }
.text-neutral-500 { color: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); }
.text-neutral-700 { color: var(--color-neutral-700); }
.text-neutral-800 { color: var(--color-neutral-800); }
.text-neutral-900 { color: var(--color-neutral-900); }

/* Neutral Colors - Border */
.border-neutral-100 { border-color: var(--color-neutral-100); }
.border-neutral-200 { border-color: var(--color-neutral-200); }
.border-neutral-300 { border-color: var(--color-neutral-300); }
.border-neutral-400 { border-color: var(--color-neutral-400); }
.border-neutral-500 { border-color: var(--color-neutral-500); }
.border-neutral-600 { border-color: var(--color-neutral-600); }
.border-neutral-700 { border-color: var(--color-neutral-700); }
.border-neutral-800 { border-color: var(--color-neutral-800); }
.border-neutral-900 { border-color: var(--color-neutral-900); }

/* Hover States - Using attribute selectors for Tailwind-style class names */
[class*="hover:text-primary-100"]:hover { color: var(--color-primary-100); }
[class*="hover:text-primary-200"]:hover { color: var(--color-primary-200); }
[class*="hover:text-primary-300"]:hover { color: var(--color-primary-300); }
[class*="hover:text-primary-400"]:hover { color: var(--color-primary-400); }
[class*="hover:text-primary-500"]:hover { color: var(--color-primary-500); }
[class*="hover:text-primary-600"]:hover { color: var(--color-primary-600); }
[class*="hover:text-primary-700"]:hover { color: var(--color-primary-700); }
[class*="hover:text-primary-800"]:hover { color: var(--color-primary-800); }
[class*="hover:text-primary-900"]:hover { color: var(--color-primary-900); }

[class*="hover:bg-primary-100"]:hover { background-color: var(--color-primary-100); }
[class*="hover:bg-primary-200"]:hover { background-color: var(--color-primary-200); }
[class*="hover:bg-primary-300"]:hover { background-color: var(--color-primary-300); }
[class*="hover:bg-primary-400"]:hover { background-color: var(--color-primary-400); }
[class*="hover:bg-primary-500"]:hover { background-color: var(--color-primary-500); }
[class*="hover:bg-primary-600"]:hover { background-color: var(--color-primary-600); }
[class*="hover:bg-primary-700"]:hover { background-color: var(--color-primary-700); }
[class*="hover:bg-primary-800"]:hover { background-color: var(--color-primary-800); }
[class*="hover:bg-primary-900"]:hover { background-color: var(--color-primary-900); }

[class*="hover:border-primary-100"]:hover { border-color: var(--color-primary-100); }
[class*="hover:border-primary-200"]:hover { border-color: var(--color-primary-200); }
[class*="hover:border-primary-300"]:hover { border-color: var(--color-primary-300); }
[class*="hover:border-primary-400"]:hover { border-color: var(--color-primary-400); }
[class*="hover:border-primary-500"]:hover { border-color: var(--color-primary-500); }
[class*="hover:border-primary-600"]:hover { border-color: var(--color-primary-600); }
[class*="hover:border-primary-700"]:hover { border-color: var(--color-primary-700); }
[class*="hover:border-primary-800"]:hover { border-color: var(--color-primary-800); }
[class*="hover:border-primary-900"]:hover { border-color: var(--color-primary-900); }

[class*="hover:text-secondary-100"]:hover { color: var(--color-secondary-100); }
[class*="hover:text-secondary-200"]:hover { color: var(--color-secondary-200); }
[class*="hover:text-secondary-300"]:hover { color: var(--color-secondary-300); }
[class*="hover:text-secondary-400"]:hover { color: var(--color-secondary-400); }
[class*="hover:text-secondary-500"]:hover { color: var(--color-secondary-500); }
[class*="hover:text-secondary-600"]:hover { color: var(--color-secondary-600); }
[class*="hover:text-secondary-700"]:hover { color: var(--color-secondary-700); }
[class*="hover:text-secondary-800"]:hover { color: var(--color-secondary-800); }
[class*="hover:text-secondary-900"]:hover { color: var(--color-secondary-900); }

[class*="hover:bg-secondary-100"]:hover { background-color: var(--color-secondary-100); }
[class*="hover:bg-secondary-200"]:hover { background-color: var(--color-secondary-200); }
[class*="hover:bg-secondary-300"]:hover { background-color: var(--color-secondary-300); }
[class*="hover:bg-secondary-400"]:hover { background-color: var(--color-secondary-400); }
[class*="hover:bg-secondary-500"]:hover { background-color: var(--color-secondary-500); }
[class*="hover:bg-secondary-600"]:hover { background-color: var(--color-secondary-600); }
[class*="hover:bg-secondary-700"]:hover { background-color: var(--color-secondary-700); }
[class*="hover:bg-secondary-800"]:hover { background-color: var(--color-secondary-800); }
[class*="hover:bg-secondary-900"]:hover { background-color: var(--color-secondary-900); }

[class*="hover:border-secondary-100"]:hover { border-color: var(--color-secondary-100); }
[class*="hover:border-secondary-200"]:hover { border-color: var(--color-secondary-200); }
[class*="hover:border-secondary-300"]:hover { border-color: var(--color-secondary-300); }
[class*="hover:border-secondary-400"]:hover { border-color: var(--color-secondary-400); }
[class*="hover:border-secondary-500"]:hover { border-color: var(--color-secondary-500); }
[class*="hover:border-secondary-600"]:hover { border-color: var(--color-secondary-600); }
[class*="hover:border-secondary-700"]:hover { border-color: var(--color-secondary-700); }
[class*="hover:border-secondary-800"]:hover { border-color: var(--color-secondary-800); }
[class*="hover:border-secondary-900"]:hover { border-color: var(--color-secondary-900); }

[class*="hover:text-neutral-100"]:hover { color: var(--color-neutral-100); }
[class*="hover:text-neutral-200"]:hover { color: var(--color-neutral-200); }
[class*="hover:text-neutral-300"]:hover { color: var(--color-neutral-300); }
[class*="hover:text-neutral-400"]:hover { color: var(--color-neutral-400); }
[class*="hover:text-neutral-500"]:hover { color: var(--color-neutral-500); }
[class*="hover:text-neutral-600"]:hover { color: var(--color-neutral-600); }
[class*="hover:text-neutral-700"]:hover { color: var(--color-neutral-700); }
[class*="hover:text-neutral-800"]:hover { color: var(--color-neutral-800); }
[class*="hover:text-neutral-900"]:hover { color: var(--color-neutral-900); }

[class*="hover:bg-neutral-100"]:hover { background-color: var(--color-neutral-100); }
[class*="hover:bg-neutral-200"]:hover { background-color: var(--color-neutral-200); }
[class*="hover:bg-neutral-300"]:hover { background-color: var(--color-neutral-300); }
[class*="hover:bg-neutral-400"]:hover { background-color: var(--color-neutral-400); }
[class*="hover:bg-neutral-500"]:hover { background-color: var(--color-neutral-500); }
[class*="hover:bg-neutral-600"]:hover { background-color: var(--color-neutral-600); }
[class*="hover:bg-neutral-700"]:hover { background-color: var(--color-neutral-700); }
[class*="hover:bg-neutral-800"]:hover { background-color: var(--color-neutral-800); }
[class*="hover:bg-neutral-900"]:hover { background-color: var(--color-neutral-900); }

[class*="hover:border-neutral-100"]:hover { border-color: var(--color-neutral-100); }
[class*="hover:border-neutral-200"]:hover { border-color: var(--color-neutral-200); }
[class*="hover:border-neutral-300"]:hover { border-color: var(--color-neutral-300); }
[class*="hover:border-neutral-400"]:hover { border-color: var(--color-neutral-400); }
[class*="hover:border-neutral-500"]:hover { border-color: var(--color-neutral-500); }
[class*="hover:border-neutral-600"]:hover { border-color: var(--color-neutral-600); }
[class*="hover:border-neutral-700"]:hover { border-color: var(--color-neutral-700); }
[class*="hover:border-neutral-800"]:hover { border-color: var(--color-neutral-800); }
[class*="hover:border-neutral-900"]:hover { border-color: var(--color-neutral-900); }