@import "tailwindcss";

@theme {
  /* Brand fonts */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-display: "Dela Gothic One", sans-serif;

  /* Brand colours — OKLCH */
  --color-blush: oklch(68% 0.19 8);
  --color-raspberry: oklch(52% 0.19 358);
  --color-cream: oklch(97.5% 0.025 78);
  --color-sunshine: oklch(87% 0.17 82);
  --color-mint: oklch(87% 0.07 163);
  --color-charcoal: oklch(22% 0 0);
  --color-warm-grey: oklch(57% 0.01 75);
  --color-off-white: oklch(98.5% 0.003 102);
  --color-mint-dark: oklch(48% 0.1 163);
  --color-sunshine-dark: oklch(47% 0.09 82);

  /* Custom animations */
  --animate-float: float 3s ease-in-out infinite;
  --animate-float-delayed: float 3s ease-in-out 1.5s infinite;
  --animate-scroll-slogan: scroll-slogan 20s linear infinite;
}

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

@keyframes scroll-slogan {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body {
  @apply bg-cream text-charcoal antialiased;
}

.shadow-card {
  box-shadow: 0 8px 32px oklch(0% 0 0 / 8%), 0 2px 8px oklch(0% 0 0 / 4%);
}

.shadow-float {
  box-shadow: 0 8px 24px oklch(0% 0 0 / 10%);
}

.shadow-modal {
  box-shadow: 0 24px 64px oklch(0% 0 0 / 28%), 0 6px 20px oklch(0% 0 0 / 12%);
}

dialog {
  padding: 0;
  border: none;
  max-width: min(30rem, calc(100vw - 2rem));
  background: transparent;
  /* Restore centering removed by CSS preflight */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}

dialog::backdrop {
  background: oklch(0% 0 0 / 55%);
  backdrop-filter: blur(3px);
}

/* Remove default disclosure triangle from <summary> elements */
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Changeover checklist: dim a section's items when it is marked not applicable */
.checklist-section:has(.na-checkbox:checked) .checklist-items {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* Rotate chevron when a checklist section is open */
details[open] .section-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-float-delayed,
  .animate-scroll-slogan {
    animation: none;
  }
}