/* button.css — Phase 1 ships only solid / default / md. * Codex concern #7: no CSS nesting (`&:hover`). All pseudo-class rules are * declared as top-level selectors so the file is portable across every * Tailwind v4 standalone processing mode. */ .ui-button { display: inline-flex; align-items: center; font-family: inherit; font-size: 1rem; line-height: 1.25; border: 1px solid transparent; cursor: pointer; user-select: none; text-decoration: none; } .ui-button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } .ui-button.htmx-request { opacity: 0.6; pointer-events: none; } .ui-button-solid-default-md { display: inline-flex; align-items: center; border-radius: 0.375rem; background-color: #2563eb; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 600; color: #ffffff; } .ui-button-solid-default-md:hover { background-color: #1d4ed8; } .ui-button-solid-default-md:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } /* Phase 3: Danger (solid) and Neutral-soft button variants. */ /* Codex concern #7: no CSS nesting — all pseudo-class rules are top-level. */ .ui-button-solid-danger-md { display: inline-flex; align-items: center; border-radius: 0.375rem; background-color: #b91c1c; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 600; color: #ffffff; min-height: 44px; } .ui-button-solid-danger-md:hover { background-color: #991b1b; } .ui-button-solid-danger-md:focus-visible { outline: 2px solid #b91c1c; outline-offset: 2px; } .ui-button-soft-neutral-md { display: inline-flex; align-items: center; border-radius: 0.375rem; background-color: #f1f5f9; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 400; color: #334155; border: 1px solid #e2e8f0; min-height: 44px; } .ui-button-soft-neutral-md:hover { background-color: #e2e8f0; } .ui-button-soft-neutral-md:focus-visible { outline: 2px solid #64748b; outline-offset: 2px; } /* Phase 4: Soft-danger button variant for task delete actions. */ /* Codex concern #7: no CSS nesting — all pseudo-class rules are top-level. */ .ui-button-soft-danger-md { display: inline-flex; align-items: center; border-radius: 0.375rem; background-color: #fee2e2; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 600; color: #b91c1c; border: 1px solid #fecaca; min-height: 44px; } .ui-button-soft-danger-md:hover { background-color: #fecaca; } .ui-button-soft-danger-md:focus-visible { outline: 2px solid #b91c1c; outline-offset: 2px; }