@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply bg-sand font-sans text-ink-900;
    background-image:
      radial-gradient(ellipse 80% 50% at 10% -20%, rgba(11, 143, 110, 0.12), transparent),
      radial-gradient(ellipse 60% 40% at 100% 0%, rgba(49, 61, 72, 0.06), transparent);
    background-attachment: fixed;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-semibold transition;
  }

  .btn-primary {
    @apply btn bg-accent text-white hover:bg-accent-dark;
  }

  .btn-secondary {
    @apply btn border border-ink-200 bg-white text-ink-800 hover:bg-ink-50;
  }

  .btn-danger {
    @apply btn border border-red-200 bg-white text-red-700 hover:bg-red-50;
  }

  .btn-ghost {
    @apply btn text-ink-600 hover:bg-ink-100/70;
  }

  .field {
    @apply w-full rounded-lg border border-ink-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm outline-none transition focus:border-accent focus:ring-2 focus:ring-accent/20;
  }

  .card {
    @apply rounded-2xl border border-ink-200/80 bg-white/90 shadow-soft backdrop-blur;
  }

  .marketing-scatter-card {
    @apply rounded-xl border border-ink-200/80 bg-white px-3 py-2 text-sm shadow-soft;
  }

  .task-handle {
    @apply cursor-grab touch-none text-ink-300 hover:text-ink-500 active:cursor-grabbing;
  }

  .task-row.is-dragging {
    @apply opacity-80 shadow-soft ring-2 ring-accent/30;
  }

  .check-style-checkboxes input[type="checkbox"],
  .check-style-squared input[type="checkbox"] {
    @apply rounded;
  }

  .check-style-checkmark-circle input[type="checkbox"],
  .check-style-number-circle input[type="checkbox"] {
    @apply rounded-full;
  }

  .check-style-yes-no input[type="checkbox"]:checked::after {
    content: "Y";
    @apply text-[10px] font-bold;
  }

  .checklist-theme {
    background: var(--cl-bg, transparent);
  }

  .checklist-theme .checklist-title {
    color: var(--cl-title, inherit);
    font-family: var(--cl-title-font, inherit);
  }

  .checklist-theme .checklist-desc {
    color: var(--cl-desc, inherit);
    font-family: var(--cl-desc-font, inherit);
  }

  .checklist-theme .task-name {
    color: var(--cl-task, inherit);
    font-family: var(--cl-task-font, inherit);
  }

  .checklist-theme input[type="checkbox"] {
    accent-color: var(--cl-check, #0b8f6e);
  }

  trix-editor {
    @apply field min-h-[6rem];
  }
}

@layer utilities {
  .marketing-hero-enter {
    animation: marketing-hero-enter 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .marketing-hero-enter-delay-1 {
    animation-delay: 120ms;
  }

  .marketing-hero-enter-delay-2 {
    animation-delay: 220ms;
  }

  .marketing-hero-enter-delay-3 {
    animation-delay: 320ms;
  }

  .marketing-float {
    animation: marketing-float 7s ease-in-out infinite;
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
      opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal-delay="1"].is-revealed {
    transition-delay: 80ms;
  }

  [data-reveal-delay="2"].is-revealed {
    transition-delay: 160ms;
  }

  [data-reveal-delay="3"].is-revealed {
    transition-delay: 240ms;
  }
}

@keyframes marketing-hero-enter {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes marketing-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.marketing-mobile-nav.is-open {
  transform: translateX(0);
}

.marketing-demo-check::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: transparent;
  transition: background 200ms ease;
}

.marketing-demo-task.is-done .marketing-demo-check {
  border-color: #0b8f6e;
  background: #d8f3ea;
}

.marketing-demo-task.is-done .marketing-demo-check::after {
  background: #0b8f6e;
}

.marketing-demo-task.is-done .marketing-demo-task-name {
  text-decoration: line-through;
  color: #7b99ab;
}

.marketing-rotating-phrase {
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 400ms ease;
}

.marketing-rotating-phrase.is-active {
  opacity: 1;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-hero-enter,
  .marketing-float {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .marketing-rotating-phrase {
    transition: none !important;
  }

  .marketing-mobile-nav {
    transition: none !important;
  }
}