/* Laguna Tools — hand-written rules Tailwind's CDN utilities can't express. */

/* Theme tokens. Light is the default (no [data-theme] attribute); dark is opt-in,
   toggled by #theme-toggle in partials/nav.php and admin/partials/head.php and
   persisted to localStorage under "lt-theme". Accent stays identical in both
   themes — it's sampled from the real logo, not theme-dependent. */
:root {
  --color-bg: #ffffff;
  --color-surface: #f6f6f7;
  --color-surface-raised: #ececee;
  --color-surface-line: #e0e0e3;
  --color-ink: #17140f;
  --color-ink-muted: #5a564f;
  --color-accent: #fda12b;
  --color-accent-hover: #ffb84d;
  --color-accent-ink: #1c1204;
}

[data-theme="dark"] {
  --color-bg: oklch(0.16 0.012 70);
  --color-surface: oklch(0.22 0.014 70);
  --color-surface-raised: oklch(0.27 0.015 70);
  --color-surface-line: oklch(0.33 0.016 70);
  --color-ink: oklch(0.97 0.005 70);
  --color-ink-muted: oklch(0.78 0.016 70);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

/* Scroll reveal: content is visible by default (no JS = no motion, not blank). */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

[data-reveal].is-visible ~ [data-reveal-group] > * {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

/* Sticky nav shadow state toggled by site.js */
.nav-scrolled {
  box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.6);
}

/* Simple carousel primitive used for hero + testimonials */
.carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Native <dialog> reset — used by admin modals and the public lightbox.
   Tailwind classes handle the rest (size, position, colors); this just
   removes the UA default box/border and styles the backdrop. */
dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}

dialog::backdrop {
  background: rgba(10, 8, 4, 0.6);
}

#lightbox-caption:empty {
  display: none;
}