/* ============================================
   Neumorphic Component Library
   Surfaces: dark (#0A0A0A), light (#E8EAF0), navy (#1F2D50)
   ============================================ */

/* ---- CARDS ---- */

.neu-card {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--transition-smooth), box-shadow var(--transition-medium);
}

/* Light surface cards */
.neu-card--light {
  background: var(--surface-light);
  box-shadow: var(--neu-light-raised);
}

.neu-card--light:hover {
  transform: translateY(-4px);
  box-shadow: 10px 10px 20px #c0c2cb, -10px -10px 20px #ffffff;
}

.neu-card--light-inset {
  background: var(--surface-light);
  box-shadow: var(--neu-light-inset);
}

/* Navy surface cards */
.neu-card--navy {
  background: var(--surface-navy);
  box-shadow: var(--neu-navy-raised);
}

.neu-card--navy:hover {
  transform: translateY(-4px);
  box-shadow: 10px 10px 20px #111b33, -10px -10px 20px #2d4070;
}

.neu-card--navy-inset {
  background: var(--surface-navy);
  box-shadow: var(--neu-navy-inset);
}

/* Dark surface cards */
.neu-card--dark {
  background: var(--surface-dark);
  box-shadow: var(--neu-dark-raised);
}

/* ---- BUTTONS ---- */

.neu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition:
    box-shadow var(--transition-medium),
    transform var(--transition-fast),
    background-color var(--transition-fast);
  position: relative;
  overflow: hidden;
}

/* Cherry (red) button on dark surface */
.neu-btn--cherry-dark {
  background: var(--color-tart-cherry);
  color: var(--text-white);
  box-shadow: var(--neu-cherry-raised);
}

.neu-btn--cherry-dark:hover {
  background: var(--color-cherry-light);
  box-shadow: var(--neu-cherry-hover);
  transform: translateY(-2px);
}

.neu-btn--cherry-dark:active {
  box-shadow: var(--neu-cherry-inset);
  transform: translateY(0);
}

/* Blue button on dark surface */
.neu-btn--blue-dark {
  background: var(--color-cloudburst);
  color: var(--text-white);
  box-shadow: var(--neu-blue-raised);
}

.neu-btn--blue-dark:hover {
  background: var(--color-cloudburst-light);
  box-shadow: var(--neu-blue-hover);
  transform: translateY(-2px);
}

.neu-btn--blue-dark:active {
  box-shadow: var(--neu-blue-inset);
  transform: translateY(0);
}

/* Cherry button on light surface */
.neu-btn--cherry-light {
  background: var(--color-tart-cherry);
  color: var(--text-white);
  box-shadow: 4px 4px 12px rgba(181, 34, 58, 0.3), -4px -4px 12px #ffffff;
}

.neu-btn--cherry-light:hover {
  background: var(--color-cherry-light);
  box-shadow: 6px 6px 18px rgba(181, 34, 58, 0.4), -6px -6px 18px #ffffff;
  transform: translateY(-2px);
}

.neu-btn--cherry-light:active {
  box-shadow: inset 4px 4px 8px rgba(181, 34, 58, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
  transform: translateY(0);
}

/* Cherry button on navy surface */
.neu-btn--cherry-navy {
  background: var(--color-tart-cherry);
  color: var(--text-white);
  box-shadow: 4px 4px 12px #111b33, -4px -4px 12px rgba(181, 34, 58, 0.25);
}

.neu-btn--cherry-navy:hover {
  background: var(--color-cherry-light);
  box-shadow: 6px 6px 18px #111b33, -6px -6px 18px rgba(212, 50, 78, 0.35);
  transform: translateY(-2px);
}

.neu-btn--cherry-navy:active {
  box-shadow: inset 4px 4px 8px #111b33, inset -4px -4px 8px rgba(181, 34, 58, 0.2);
  transform: translateY(0);
}

/* Outline button on light surface */
.neu-btn--outline {
  background: var(--surface-light);
  color: var(--color-cloudburst);
  box-shadow: var(--neu-light-raised);
  border: 2px solid var(--color-cloudburst);
}

.neu-btn--outline:hover {
  background: var(--color-cloudburst);
  color: var(--text-white);
  box-shadow: 10px 10px 20px #c0c2cb, -10px -10px 20px #ffffff;
  transform: translateY(-2px);
}

.neu-btn--outline:active {
  box-shadow: var(--neu-light-inset);
  transform: translateY(0);
}

/* Ghost button on navy surface */
.neu-btn--ghost-navy {
  background: transparent;
  color: var(--text-white);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.neu-btn--ghost-navy:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.neu-btn--ghost-navy:active {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(0);
}

/* ---- FORM INPUTS ---- */

.neu-input,
.neu-textarea,
.neu-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: box-shadow var(--transition-medium), border-color var(--transition-fast);
}

/* Light surface inputs */
.neu-input--light,
.neu-textarea--light,
.neu-select--light {
  background: var(--surface-light);
  color: var(--text-on-light);
  box-shadow: var(--neu-light-inset);
}

.neu-input--light::placeholder,
.neu-textarea--light::placeholder {
  color: var(--text-on-light-muted);
}

.neu-input--light:focus,
.neu-textarea--light:focus,
.neu-select--light:focus {
  border-color: var(--color-tart-cherry);
  box-shadow: var(--neu-light-inset), 0 0 0 2px rgba(181, 34, 58, 0.15);
}

/* Navy surface inputs */
.neu-input--navy,
.neu-textarea--navy {
  background: var(--surface-navy);
  color: var(--text-on-navy);
  box-shadow: var(--neu-navy-inset);
}

.neu-input--navy::placeholder,
.neu-textarea--navy::placeholder {
  color: var(--text-on-navy-muted);
}

.neu-input--navy:focus,
.neu-textarea--navy:focus {
  border-color: var(--color-tart-cherry);
  box-shadow: var(--neu-navy-inset), 0 0 0 2px rgba(181, 34, 58, 0.2);
}

.neu-textarea {
  min-height: 150px;
  resize: vertical;
}

/* Input error state */
.neu-input--error,
.neu-textarea--error {
  border-color: var(--color-tart-cherry) !important;
}

/* Input label */
.neu-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-xs);
  letter-spacing: var(--ls-wide);
}

.neu-label--light {
  color: var(--text-on-light);
}

.neu-label--navy {
  color: var(--text-on-navy);
}

/* ---- ICON CIRCLES ---- */

.neu-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  transition: transform var(--transition-smooth), box-shadow var(--transition-medium);
}

.neu-icon-circle--light {
  background: var(--surface-light);
  box-shadow: var(--neu-light-raised-sm);
  color: var(--color-cloudburst);
}

.neu-icon-circle--light:hover {
  transform: translateY(-3px);
  box-shadow: var(--neu-light-raised);
  color: var(--color-tart-cherry);
}

.neu-icon-circle--navy {
  background: var(--surface-navy);
  box-shadow: var(--neu-navy-flat);
  color: var(--text-on-navy);
}

.neu-icon-circle--navy:hover {
  transform: translateY(-3px);
  box-shadow: var(--neu-navy-raised);
  color: var(--color-cherry-light);
}

/* ---- DIVIDER ---- */

.neu-divider {
  height: 4px;
  border-radius: 2px;
  border: none;
  margin: var(--space-xl) 0;
}

.neu-divider--light {
  background: var(--surface-light);
  box-shadow: var(--neu-light-flat);
}

.neu-divider--cherry {
  background: var(--color-tart-cherry);
  box-shadow: 0 2px 6px rgba(181, 34, 58, 0.3);
  height: 3px;
}

/* ---- BADGE ---- */

.neu-badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.neu-badge--cherry {
  background: var(--color-tart-cherry);
  color: var(--text-white);
}

.neu-badge--blue {
  background: var(--color-cloudburst);
  color: var(--text-white);
}

/* ---- IMAGE FRAME ---- */

.neu-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.neu-frame--light {
  box-shadow: var(--neu-light-raised);
}

.neu-frame--navy {
  box-shadow: var(--neu-navy-raised);
}

.neu-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}