@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --gold: #c9a84c;
  --gold-light: #e2c97e;
  --gold-dark: #8a6d2b;
  --gold-muted: #6b5a30;
  --cream: #f0e4c9;
  --cream-dark: #d4c6a0;
  --surface: #0f0e0b;
  --surface-raised: #1a1812;
  --surface-border: #2a2518;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

body {
  @apply h-full min-h-screen;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Ambient background gradient blobs */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.12;
  will-change: transform;
}

.ambient-blob--gold {
  background: radial-gradient(circle, #c9a84c, transparent 70%);
  bottom: -10%;
  right: -5%;
  animation: drift-gold 25s ease-in-out infinite;
}

.ambient-blob--amber {
  background: radial-gradient(circle, #d4a84c, transparent 70%);
  top: 10%;
  left: -8%;
  animation: drift-amber 30s ease-in-out infinite;
}

.ambient-blob--warm {
  background: radial-gradient(circle, #8a6d2b, transparent 70%);
  bottom: 20%;
  left: 30%;
  animation: drift-warm 35s ease-in-out infinite;
}

@keyframes drift-gold {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-40px, -30px) scale(1.05); }
  50%      { transform: translate(-20px, -60px) scale(0.95); }
  75%      { transform: translate(30px, -20px) scale(1.02); }
}

@keyframes drift-amber {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30px, 40px) scale(0.97); }
  50%      { transform: translate(50px, 20px) scale(1.04); }
  75%      { transform: translate(20px, -30px) scale(0.98); }
}

@keyframes drift-warm {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-30px, 20px) scale(1.03); }
  50%      { transform: translate(20px, 40px) scale(0.96); }
  75%      { transform: translate(40px, -10px) scale(1.01); }
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

section {
  @apply mb-6;
}

p + p {
  @apply mt-3;
}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

a {
  @apply text-gold hover:text-gold-light transition-all ease-in-out duration-300 no-underline;
}

.pulse {
  animation: pulse 10s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 20%; }
  50%      { opacity: 80%; }
}

.pulse2 {
  animation: pulse2 4s infinite;
}

@keyframes pulse2 {
  0%, 100% { opacity: 100%; }
  50%      { opacity: 50%; }
}

