/* ============================================================ * farpa DS · component · hc-toggle · v1.0.0 * ------------------------------------------------------------ * Toggle Alto Contraste · OBRIGATÓRIO em todo produto farpa. * Requisito físico do Founder (baixa visão). * Trigger setando [data-theme="hc"] no . * Persistência via localStorage (chave: farpa.theme). * ============================================================ */ .farpa-hc-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--hc-toggle-bg); color: var(--hc-toggle-fg); border: 2px solid var(--hc-toggle-border); border-radius: var(--hc-toggle-radius); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard); } .farpa-hc-toggle:hover { background: var(--bg-strong); } .farpa-hc-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .farpa-hc-toggle__icon { width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(90deg, var(--c-hc-black) 50%, var(--c-hc-white) 50%); border: 2px solid var(--hc-toggle-fg); display: inline-block; flex-shrink: 0; } .farpa-hc-toggle__label { white-space: nowrap; } /* Estado ativo · HC ligado */ [data-theme="hc"] .farpa-hc-toggle { background: var(--c-hc-black); color: var(--c-hc-yellow); border-color: var(--c-hc-black); } [data-theme="hc"] .farpa-hc-toggle__icon { background: linear-gradient(90deg, var(--c-hc-yellow) 50%, var(--c-hc-black) 50%); border-color: var(--c-hc-yellow); } /* Mobile · tap target ≥44px e oculta label em viewport estreito */ @media (max-width: 720px) { .farpa-hc-toggle { min-height: 2.75rem; min-width: 2.75rem; padding: var(--sp-2) var(--sp-3); } } @media (max-width: 480px) { .farpa-hc-toggle__label { /* visualmente oculto · permanece acessível para SR */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .farpa-hc-toggle { padding: var(--sp-2); gap: 0; } }