@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. */
  .app-shell {
    @apply flex min-h-screen flex-col;
  }
  .app-shell__main {
    @apply mx-auto w-full max-w-6xl flex-1 px-4 py-6 sm:px-6 sm:py-10 lg:px-8;
  }

  .app-header {
    @apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8;
  }
  .app-header__inner {
    @apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur;
  }
  .app-header__brand {
    @apply flex items-center gap-2;
  }
  .app-header__brand-mark {
    @apply inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card;
  }
  .app-header__brand-title {
    @apply font-display text-lg leading-tight;
  }
  .app-header__brand-subtitle {
    @apply text-xs text-muted;
  }
  .app-header__nav {
    @apply flex flex-wrap items-center gap-1;
  }
  .app-header__nav-link {
    @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-ink transition-colors hover:bg-ink/5;
  }
  .app-header__nav-link--active {
    @apply bg-primary text-primary-foreground shadow-card hover:bg-primary;
  }
  .app-header__actions {
    @apply flex items-center gap-1;
  }

  .app-footer {
    @apply mx-auto mt-10 w-full max-w-6xl px-4 py-6 text-xs text-muted sm:px-6 lg:px-8;
  }
  .app-footer__inner {
    @apply flex flex-col items-center justify-between gap-2 sm:flex-row;
  }
  .app-footer__brand {
    @apply flex items-center gap-2;
  }
  .app-footer__brand-name {
    @apply font-display text-sm;
  }
  .app-footer__meta {
    @apply flex items-center gap-3;
  }
  .app-footer__separator {
    @apply opacity-50;
  }

  .language-switcher {
    @apply inline-flex items-center gap-1 rounded-md border border-border bg-surface/90 p-1 text-xs shadow-card;
  }
  .language-switcher__icon {
    @apply ml-1 h-3.5 w-3.5 text-muted;
  }
  .language-switcher__button {
    @apply rounded px-2 py-1 font-semibold text-muted transition-colors hover:bg-surface-muted hover:text-ink;
  }
  .language-switcher__button--active {
    @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
  }

  .empty-state {
    @apply flex flex-col items-center gap-2 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card;
  }
  .empty-state__icon {
    @apply h-10 w-10 text-muted;
  }
  .empty-state__icon--image {
    @apply h-40 w-40 opacity-90;
  }
  .empty-state__title {
    @apply text-xl font-semibold;
  }
  .empty-state__text {
    @apply text-sm text-muted;
  }

  .page-section {
    @apply grid gap-1;
  }
  .page-section__title {
    @apply font-display text-3xl;
  }
  .page-section__text {
    @apply text-sm text-muted;
  }

  .public-profile {
    @apply flex min-h-screen flex-col;
  }
  .public-profile__toolbar {
    @apply mx-auto flex w-full max-w-6xl justify-end px-4 pt-6 sm:px-6 lg:px-8;
  }
  .public-profile__main {
    @apply mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6 lg:px-8;
  }
  .public-profile__hero {
    @apply mb-10 flex flex-col items-center gap-3 text-center;
  }
  .public-profile__avatar {
    @apply inline-flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground shadow-card;
  }
  .public-profile__avatar-image {
    @apply h-14 w-14 rounded-full object-cover;
  }
  .public-profile__title {
    @apply font-display text-4xl;
  }
  .public-profile__bio {
    @apply max-w-xl text-muted;
  }

  .profile-form {
    @apply grid gap-4 rounded-xl border border-border bg-surface p-6 shadow-card;
  }
  .profile-form__avatar-panel {
    @apply flex flex-wrap items-center gap-4 rounded-md border border-border bg-surface-muted p-4;
  }
  .profile-form__avatar-preview {
    @apply inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground;
  }
  .profile-form__avatar-image {
    @apply h-16 w-16 object-cover;
  }
  .profile-form__avatar-copy {
    @apply min-w-0 flex-1;
  }
  .profile-form__avatar-title {
    @apply text-sm font-semibold;
  }
  .profile-form__avatar-hint {
    @apply text-xs text-muted;
  }
  .profile-form__actions {
    @apply flex items-center justify-end gap-2;
  }

  .modal {
    @apply fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-6;
  }
  .modal__backdrop {
    @apply absolute inset-0 animate-fade-in-up bg-ink/40 backdrop-blur-sm;
  }
  .modal__panel {
    @apply relative flex max-h-[90vh] w-full animate-fade-in-up flex-col overflow-hidden rounded-t-xl bg-surface shadow-pop sm:rounded-xl;
  }
  .modal__panel--md {
    @apply sm:max-w-lg;
  }
  .modal__panel--lg {
    @apply sm:max-w-2xl;
  }
  .modal__header {
    @apply flex items-start justify-between gap-4 border-b border-border px-5 py-4;
  }
  .modal__title-wrap {
    @apply min-w-0;
  }
  .modal__title {
    @apply text-lg font-semibold text-ink;
  }
  .modal__description {
    @apply mt-1 text-sm text-muted;
  }
  .modal__body {
    @apply overflow-y-auto px-5 py-5;
  }
  .modal__footer {
    @apply flex items-center justify-end gap-2 border-t border-border px-5 py-4;
  }

  .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;
  }
}