@import './tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    @apply bg-background text-ink font-sans antialiased;
    background-image:
      radial-gradient(1200px 600px at 0% -10%, rgba(244, 192, 78, 0.18), transparent 60%),
      radial-gradient(900px 500px at 100% 110%, rgba(226, 120, 150, 0.18), transparent 55%);
    background-attachment: fixed;
  }
  h1,
  h2,
  h3 {
    @apply font-display text-ink;
    letter-spacing: -0.01em;
  }
  a {
    @apply transition-colors;
  }
}

@layer components {
  /* BEM-friendly classes: kept parallel to Tailwind utilities where possible. */
  .wish-card {
    @apply relative flex flex-col overflow-hidden rounded-lg bg-surface shadow-card transition-transform duration-200;
  }
  .wish-card:hover {
    transform: translateY(-2px);
  }
  .wish-card--completed {
    filter: saturate(0.45) brightness(0.98);
  }
  .wish-card--completed .wish-card__title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(var(--color-muted) / 0.6);
  }

  .wish-card__image-wrap {
    @apply relative aspect-[4/3] bg-surface-muted overflow-hidden;
  }
  .wish-card__image {
    @apply h-full w-full object-cover;
  }
  .wish-card__body {
    @apply flex flex-col gap-2 p-4;
  }
  .wish-card__title {
    @apply text-lg font-semibold leading-snug text-ink;
  }
  .wish-card__price {
    @apply text-sm font-medium text-muted;
  }
  .wish-card__comment {
    @apply text-sm text-muted line-clamp-2;
  }

  .wish-badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide;
  }
  .wish-badge--new {
    @apply bg-primary text-primary-foreground;
  }
  .wish-badge--completed {
    @apply bg-ink/5 text-ink;
  }
  .wish-badge--archived {
    @apply bg-warning/20 text-warning;
  }
  .wish-badge--deleted {
    @apply bg-danger/15 text-danger;
  }

  .field {
    @apply flex flex-col gap-1.5;
  }
  .field__label {
    @apply text-sm font-medium text-ink;
  }
  .field__input,
  .field__textarea,
  .field__select {
    @apply w-full rounded-md border border-border bg-surface px-3 py-2.5 text-ink outline-none transition-all duration-150 placeholder:text-muted focus:border-primary focus:shadow-[var(--shadow-focus)];
  }
  .field__error {
    @apply text-xs text-danger;
  }
}

@layer utilities {
  .container-page {
    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
  }
}