:root {
    /*colors*/
    --main-color: #005596;
    --main-color-darken: #004686;
    /* gold is a two-color palette: --main-action-color + --main-action-color-darker (below) */
    --tertiary-color-1: #f6f7f8;
    --tertiary-color-2: #ccc;
    --tertiary-color-3: #767676;
    --tertiary-color-4: #333;
    --surface-color: #fff;   /* white card / panel / sticky-bar surface */
    --dark-text-color: #333;
    --light-text-color: #fff;
    --link-color: #005596;
    /* status — all three pass WCAG AA as text on white */
    --error-red-color: #d51f28;
    --error-red-color-darker: #b01a22;   /* hover shade for destructive buttons (pairs like the gold set) */
    --success-green-color: #207d4c;
    --warning-yellow-color: #a86300;
    /* aliases of the neutral scale — historic names still referenced widely in styles.css */
    --gray-color: var(--tertiary-color-3);
    --dark-gray-color: var(--tertiary-color-4);
    /* stock-nop accent, used by base components in styles.css — off-brand sky blue; do NOT
       use in new work (use --main-color); re-pointing awaits a per-role contrast audit */
    --accent-blue-color: #4ab2f1;
    --accent-blue-active-color: #248ece;
    /* fonts */
    --main-font: 'Open Sans', sans-serif;
    --secondary-font: Georgia, serif;   /* headings serif (replaced Corda, which never actually loaded) */
    --main-font-size: 1.6rem;
    --main-font-weight: 400;
    --main-line-height: 1.6;
    /* form elements */
    --element-border-radius: 5px;
    --element-border: 1px solid var(--tertiary-color-2);
    --element-width: 100%;
    --element-height: auto;
    --element-font-size: var(--main-font-size);
    --element-font-weight: 600;
    --element-padding: 1.3rem 0;
    --element-text-indent: 1.3rem;
    --element-text-align: left;
    --input-display: block;
    /* buttons */
    --btn-padding: 1.3rem 3rem;
    --btn-margin: 2rem 0;
    --btn-height: auto;
    --btn-width: 100%;
    --btn-text-transform: none;
    --btn-font-weight: 700;
    --btn-font-size: 2rem;
    --btn-background: var(--main-color);
    --btn-background-darken: var(--main-color-darken);
    --btn-border: 2px solid var(--btn-background);
    --btn-color: var(--light-text-color);
    --btn-letter-spacing: 0;
    --btn-text-align: center;
    --btn-display: block;
    --main-action-color: #ffb32c;
    --main-action-color-darker: #de910a;
    /* effects */
    --transition: all 0.3s ease;
    --box-shadow: 1px 4px 6px -2px rgba(0,0,0,.3);
    /* gradient */
}



/*#endregion*/


/*#region form elements ******************************************************************************************************************************************************************************/
textarea:focus,
select:focus,
input[type='text']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='date']:focus,
input[type='tel']:focus,
input[type='password']:focus {
    --element-border: 1px solid var(--tertiary-color-3);
}
.CategoryFiltersWrapper select,
.k-dropdown.small,
.k-multiselect.small,
input.small,
textarea.small,
select.small,
input[type='text'].small,
input[type='tel'].small,
input[type='number'].small,
input[type='email'].small,
input[type='date'].small,
input[type='password'].small {
    --element-height: 40px;
    --element-font-size: 1.4rem;
    --element-padding: 0 6rem 0 1.5rem;
}

input.qty-input {
    --element-width: 60px;
    --element-text-align: center;
    --element-text-indent: 0;
}

/*#endregion*/



/*#region section ******************************************************************************************************************************************************************************/

/*#endregion*/