/*
 * Form control boundaries.
 *
 * WCAG 1.4.11 requires 3:1 between a control's boundary and the surface behind
 * it. The general border token is tuned for card dividers and sits well below
 * that, so controls use their own token.
 *
 * Selectors here are written out rather than wrapped in :where(). :where()
 * contributes no specificity, which left these rules losing to the historical
 * literal colours they are meant to correct.
 *
 * This file loads after the admin and public layers and is the single place the
 * control boundary is decided.
 */

html {
    --color-control-border: #6b7c93;
    --tww-public-control-border: #7f8da1;
}

/* ------------------------------------------------------------------ *
 * Authenticated console
 * ------------------------------------------------------------------ */
body .tww-input,
body .tww-select,
body .tww-textarea,
body .tww-select-search {
    border-color: var(--color-control-border);
}

body .tww-select-search {
    border-style: dashed;
}

body input[type="checkbox"],
body input[type="radio"] {
    accent-color: var(--color-primary, #1d4ed8);
    border-color: var(--color-control-border);
}

/* ------------------------------------------------------------------ *
 * Public site
 * ------------------------------------------------------------------ */
body.tww-public-body .tww-public-filter-bar input,
body.tww-public-body .tww-public-filter-bar select,
body.tww-public-body .tww-public-filter-bar textarea,
body.tww-public-body .tww-form-shell input,
body.tww-public-body .tww-form-shell select,
body.tww-public-body .tww-form-shell textarea,
body.tww-public-body .tww-input {
    border-color: var(--tww-public-control-border);
    border-style: solid;
}

body.tww-public-body input[type="checkbox"],
body.tww-public-body input[type="radio"] {
    accent-color: var(--tww-public-primary, #1d4ed8);
}

/* A disabled control keeps a visible boundary; only its fill recedes, so the
   control is still findable rather than dissolving into the page. */
body .tww-input:disabled,
body .tww-select:disabled,
body .tww-textarea:disabled,
body.tww-public-body input:disabled,
body.tww-public-body select:disabled,
body.tww-public-body textarea:disabled {
    border-color: var(--color-control-border);
    opacity: .72;
}

body.tww-public-body input:disabled,
body.tww-public-body select:disabled,
body.tww-public-body textarea:disabled {
    border-color: var(--tww-public-control-border);
}

/* Placeholder text is content, not decoration, and must stay readable. */
body .tww-input::placeholder,
body .tww-textarea::placeholder,
body.tww-public-body input::placeholder,
body.tww-public-body textarea::placeholder {
    opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Reaching the authoritative layer without competing with it
 *
 * tww-product-design-system.css sets control borders with
 * `border: 1px solid var(--tww-ds-border) !important`, which no ordinary
 * declaration can override. Rather than answer !important with more of it,
 * the variable that rule reads is redefined on the control itself: var()
 * resolves against the element, so the authoritative rule now paints the
 * control-boundary colour while every other use of the border token, such
 * as card dividers, is untouched.
 * ------------------------------------------------------------------ */
body .tww-input,
body .tww-select,
body .tww-textarea,
body .tww-select-search,
body input[type="text"],
body input[type="email"],
body input[type="search"],
body input[type="url"],
body input[type="tel"],
body input[type="number"],
body input[type="password"],
body input[type="date"],
body input[type="time"],
body select,
body textarea {
    --tww-ds-border: var(--color-control-border);
}

body.tww-public-body .tww-input,
body.tww-public-body .tww-public-filter-bar input,
body.tww-public-body .tww-public-filter-bar select,
body.tww-public-body .tww-public-filter-bar textarea,
body.tww-public-body .tww-form-shell input,
body.tww-public-body .tww-form-shell select,
body.tww-public-body .tww-form-shell textarea,
body.tww-public-body input,
body.tww-public-body select,
body.tww-public-body textarea {
    --tww-ds-border: var(--tww-public-control-border);
}