/* * Shared form token layer. * * Each brand's own /{brand}/css/main.min.css (or /css/main.min.css) remains the * owner of how its forms LOOK — those files are hand-edited and must not be * recompiled. This file therefore does NOT impose background/border/colour on * `.auth__input` / `.auth__btn`: doing so would override (clobber) each brand's * existing form styling, because `.brand .auth__input` (loaded after main.min.css * and with higher specificity) would win over the brand's `.auth__input` rules. * * Instead, the per-brand token files (/css/brand/{brand}.tokens.css) expose the * brand palette as CSS custom properties (--form-accent, --form-radius, * --form-font, --form-field-bg, --form-field-border, --form-text). Brand CSS, or * a future fully token-driven form, can consume them via var(--form-*). Until a * brand opts in, this layer is intentionally visually inert and changes nothing. * * To opt a brand into shared token-driven form styling, add the `brand--tokens` * class to the for that brand and extend the rules below. */ .brand--tokens .auth__input { border-radius: var(--form-radius, 12px); border: 1px solid var(--form-field-border, #d1d5db); background: var(--form-field-bg, #ffffff); color: var(--form-text, #0f172a); font-family: var(--form-font, inherit); } .brand--tokens .auth__btn { border-radius: var(--form-radius, 12px); background: var(--form-accent, #2563eb); font-family: var(--form-font, inherit); }