/* ============================================================================
   duxwrx.com - brand overrides for the copied css/forms.css
   ----------------------------------------------------------------------------
   css/forms.css is copied VERBATIM from carmstudio.com so a fix made there can be
   dropped straight in here. It hardcodes that site's brand colors, though:

       #B98847  gold   - focus ring, slider track fill, Send button
       #862A63  plum   - slider thumb, Send button hover
       #F86000  orange - the required-field asterisk

   On this site those render the form in the product's plum and gold rather than
   the company's charcoal and red. Rather than edit the copy and lose the ability
   to diff it, this file re-points those colors at our own tokens. It MUST load
   after forms.css.

   Deliberately NOT overridden:
     - #C4302B, the field-error red. It is close to our own #A83030 but it should
       read as an error rather than as an accent, and it is legible on both
       themes. Left alone on purpose.
     - #2E7D32, the "unlocked" green on an armed slider. Green means passed; that
       is worth more than brand consistency on one control. Lightened for dark
       mode below, because the original fails contrast there.
   ============================================================================ */

/* Focus ring: gold -> our accent. */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: var(--focus);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The required marker. Orange belongs to neither palette. */
.form-field label .req {
	color: var(--accent);
}

/* Slider track. The FILLED portion is a fill, so it takes --accent-fill and matches the
   buttons. The TARGET MARK stays on --accent: it is a thin line on the unfilled track and it
   is the thing you are aiming at, so it needs to stay the more visible of the two. */
.slider-gate input[type="range"] {
	background:
		linear-gradient(90deg, transparent calc(var(--target-pct, 100%) - 1%), var(--accent) var(--target-pct, 100%), transparent var(--target-pct, 100%)),
		linear-gradient(90deg, var(--accent-fill) var(--slide-pct, 0%), var(--border) var(--slide-pct, 0%));
}

/* The handle. Takes the fill colour so it matches the track it is dragging. The white ring
   is what keeps it visible against the filled track, so it stays white in both themes. */
.slider-gate input[type="range"]::-webkit-slider-thumb {
	background-color: var(--accent-fill);
	border-color: #FFFFFF;
}
.slider-gate input[type="range"]::-moz-range-thumb {
	background-color: var(--accent-fill);
	border-color: #FFFFFF;
}

/* Send button. WHITE LABEL IN BOTH THEMES, on --accent-fill so it matches every other
   button and the slider it sits beside.
   This previously set the dark-theme label to near-black, because the dark accent was
   a light red that white could not sit on. Fills are now darker than the logo red
   rather than lighter, so a white label works everywhere and the override is gone. */
.form-actions button[type="submit"] {
	background-color: var(--accent-fill);
	color: #FFFFFF;
	/* Same reasoning as the site's other filled labels - see the note by .btn-primary in
	   site.css. Greyscale antialiasing thins white strokes on a dark fill and the eye reads
	   that as a dull grey rather than white. */
	font-weight: 700;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
.form-actions button[type="submit"]:hover:enabled {
	background-color: var(--btn-hover);
	color: #FFFFFF;
}

/* The armed-slider green fails 4.5:1 on our dark surfaces; lighten it there. */
html[data-theme="dark"] .slider-gate.armed input[type="range"]::-webkit-slider-thumb {
	background-color: #5CB860;
}
html[data-theme="dark"] .slider-gate.armed input[type="range"]::-moz-range-thumb {
	background-color: #5CB860;
}
html[data-theme="dark"] .slider-gate.armed .slider-label {
	color: #7BC47F;
}

/* The blocked-notice heading and the server-error panel keep the error red, but it
   needs lifting on a dark surface to stay readable. */
html[data-theme="dark"] .form-result.blocked h2,
html[data-theme="dark"] .form-errors,
html[data-theme="dark"] .form-field .field-error {
	color: #F08A85;
}

/* THE FORM IS A CARD ON THE DARK CANVAS, like every other section's content. forms.css gives
   .form-wrap a --panel-bg fill and a 10px radius of its own; that already makes it a card, so
   its <section> is marked .bare in contact.html rather than carded twice. What it does not
   have is the border and shadow the rest of the site's cards carry, and on a dark canvas the
   border is what gives a dark-theme card an edge at all. Matched here rather than in the copy. */
.form-wrap {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}