/* Cleverdent — shared surfaces.
 *
 * Everything here applies to every page on the site. The parts of a page a
 * designer doesn't draw — the selection highlight, the caret, the scrollbar,
 * the focus ring, the numerals in a price — ship with browser defaults that
 * belong to no design system. This file gives them the emerald palette so the
 * whole site reads as one built thing rather than six assembled ones.
 *
 * Page-specific behaviour (the nav, the hero entrance, the FAQ disclosure)
 * stays in the page that owns it.
 *
 * Cached for 5 minutes, not a year — see netlify.toml. This file is
 * hand-edited and unhashed, so freezing it would strand visitors on a stale
 * copy exactly the way it would form-guard.js.
 */

::selection {
    background: #a7f3d0;
    color: #064e3b;
}

html {
    scrollbar-color: #6ee7b7 #f1f5f9;
}

/* One focus ring, everywhere, visible against both the light pages and the
   near-black form section. */
:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 3px;
    border-radius: 4px;
}

.bg-\[\#0a0a0a\] :focus-visible,
footer :focus-visible {
    outline-color: #6ee7b7;
}

input,
textarea {
    caret-color: #059669;
}

a {
    text-underline-offset: 0.18em;
}

/* Prices, counts and dates line up column-wise wherever they repeat. */
.tnum {
    font-variant-numeric: tabular-nums;
}

/* Display type needs its tracking pulled in as it scales up; left at default
   it reads loose and unset above about 3rem. */
.display-xl { letter-spacing: -0.035em; }
.display-lg { letter-spacing: -0.025em; }
.display-md { letter-spacing: -0.015em; }

/* ---- Form states ---------------------------------------------------------
   form-guard.js sets button.disabled while a submission is in flight. Without
   these the control looks identical to its idle state, which reads as "the
   click didn't register" and invites a second submit. */
/* Tailwind's preflight injects its own `input::placeholder` at runtime, after
   this file, so it wins on order at equal specificity. The attribute selector
   outranks it without reaching for !important. */
input[type]::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

input:user-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px #dc2626;
}

button:disabled {
    cursor: progress;
}

#submit-btn:disabled,
#submit-btn:disabled:hover {
    background-color: #34d399;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}