.button{--button-accent:var(--color-primary);--button-text:var(--color-text-button);--button-border:color-mix(in srgb, var(--button-accent) 52%, #ffffff52);--button-bg-start:color-mix(in srgb, var(--button-accent) 82%, #ffffff2e);--button-bg-end:color-mix(in srgb, var(--button-accent) 66%, transparent);--button-shadow:inset 0 1px 0 #ffffff2e, 0 12px 24px -18px color-mix(in srgb, var(--button-accent) 72%, transparent);background:linear-gradient(180deg, var(--button-bg-start), var(--button-bg-end));min-height:42px;color:var(--button-text);font-family:var(--font-secondary);border:1px solid var(--button-border);box-shadow:var(--button-shadow);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:16px;transition:background-color .3s,border-color .3s,box-shadow .3s,color .3s,opacity .3s,transform .3s;display:inline-flex}.button:hover:not(:disabled){--button-border:color-mix(in srgb, var(--button-accent) 68%, #ffffff6b);--button-bg-start:color-mix(in srgb, var(--button-accent) 90%, #ffffff3d);--button-bg-end:color-mix(in srgb, var(--button-accent) 72%, transparent);opacity:1;transform:translateY(-1px)}.button:disabled{opacity:.45;cursor:not-allowed;transform:none}.button:focus-visible{outline:2px solid color-mix(in srgb, var(--button-accent) 54%, transparent);outline-offset:2px}.button--secondary{--button-text:var(--color-text);--button-border:color-mix(in srgb, var(--color-border) 82%, transparent);--button-bg-start:color-mix(in srgb, var(--color-surface-200) 78%, #ffffff14);--button-bg-end:color-mix(in srgb, var(--color-surface-200) 58%, transparent);--button-shadow:inset 0 1px 0 #ffffff14}.button--danger{--button-accent:var(--color-danger);--button-text:#f4f4f4}.button--success{--button-accent:var(--color-success,#35c46a);--button-text:#f4f4f4}.button--outline{--button-text:var(--color-primary);--button-border:color-mix(in srgb, var(--color-primary) 44%, var(--color-border));--button-bg-start:color-mix(in srgb, var(--color-surface-200) 72%, transparent);--button-bg-end:color-mix(in srgb, var(--color-surface-200) 48%, transparent);--button-shadow:inset 0 1px 0 #ffffff14}.button--ghost{--button-text:var(--color-primary);--button-border:color-mix(in srgb, var(--color-border) 82%, transparent);--button-bg-start:color-mix(in srgb, var(--color-surface-200) 78%, #ffffff14);--button-bg-end:color-mix(in srgb, var(--color-surface-200) 58%, transparent);--button-shadow:inset 0 1px 0 #ffffff14}.button--secondary:hover:not(:disabled),.button--ghost:hover:not(:disabled),.button--outline:hover:not(:disabled){--button-border:color-mix(in srgb, var(--color-primary) 34%, var(--color-border));--button-bg-start:color-mix(in srgb, var(--color-surface-200) 88%, #ffffff1a);--button-bg-end:color-mix(in srgb, var(--color-surface-200) 66%, transparent)}.button.is-block{width:100%}.button--sm{border-radius:9px;gap:6px;min-height:36px;padding:8px 14px;font-size:14px}.button--md{min-height:42px;padding:10px 20px;font-size:16px}.button--lg{border-radius:12px;gap:10px;min-height:48px;padding:12px 24px;font-size:17px}html.light .button{--button-border:color-mix(in srgb, var(--button-accent) 60%, #442a1238);--button-bg-start:color-mix(in srgb, var(--button-accent) 88%, #ffffff4d);--button-bg-end:color-mix(in srgb, var(--button-accent) 62%, #502a0c33);--button-shadow:inset 0 1px 0 #ffffff9e, inset 0 -1px 0 #3f261038, 0 10px 18px -16px color-mix(in srgb, var(--button-accent) 82%, transparent), 0 2px 4px #452d171f}html.light .button:hover:not(:disabled){--button-border:color-mix(in srgb, var(--button-accent) 70%, #442a1242);--button-bg-start:color-mix(in srgb, var(--button-accent) 92%, #ffffff5c);--button-bg-end:color-mix(in srgb, var(--button-accent) 66%, #502a0c2e);--button-shadow:inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #3f261033, 0 12px 20px -16px color-mix(in srgb, var(--button-accent) 84%, transparent), 0 2px 5px #452d1724}html.light .button--secondary,html.light .button--ghost,html.light .button--outline{--button-text:color-mix(in srgb, var(--color-primary) 86%, var(--color-text) 14%);--button-border:color-mix(in srgb, var(--color-primary) 45%, var(--color-border) 55%);--button-bg-start:color-mix(in srgb, var(--color-surface-100) 70%, #ffffff9e);--button-bg-end:color-mix(in srgb, var(--color-surface-200) 84%, #7f4e201f);--button-shadow:inset 0 1px 0 #ffffffbd, inset 0 -1px 0 #472d1629, 0 9px 18px -17px color-mix(in srgb, var(--color-primary) 72%, transparent), 0 2px 3px #452d171a}html.light .button--secondary:hover:not(:disabled),html.light .button--ghost:hover:not(:disabled),html.light .button--outline:hover:not(:disabled){--button-border:color-mix(in srgb, var(--color-primary) 56%, var(--color-border) 44%);--button-bg-start:color-mix(in srgb, var(--color-surface-100) 62%, #ffffffb8);--button-bg-end:color-mix(in srgb, var(--color-surface-200) 78%, #7f4e2029);--button-shadow:inset 0 1px 0 #ffffffd1, inset 0 -1px 0 #472d1624, 0 11px 20px -17px color-mix(in srgb, var(--color-primary) 76%, transparent), 0 2px 4px #452d171f}:is(html.zion-admin-design,html.zion-time-design) .button{--button-border:color-mix(in srgb, var(--button-accent) 46%, var(--zion-border));--button-bg-start:color-mix(in srgb, var(--button-accent) 84%, var(--color-text) 16%);--button-bg-end:color-mix(in srgb, var(--button-accent) 66%, var(--zion-surface-raised));--button-shadow:inset 0 1px 0 #ffffff30, inset 0 -2px 0 color-mix(in srgb, var(--zion-page-deep) 32%, transparent), 0 14px 26px -22px color-mix(in srgb, var(--button-accent) 58%, transparent);border-radius:var(--zion-radius-control);min-height:38px;font-family:var(--zion-font-control);transition:opacity var(--zion-motion-ui) var(--zion-motion-ease), transform var(--zion-motion-fast) var(--zion-motion-ease);padding:8px 16px;font-size:14px;font-weight:680;line-height:1.15}:is(html.zion-admin-design,html.zion-time-design) .button:hover:not(:disabled){--button-border:color-mix(in srgb, var(--button-accent) 62%, var(--zion-border));--button-bg-start:color-mix(in srgb, var(--button-accent) 89%, var(--color-text) 11%);--button-bg-end:color-mix(in srgb, var(--button-accent) 72%, var(--zion-surface-raised));transform:none}:is(html.zion-admin-design,html.zion-time-design) .button:active:not(:disabled){--button-shadow:inset 0 2px 5px color-mix(in srgb, var(--zion-page-deep) 42%, transparent), inset 0 1px 0 #ffffff17;transform:translateY(1px)}:is(html.zion-admin-design,html.zion-time-design) .button:is(.button--secondary,.button--ghost,.button--outline){--button-text:var(--color-text);--button-border:var(--zion-border);--button-bg-start:color-mix(in srgb, var(--zion-surface-raised) 92%, var(--color-text) 8%);--button-bg-end:color-mix(in srgb, var(--zion-surface-soft) 82%, transparent);--button-shadow:inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--zion-page-deep) 20%, transparent)}:is(html.zion-admin-design,html.zion-time-design) .button:is(.button--secondary,.button--ghost,.button--outline):hover:not(:disabled){--button-border:var(--zion-border-strong);--button-bg-start:color-mix(in srgb, var(--zion-surface-raised) 88%, var(--color-primary) 12%);--button-bg-end:color-mix(in srgb, var(--zion-surface-soft) 88%, transparent)}:is(html.zion-admin-design,html.zion-time-design) .button--sm{border-radius:9px;min-height:34px;padding:7px 12px;font-size:13px}:is(html.zion-admin-design,html.zion-time-design) .button--md{min-height:38px;padding:8px 16px;font-size:14px}:is(html.zion-admin-design,html.zion-time-design) .button--lg{border-radius:11px;min-height:44px;padding:10px 20px;font-size:15px}@media (prefers-reduced-motion:reduce){:is(html.zion-admin-design,html.zion-time-design) .button{transition-duration:1ms!important}}:where(html[data-zion-design=current-glass]) .button>:where(svg:not([class]):not([width]):not([height]):not([style])){flex:none;width:18px;height:18px}html[data-zion-design=current-glass] .button.button--primary{--button-border:var(--zion-glass-edge);--button-bg-start:color-mix(in srgb, var(--color-primary) 96%, var(--color-text));--button-bg-end:color-mix(in srgb, var(--color-primary) 88%, var(--color-text));--button-shadow:inset 0 1px 0 color-mix(in srgb, var(--color-text-button) 18%, transparent), 0 14px 28px -22px color-mix(in srgb, var(--color-primary) 66%, transparent)}html[data-zion-design=current-glass] .button:is(.button--secondary,.button--ghost,.button--outline){--button-border:var(--zion-glass-edge-soft);--button-bg-start:var(--zion-glass-data-raised);--button-bg-end:color-mix(in srgb, var(--zion-surface-soft) 88%, var(--color-surface));--button-shadow:var(--zion-glass-control-shadow)}html[data-zion-design=current-glass]:is(.interface-bronze,.interface-light-bronze) .button:is(.button--secondary,.button--ghost,.button--outline){--button-bg-end:color-mix(in srgb, var(--color-primary) 6%, var(--zion-surface-soft))}html[data-zion-design=current-glass] .button:is(.button--secondary,.button--ghost,.button--outline):hover:not(:disabled){--button-border:var(--zion-glass-edge);--button-bg-start:color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-100));--button-bg-end:color-mix(in srgb, var(--color-primary) 7%, var(--color-surface))}
