/* site.css — small custom layer on top of Tailwind (Play CDN). */
/* Replace the Tailwind Play CDN with a compiled build before launch and
   move component styles here. Keep this file for things Tailwind utilities
   can't easily express. */

:root {
  --wine: #7b1e3b;
  --wine-dark: #5e162d;
}

html { -webkit-font-smoothing: antialiased; }

/* Material Symbols default sizing */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Form controls — the markup uses `border-slate-300` (colour only); Tailwind's
   Preflight resets border-width to 0, so without an explicit `border` utility
   the inputs render borderless (invisible on white cards). Give every form
   control a visible 1px border by default. Element+attribute specificity beats
   Tailwind's single-class colour utility, and focus:border-primary (class +
   pseudo) still wins for the focus colour. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
textarea,
select {
  border-width: 1px;
  border-style: solid;
  border-color: #cbd5e1; /* slate-300 */
  background-color: #fff;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
  border-color: var(--wine);
  outline: 2px solid rgba(123, 30, 59, .15);
  outline-offset: 0;
}