@theme{
    --color-primary:   oklch(64.92% 0.233 259.96);  /* Clean bright blue for primary actions */
    --color-secondary: oklch(22.88% 0.042 282.63);  /* Deep slate for text & secondary elements */
    --color-accent:    oklch(82.16% 0.168 89.41);   /* Warm amber for highlights & CTAs */
    --color-bg:        oklch(98.2% 0.005 235.85);   /* Very light gray background */
    --color-fg:        oklch(22.88% 0.042 282.63);  /* Dark slate for readable text */
    --color-border:    oklch(92% 0.01 260); 

    --color-feature-card-bg-start: oklch(0.964 0.019 263.91);
    --color-feature-card-bg-end: oklch(1 0 0);
    --color-icon-bg: oklch(0.722 0.211 255.21);

    /* TODO */
    /* Spacing scale */
    /* --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem; */
  
    /* Border radii */
    /* --radius-md: 0.375rem;
    --radius-lg: 0.5rem; */

}

@utility text-notice {
  @apply text-green-500;
}
@utility text-success {
  @apply text-green-500;
}

@utility text-alert {
  @apply text-red-500;
}

@utility text-warning {
  @apply text-yellow-500;
}
@utility form-text{
  @apply text-fg  dark:text-bg
}

/* Dark mode overrides */
.dark {
  --color-primary:   oklch(75% 0.233 259.96);  /* Slightly lighter blue for contrast on dark bg */
  --color-secondary: oklch(60% 0.042 282.63);  /* Lighter slate for text & secondary elements */
  --color-accent:    oklch(90% 0.168 89.41);   /* Brighter amber for highlights & CTAs */
  --color-bg:        oklch(0.15 0.0021 286.13); /* Dark gray background */
  --color-fg:        oklch(98% 0.042 282.63);  /* Almost white for readable text */
  --color-border:    oklch(40% 0.01 260);     

  --color-feature-card-bg-start: oklch(0.24 0.05 263.91);  /* Dark muted blue */
  --color-feature-card-bg-end:   oklch(0.18 0.03 263.91);  /* Even darker edge */
  --color-icon-bg:               oklch(0.73 0.19 255.21);  /* Keep same or slightly muted for pop */
}

@layer base {
  form {
    /* @apply  text-fg dark:text-bg; */
    @apply  text-fg;
  }
}

.fake{
  --color-primary:   #3B82F6;  /* Clean bright blue for primary actions */
  --color-secondary: #1E293B;  /* Deep slate for text & secondary elements */
  --color-accent:    #FBBF24;  /* Warm amber for highlights & CTAs */
  --color-bg:        #F8FAFC;  /* Very light gray background */
  --color-fg:        #1E293B;  /* Dark slate for readable text */
  --color-accent2:   #F97316;
}




@utility button-accent {
  @apply text-white font-semibold rounded-lg px-5 py-2 transition;
  background-color: #FBBF24;
  box-shadow: 0px 4px 28px 0px rgba(251, 191, 36, 0.24);
  cursor: pointer;
}

@utility button-blue {
  @apply text-white font-semibold rounded-lg px-5 py-2 transition cursor-pointer;
  background-image: linear-gradient(135deg, #3B82F6 20%, #1E293B 100%);
  box-shadow: 0px 4px 28px 0px rgba(42, 135, 221, 0.24);
  cursor: pointer;
}


@utility button-test {
  @apply font-medium rounded px-4 py-2 transition-colors;
}

/*  loader defined here.
.button_to{
  &[aria-busy="true"]{
    + {
      .loading-capsule  {
        display: block;
      }
    }
  }
}
//https://stackoverflow.com/questions/57683117/how-to-make-a-3d-css-capsule
.general-loader {
  display: none;
  .loading-capsule {
    margin-bottom: 3rem;
    margin-right: 0.7rem;
    display: block;
  }
}


[aria-busy="true"] {
  .general-loader  { display: block; }
} */
 

input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 0.25rem;
}


@keyframes gradient-shift {
  0% {
    background-image: linear-gradient(45deg, #3B82F6 70%, #1E293B 100%);
  }
  100% {
    background-image: linear-gradient(45deg, #3B82F6 70%, #FBBF24 100%);
  }
}

@utility animate-gradient-bg {
  @apply transition-all cursor-pointer;
}


.button-gradient-before {
  position: relative;
  z-index: 0;
}

.button-gradient-before::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;

  background-image:
    linear-gradient(252deg, rgba(41, 255, 203, 0.69) 2.68%, rgba(41, 255, 203, 0) 63.56%),
    linear-gradient(0deg, #00A7FD 0%, #00A7FD 100%),
    linear-gradient(92deg, rgba(130, 247, 255, 0.2) -25.29%, rgba(130, 247, 255, 0) 32.07%),
    linear-gradient(266deg, rgba(130, 247, 255, 0.2) 41.33%, rgba(130, 247, 255, 0) 71.15%),
    linear-gradient(0deg, #0087CD 0%, #0087CD 100%),
    var(--color-surface-accent, #0087CD);
  
  background-blend-mode: overlay;
}




/* Hide the empty state as soon as any quote card turbo-frame exists */
#quote_collection:has([id^="quote_card_"]) .empty-state { display: none; }


@keyframes sparkle-pop {
  0%   { transform: scale(0.6) rotate(0deg); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(1.2) rotate(35deg); opacity: 0; }
}
/* Optional: respect reduced-motion globally */
@media (prefers-reduced-motion: reduce){
  .sparkle-anim { animation: none !important; }
}


/* === Global Button Utilities (Tailwind v4) ============================= */
@utility btn {
  @apply inline-flex items-center justify-center select-none align-middle
         h-11 px-6 rounded-xl font-medium
         transition-all duration-300
         focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
         touch-manipulation;
}

/* Solid brand look; keep separate from motion so themes can reuse */
@utility btn--solid {
  @apply text-white bg-primary;
}

/* Lift on hover (desktop) + collapse on press; mobile-friendly */
@utility btn--lift {
  @apply hover:-translate-y-[3px] active:translate-y-0 transition-all duration-300 touch-manipulation hover:shadow-lg rounded text-white cursor-pointer hover:shadow-primary/90;
}



/* Shadow that pops on hover and eases on press */
@utility btn--shadow-pop {
  @apply hover:shadow-[0_16px_36px_-6px_color-mix(in_oklab,var(--color-primary),#000_75%)]
         active:shadow-[0_2px_6px_-2px_color-mix(in_oklab,var(--color-primary),#000_70%)];
}

/* Respect reduced motion: remove transforms while keeping color/shadow */
@media (prefers-reduced-motion: reduce){
  .btn--lift { transform: none !important; }
}





/* following code  global states is working */
/* @layer base {
  button { @apply transition-transform duration-300; }
  button:hover { transform: translateY(-3px); }
  button:active { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  button:hover { transform: none !important; }
} */


/* 
@layer base {
  button { @apply hover:-translate-y-[3px] active:translate-y-0 transition-all duration-300 touch-manipulation hover:shadow-lg rounded text-white cursor-pointer hover:shadow-primary/90; }
  a { @apply hover:-translate-y-[3px] active:translate-y-0 transition-all duration-300 touch-manipulation hover:shadow-lg rounded text-white cursor-pointer hover:shadow-primary/90; }
} */



/* Spinner for busy state */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: white;
  border-radius: 50%;
  margin-right: 0.5rem;
  animation: spin 0.6s linear infinite;
}

/* Disabled button look */
button[disabled] {
  @apply opacity-60 cursor-not-allowed;
}

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