:where([autocomplete=one-time-code]) {
  --otp-digits: 6;
  --otc-ls: 2ch;
  --otc-gap: 1.25;
  --_otp-bgsz: calc(var(--otc-ls) + 1ch);

  all: unset;
  background: linear-gradient(90deg, 
    var(--otc-bg, #EEE) calc(var(--otc-gap) * var(--otc-ls)),
    transparent 0
  ) 0 0 / var(--_otp-bgsz) 100%;
  caret-color: var(--otc-cc, #333);
  clip-path: inset(0% calc(var(--otc-ls) / 2) 0% 0%);
  font-family: ui-monospace, monospace;
  font-size: var(--otc-fz, 2.5em);
  inline-size: calc(var(--otc-digits) * var(--_otp-bgsz));
  letter-spacing: var(--otc-ls);
  padding-block: var(--otc-pb, 1ch);
  padding-inline-start: calc(((var(--otc-ls) - 1ch) / 2) * var(--otc-gap));
}

.field {
  @apply mb-4;
}

label {
  @apply block text-[11px] tracking-[0.2em] uppercase text-gold-dark font-sans mb-2;
}

input[type="email"], input[type="textarea"], input[type="password"], input[type="text"], input[type="phone"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], input[type="month"], input[type="week"], input[type="range"], input[type="file"], input[type="image"], textarea {
  @apply text-sm text-cream w-full px-4 py-2.5 bg-white/[0.03] border border-gold/20 outline-none focus:border-gold/50 focus:ring-1 focus:ring-gold/20 rounded-none transition-all duration-300 placeholder:text-gold-dark/40;
}

select {
  @apply text-sm text-cream px-4 py-2.5 bg-white/[0.03] border border-gold/20 outline-none focus:border-gold/50 focus:ring-1 focus:ring-gold/20 rounded-none transition-all duration-300 min-w-[200px];
}

.button-base {
  @apply no-underline inline-block font-sans rounded-none transition-all duration-300 ease-in-out border;
}

.button-normal {
  @apply px-6 py-2.5 text-[11px] tracking-[0.2em] uppercase;
}

.button-small {
  @apply px-3 py-1.5 text-[10px] tracking-[0.15em] uppercase;
}

.button--primary {
  @apply button-base button-normal text-surface bg-gold hover:bg-gold-light border-gold hover:border-gold-light transition-all;
  @apply disabled:bg-gold/20 disabled:border-gold/10 disabled:text-gold-dark disabled:cursor-not-allowed;
}

.button--primary-sm {
  @apply button-base button-small text-surface bg-gold hover:bg-gold-light border-gold hover:border-gold-light transition-all;
  @apply disabled:bg-gold/20 disabled:border-gold/10 disabled:text-gold-dark disabled:cursor-not-allowed;
}

.button--secondary {
  @apply button-base button-normal border-gold/30 no-underline text-gold hover:bg-gold/10 hover:border-gold/50 transition-all;
  @apply disabled:text-gold/20 disabled:border-gold/10 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--secondary-sm {
  @apply button-base button-small border-gold/30 no-underline text-gold hover:bg-gold/10 hover:border-gold/50 transition-all;
  @apply disabled:text-gold/20 disabled:border-gold/10 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--secondary-danger {
  @apply button-base button-normal border-red-800/30 bg-transparent no-underline text-red-400/70 hover:bg-red-900/20 hover:border-red-700/40 hover:text-red-400 transition-all;
  @apply disabled:text-red-600/20 disabled:border-red-800/10 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--secondary-danger-sm {
  @apply button-base button-small border-red-800/30 bg-transparent no-underline text-red-400/70 hover:bg-red-900/20 hover:border-red-700/40 hover:text-red-400 transition-all;
  @apply disabled:text-red-600/20 disabled:border-red-800/10 disabled:bg-transparent disabled:cursor-not-allowed;
}

.button--formal {
  @apply button-base button-normal text-gold border-gold/30 bg-transparent hover:bg-gold/10 hover:border-gold/50 hover:text-gold-light transition-all;
  @apply disabled:border-gold/10 disabled:bg-transparent disabled:text-gold/20 disabled:cursor-not-allowed;
}

.button--formal-danger {
  @apply button-base button-normal border-red-800/30 bg-transparent no-underline text-red-400/70 hover:bg-red-900/20 hover:border-red-700/40 hover:text-red-400 transition-all;
  @apply disabled:text-red-600/20 disabled:border-red-800/10 disabled:bg-transparent disabled:cursor-not-allowed;
}

.radio-group {
  @apply isolate rounded-none flex;

  label {
    @apply button-base button-normal text-gold border-gold hover:bg-gold/10 hover:z-20 rounded-none;
    @apply inline-flex items-center focus:z-10 rounded-none mb-0 !important;

    &:not(:first-child) {
      @apply -ml-px;
    }

    &:first-child {
      @apply rounded-none !important;
    }

    &:last-child {
      @apply rounded-none !important;
    }
    
    &:has(input:checked) {
      @apply text-surface bg-gold border-gold z-10 !important;
    }
  }
}

.checkbox-group {
  @apply isolate;

  label {
    @apply button-base button-normal text-gold hover:bg-gold/10 hover:border-gold/40 hover:z-20;
    @apply inline-flex items-center focus:z-10 mb-0 !important;    
    
    &:has(input:checked) {
      @apply text-surface bg-gold/20 border-gold text-gold-light z-10 !important;

      &:before {
        content: '✓';
        @apply mr-2;
      }
    }

  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */