@import "tailwindcss";

@theme {
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  --color-brand-50:  #f6f4ff;
  --color-brand-100: #ede9fe;
  --color-brand-200: #ddd6fe;
  --color-brand-300: #c4b5fd;
  --color-brand-400: #a78bfa;
  --color-brand-500: #8b73e8;
  --color-brand-600: #7058cc;
  --color-brand-700: #5840a8;
  --color-brand-800: #3d2c7a;
  --color-brand-900: #261b55;

  --color-sage-50:  #f2faf5;
  --color-sage-100: #dcf5e6;
  --color-sage-500: #5faa7c;
  --color-sage-600: #4a8f65;

  --color-surface: #faf8ff;
  --color-card:    #ffffff;
  --color-border:  #e4dcf9;
  --color-muted:   #9186a8;
}

@layer base {
  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: var(--color-surface);
    color: #1e1730;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  *:focus-visible {
    outline: 2px solid var(--color-brand-400);
    outline-offset: 2px;
  }

  /* iOS Safari: eliminate 300ms tap delay on interactive elements */
  a, button, [role="button"], label, input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS Safari: prevent date/time inputs from enforcing a large min-width */
  input[type="date"],
  input[type="time"] {
    min-width: 0;
  }
}

/* ── Tap press feedback ── */
button, a, [role="button"] {
  transition: transform 0.1s ease-out, background-color 0.15s, color 0.15s, border-color 0.15s;
}
label {
  transition: transform 0.1s ease-out;
}
.tap-pressed {
  transform: scale(0.97);
}

/* ── Instant background for peer-checked option buttons ── */
input.peer ~ div {
  transition-property: transform !important;
  transition-duration: 0.1s !important;
}

/* ── Wizard step transitions ── */
@keyframes step-enter-forward {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes step-enter-back {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-enter-forward {
  animation: step-enter-forward 200ms ease-out;
}
.step-enter-back {
  animation: step-enter-back 200ms ease-out;
}